Blog posts tagged with 'tutorial'.

How to create sprite sheets & animations for PixiJS 5

2020-04-16 Joachim Grill, Andreas Löw

In this tutorial you learn how to

Create sprite sheets for PixiJS 5.x
Optimize start up time with 8-bit png
Edit pivot points visually

How to translate your Flutter app and edit your .arb files

2020-01-08 Joachim Grill, Andreas Löw

In this tutorial you are going to learn:

How to set up a demo Flutter application
How to add internationalization to the Flutter app
How to translate your Flutter app
How to work with Application Resource Bundle files (.arb)
How to simplify your workflow with BabelEdit

How to translate your Angular 8 app with ngx-translate

2019-06-06 Andreas Löw

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

2019-04-16 Andreas Löw

In this tutorial you are going to learn:

Extract messages to translate with xgettext, stored as Portable Object Template file (.pot)
Use msginit and msgmerge 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

2019-02-07 Andreas Löw

In this tutorial you are going to learn:

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

2019-01-25 Andreas Löw

In this tutorial you are going to learn:

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

2018-11-07 Andreas Löw

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 & animations for PixiJS 4

2018-10-29 Joachim Grill

In this tutorial you learn how to

Create sprite sheets for PixiJS 4.x
Optimize start up time with 8-bit png
Edit pivot points visually

How to create sprite sheets for UnrealEngine Paper2D

2018-10-26 Joachim Grill

In this tutorial you learn how to

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

2018-09-24 Daniel Hofmann

Tutorial: This video shows you how create dynamic light effects for your pixel art scene in Unity using normal maps created with SpriteIlluminator.

How to create sprite sheets and animations with Monogame

2018-06-27 Randolph Burt, Joachim Grill

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.

How to create sprite animations for EaselJS / CreateJS

2018-06-25 Andreas Löw

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

2018-06-13 Andreas Löw

Learn more about:

Using Phaser 3 with MatterJS
Edit physics shapes visually with PhysicsEditor

How to translate your React app with react-i18next

2018-04-13 Joachim Grill

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

2018-04-13 Andreas Löw

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

2018-03-15 Andreas Löw

This video shows you how to easily create sprite sheets (AtlasTexture) for Godot.

Godot 3: How to create tile sets the easy way

2018-03-14 Andreas Löw

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.

How to create sprite sheets for Phaser 3 with TexturePacker

2018-03-01 Joachim Grill, Andreas Löw

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

2018-03-01 Joachim Grill

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

2018-02-16 Joachim Grill

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

2018-02-14 Andreas Löw

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

2018-02-12 Andreas Löw

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

2018-01-10 Tom Vencel

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.

How to translate your Angular 6 app with ngx-translate

2017-12-13 Andreas Löw

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

2017-04-20 Andreas Löw

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

2016-11-08 Andreas Löw

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

2016-11-01 Joachim Grill

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.

How to create a sprite sheet

2016-05-10 Andreas Loew

How to create a sprite sheet

Sprite sheet formats
Simple sprite sheet workflow
Previewing animations

LibGDX Beginner Tutorial: Sprite Sheets & Physics with Box2d

2016-04-04 Travis Haynes

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

2015-12-15 Andreas Löw

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

2015-11-08 Andreas Löw

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

2015-10-07 Josh Morony & Andreas Löw

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

2015-10-01 Andreas Löw

Learn how to increase the performance of your cocos2d-x game.

Reducing artifacts on rotated sprites

2015-09-16 Andreas Löw

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.

Using PhysicsEditor with Cocos2D

2015-07-15 Andreas Löw

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

SpriteKit dynamic light tutorial

2015-05-19 Andreas Loew

What you are going to learn:

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

2015-05-12 Joachim Grill

What you are going to learn:

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

2015-05-11 Andreas Löw

What you are going to learn:

A quick way to generate normal maps
Enhancing the generated normal map by applying structure

2d dynamic lighting tutorial for Unity

2015-05-04 Andreas Löw

What you are going to learn:

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

2015-04-07 Andreas Löw

What you are going to learn:

Pack normal maps into sprite sheets
Create sprite and normal map textures with identical layout

Required skills:

Basic knowledge about sprite sheets
Basic knowledge about normal maps

Creating sprite sheets for ShiVa using TexturePacker

2015-01-09 Andreas Löw

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.

Creating spritesheets for Phaser 2 with TexturePacker

2014-12-17 Andreas Loew

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.

CSS animation examples with TexturePacker

2014-11-05 Kerstin Mueller

What you are going to learn:

Creating a css sprite sheet
Creating hover animations
Playing animations from css

Optimizing sprite sheets for Unity

2014-03-28 Joachim Grill & Andreas Loew

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

2014-01-13 Francesco Maisto

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

SpriteKit Animations and TextureAtlases

2013-09-23 Joachim Grill

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

UIKit Animations with TexturePacker

2013-05-16 Andreas Löw

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

TexturePacker Content Protection

2013-04-19 Andreas Löw

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

2013-02-28 David Hart

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

2012-12-14 Andreas Löw

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

2012-09-06 Andreas Löw

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

2012-06-05 Andreas Löw

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

2012-05-30 Andreas Löw

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

2012-05-24 Andreas Löw

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

Getting started with TexturePacker and CoronaSDK image sheets

2012-05-09 Andreas Löw

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

Getting started with PhysicsEditor and Sparrow and Box2d

2012-05-07 Andreas Löw

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

Getting started with PhysicsEditor and Nape

2012-05-07 Andreas Löw

Short tutorial how to use PhysicsEditor with Nape

Full source code to this example project is available on GitHub.

Getting started with Gideros and PhysicsEditor

2012-05-07 Andreas Löw

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.

Getting started with PhysicsEditor and AndEngine

2012-05-07 Andreas Löw

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.

Example with CoronaSDK using PhysicsEditor & TexturePacker

2012-01-22 Andreas Löw

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.

Creating polygon shapes for box2d for flash / as3 using PhysicsEditor

2011-05-13 Andreas Löw

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.

Tutorial: XCode4 integration of TexturePacker for Cocos2d and Sparrow framework

2011-05-11 Andreas Löw

Integrate TexturePacker into XCode to save time and memory! Learn both ways to achieve this:

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

2011-04-04 Andreas Löw

Learn how to write a batch file to automatically convert or optimize images with TexturePacker command line.

Setting collision parameters

2011-03-18 Andreas Löw

Explaining physics parameters and collision parameters in PhysicsEditor.

Batch converting images to pvr or pvr.ccz

2011-03-06 Andreas Löw

Learn how to write a batch file to automatically convert or optimize images with TexturePacker command line. Continue reading...