Blog posts tagged with 'tutorial'.
Blog posts tagged with 'tutorial'.
How to translate your Angular 8 app with ngx-translate
In this tutorial you are going to learn:
- How to translate your Angular 8 application
- How to set up ngx-translate 11
- How to update your translation files with ngx-translate-extract
- How to edit and maintain multiple JSON files
Tutorial: Translation with gettext + PHP
- Extract messages to translate with
xgettext
, stored as Portable Object Template file (.pot) - Use
msginit
andmsgmerge
to create a Portable Object file (.po) for each language - Convert the PO files into optimized Machine Object Files (.mo) using
msgfmt
How to translate your Ember.js application with ember-intl
- How to translate your Ember.js application
- How to set up ember-intl
- How to edit and maintain your translations in YAML or JSON files
How to translate your Vue.js application with vue-i18n
- How to translate your Vue.js application
- How to set up vue-i18n
- How to edit and maintain your translations in .vue or JSON files
How to translate your Angular 7 app with ngx-translate
In this tutorial you are going to learn:
- How to translate your Angular 7 application
- How to set up ngx-translate 11
- How to update your translation files with ngx-translate-extract
- How to edit and maintain multiple JSON files
How to create sprite sheets and animations for PixiJS
- Create sprite sheets for PixiJS
- Optimize start up time with 8-bit png
- Edit pivot points visually
How to create sprite sheets for UnrealEngine Paper2D
- Create sprite sheets for UnrealEngine / Paper2d
- Create flipbook animations in UnrealEngine
- Edit pivot points in TexturePacker
How to create dynamically lit 2d pixel art scenes with Unity
Tutorial: This video shows you how create dynamic light effects for your pixel art scene in Unity using normal maps created with SpriteIlluminator.
Continue reading...How to create sprite sheets and animations with Monogame
Learn how to use sprite sheet animations in MonoGame:
- Creating sprite sheets with TexturePacker
- Using Monogame Spritesheet loader
- Cross-platform desktop application with Visual Studio
- Create a complete demo scene with animations
Full source code available on GitHub.
Continue reading...How to create sprite animations for EaselJS / CreateJS
Learn more about:
- Why using sprite sheets is important for your game
- Create sprite sheets for EaselJS/CreateJS
- Load assets from the server using PreloadJS
- Use animations from a sprite sheet
- Set/edit pivot points
- Optimize your sprite sheet for fast downloads
How to create physics shapes for Phaser 3 and Matter JS
Learn more about:
- Using Phaser 3 with MatterJS
- Edit physics shapes visually with PhysicsEditor
How to translate your React app with react-i18next
Localize your React app using react-i18next. Learn more about:
- Internationalization of your app by integrating react-i18next
- Extract message IDs with babel-plugin-react-i18next
- Create and maintain translation files using BabelEdit
Laravel translation tutorial: How to translate your web app
Localize your Laravel project and learn more about:
- Internationalization of your project
- Translating your views
- Maintaining translation files with BabelEdit
- Exchanging files with translators
Godot 3: How to create sprite sheets the easy way
This video shows you how to easily create sprite sheets (AtlasTexture) for Godot.
Continue reading...
Godot 3: How to create tile sets the easy way
This video (1:50) shows you how to easily create tile sets for Godot.
Spoiler: About half of the video is used to install the TexturePacker importer plugin from Godot's asset library. Creating the tile sets only takes about 40s.
Continue reading...How to create sprite sheets for Phaser 3 with TexturePacker
Content of the tutorial:
- Creating sprite sheets with TexturePacker
- Loading sprite sheets in Phaser
- Setting pivot points with TexturePacker
- Playing animations from the sprite sheet
- Optimizing start up time and reducing download size
- Complete code is on GitHub
How to create light effects in Phaser 3
Content of the tutorial:
- Load normal maps in Phaser
- Create movable light
- Use normal mapped sprites
- Use animated normal mapped sprites
How to translate your React app with react-intl + Example
Localize your React app using react-intl. Learn more about:
- Internationalization of your app by integrating react-intl
- Extract message IDs with babel-plugin-react-intl
- Create and maintain translation files using BabelEdit
How to create physics shapes for Panda2 and P2 physics
In this tutorial you are going to learn
- How to set up Panda 2 with Physics (P2 engine)
- How to create basic physical shapes (circles, rectangles)
- How to create complex physical shapes (polygon based)
- How to use
PhsicsSprite
for a simple integration of physics - How to create your own classes which give you even more control over the physics simulation
Panda2 sprite sheet animations tutorial
Basic game scene tutorial for Panda2
- Pack an animation into a sprite sheet
- Optimize the sprite sheet for performance and download speed
- Edit pivot points using TexturePacker's pivot point editor
- Build a basic game scene with a walking character
Panda Playtime: Texture packing
Tom Vencel creates a video series called Panda Playtime in which he explains how to use PandaJS.
This episode is about creating sprite sheets with TexturePacker.
Continue reading...How to translate your Angular 6 app with ngx-translate
In this tutorial you are going to learn:
- How to set up ngx-translate
- How to update your translation files with ngx-translate-extract
- How to edit and maintain multiple JSON files
How to use physics with cocos2d-x
In this tutorial you are going to learn:
- How physics enabled games work in cocos2d-x
- How to create physics collision shapes for cocos2d-x
- How to load the shapes in your game
- How to set up a simple scene with dropping objects
How to create Responsive Retina CSS sprites
Learn how to create css sprites:
- Simple workflow
- Minified images using pngquant algorithm
- Serve high quality images for Retina / HighDPI devices
- Responsive
SpriteKit TextureAtlases with Swift 3
Learn how to use SpriteSheets with SpriteKit:
- Creating sprite sheets with TexturePacker
- Loading sprite sheets
- Using header files to enable compile time checks
- Play animations with a single line of code
This blog post contains full source code available on GitHub.
Continue reading...How to create a sprite sheet
How to create a sprite sheet
- Sprite sheet formats
- Simple sprite sheet workflow
- Previewing animations
LibGDX Beginner Tutorial: Sprite Sheets & Physics with Box2d
Basic tutorial for libGDX users:
- Creating a new project
- Creating sprite sheets
- Using sprites
- Creating physics collision shapes
- Editing physics parameters
- Using physics in your game
Tutorial: Using sprite sheet animations in cocos2d-x V3
In this tutorial you are going to learn:
- Why you should use sprite sheets
- Designing and running your game on different devices and screen sizes
- Creating optimized sprite sheets
- Creating animations
- Playing character animations
Tutorial: Using sprite sheets in MelonJS
In this tutorial you are going to learn:
- Why you should use a sprite sheet in your MelonJS game
- Using TexturePacker to create a sprite sheet
- Optimizing the sprite sheet for size faster downloads
- Adding a static background
- Creating an animation
Tutorial: Creating a game with Phaser and P2 Physics
This tutorial explains how to create a small physics enabled game with Phaser
- Creating physics collision shapes
- Working with collision groups
- Starting the physics simulation
- The difference between Arcade and P2 physics
Performance optimization for cocos2d-x using polygon sprite meshes
Learn how to increase the performance of your cocos2d-x game.
Continue reading...Reducing artifacts on rotated sprites
Get rid of those ugly edge artifacts!
I prefer smooth edges instead over jagged outlines.
TexturePacker 4's upcoming feature trim margin gives you full control over sprite's transparency when using trim & crop. It also replaces inner padding.
Learn how to take advantage of this new feature to improve your game's quality.
Continue reading...Using PhysicsEditor with Cocos2D
This tutorial explains how you can use PhysicsEditor with version 3 of Cocos2D, which has integrated Chipmunk2D as physics engine.
- Create physics shapes for your sprites
- Setup your Cocos2D application
- Add collision shapes to your sprites
Exporter included for download
Continue reading...SpriteKit dynamic light tutorial
- Create your normal maps using SpriteIlluminator
- Create a side-scrolling scene with parallax scrolling
- Create a normal mapped sprite
- Add light effects to the game scene
cocos2d-x dynamic light tutorial
- Create your normal maps + sprite sheets using SpriteIlluminator and TexturePacker.
- Load animation frames from a sprite sheet
- Load a normal map sprite sheet and add a light effect to your animation
SpriteIlluminator: Normal map painting
- A quick way to generate normal maps
- Enhancing the generated normal map by applying structure
2d dynamic lighting tutorial for Unity
- Creating normal mapped sprites with SpriteIlluminator
- Packing sprite sheets and normal maps with TexturePacker
- Importing normal mapped sprites into Unity
Packing normal maps into sprite sheets
- Pack normal maps into sprite sheets
- Create sprite and normal map textures with identical layout
- Basic knowledge about sprite sheets
- Basic knowledge about normal maps
Creating sprite sheets for ShiVa using TexturePacker
Learn how to use Sprite Sheets with ShiVa:
- What are sprite sheets? Why should you use them?
- Creating sprite sheets with TexturePacker
- Installing and using JPSprite
- Playing animations
This blog post contains full source code available on GitHub.
Continue reading...Creating spritesheets for Phaser 2 with TexturePacker
Learn how to use SpriteSheets with Phaser:
- Creating sprite sheets with TexturePacker
- Loading sprite sheets in Phaser
- Optimizing start up time and reducing download size
- Using static sprites in Phaser
- Playing animations from the sprite sheet
This blog post contains full source code available on GitHub.
Continue reading...CSS animation examples with TexturePacker
What you are going to learn:
- Creating a css sprite sheet
- Creating hover animations
- Playing animations from css
Optimizing sprite sheets for Unity
This tutorial describes how you can use TexturePacker to create sprite sheets for Unity's 2D extension.
- Prepare your Unity project to read TexturePacker sprite sheets
- Create your sprite sheet and load it into Unity
- Handling deleted sprites in Unity
- Simplify your sprites workflow in Unity
Getting started with Starling A Flash game development framework
Learn how to create a sprite sheet in TexturePacker and use it in a simple Starling application.
- Setting up a Starling project
- Use TexturePacker for your sprite sheet
- Include the sprite sheet in your project
Full source code is available on GitHub
Continue reading...SpriteKit Animations and TextureAtlases
Learn how you can improve development of SpriteKit games and apps using TexturePacker.
- Create your SpriteKit atlas with TexturePacker
- Creating a SKSpriteNode from the texture atlas
- Using SKActions to move the sprite
- Applying SKAction to multiple SKSpriteNodes
Full source code is available on GitHub
Continue reading...UIKit Animations with TexturePacker
What you are going to learn:
- Using the sprites with UIKit
- Add static images
- Add and control animations
Full source code is available on GitHub
Continue reading...TexturePacker Content Protection
Learn how to protect your sprites from getting ripped out of your applications.
- Setting up TexturePacker for encryption
- Preparing your cocos2d project for content protection
- Apple's requirements on encryption and Content Protection
Integrating TexturePacker with Xcode’s Build Rules
Learn how to integrate TexturePacker with Xcode’s Build Rules:
- benefit from Xcode’s ability to compile several files
- use .tps files as an integral part of the build process
- add build rules for each different texture formats
Designing content for the whole iOS family
This is what you are going to learn:
- difficulties with different screen resolutions
- Features of the TexturePacker AutoSD feature
- Using scaling variants for iOS devices
Dynamic Content Scaling for Corona SDK
Use dynamic content scaling in Corona SDK
- How to use the new AutoSD feature
- load the image sheets in CoronaSDK
Using JavaScript to enhance your TexturePacker output format
What you are going to learn:
- How to create a new TexturePacker template
- How the folder structure looks like
- include a javascript file to enhance the exporter
Customize PhysicsEditor Exporter
What you are going to learn:
- Anatomy of a Custom Shape Exporter
- Add new parameters to existing exporters
- Modify the output format
- Create your own exporter
Getting started with CoronaSDK and PhysicsEditor
What you are going to learn:
- create different objects
- set physics parameters
- enable fixture based collision handling
Full source code to this example project is available on GitHub
Continue reading...Getting started with TexturePacker and CoronaSDK image sheets
What you are going to learn:
- Introduction of the new CoronaSDK ImageSheet API
- Using it with TexturePacker 3.0.0
Full source code to this example project is available on GitHub
Continue reading...Getting started with PhysicsEditor and Sparrow and Box2d
What you are going to learn:
- create a sprite and attach the image object
- create a physics body object
- attach the fixtures to the body
The complete code is available on GitHub
Continue reading...Getting started with PhysicsEditor and Nape
Short tutorial how to use PhysicsEditor with Nape
Full source code to this example project is available on GitHub.
Continue reading...Getting started with Gideros and PhysicsEditor
This example teaches you how to use PhysicsEditor with Gideros to create state of the art physics enabled games.
Full source code to this example project is available on GitHub.
Continue reading...Getting started with PhysicsEditor and AndEngine
This demo project contains all you need to get started to use physics shapes created with PhysicsEditor in your AndEngine project.
Full source code to this example project is available on GitHub.
Continue reading...Example with CoronaSDK using PhysicsEditor & TexturePacker
Small example for CoronaSDK using PhysicsEditor to create the shapes and TexturePacker for the sprite sheets.
Full source code to this example project is available on GitHub.
Continue reading...Creating polygon shapes for box2d for flash / as3 using PhysicsEditor
Learn how to create collision shapes for box2d's flash/as3 port.
- Creating the box2d collision shapes using PhysicsEditor
- Setting up box2d for flash
Full source code to this example project is available on GitHub.
Continue reading...Tutorial: XCode4 integration of TexturePacker for Cocos2d and Sparrow framework
- create .tps files from TexturePacker and update them from the build phase
- simply use the commandline interface of TexturePacker
Batch converting and optimizing images for web and games in Windows
Learn how to write a batch file to automatically convert or optimize images with TexturePacker command line.
Continue reading...Setting collision parameters
Explaining physics parameters and collision parameters in PhysicsEditor.
Continue reading...