├── .gitignore ├── README.md ├── README └── how-to-create-sprite-sheets-for-pixijs.png ├── index.html ├── pixi.js ├── pixi.mjs ├── pixijs-spritesheet-example.js ├── scene └── background.png ├── sprites ├── button.png ├── character │ ├── walk_01.png │ ├── walk_02.png │ ├── walk_03.png │ ├── walk_04.png │ ├── walk_05.png │ ├── walk_06.png │ ├── walk_07.png │ └── walk_08.png └── middleground.png └── spritesheets ├── character.json ├── character.png └── character.tps /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PixiJS Sprite Sheet Example 2 | 3 | 4 | 5 | 6 | 7 | This is the demo code for our tutorial [How to create sprite sheets & animations for PixiJS](https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs) 8 | -------------------------------------------------------------------------------- /README/how-to-create-sprite-sheets-for-pixijs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/README/how-to-create-sprite-sheets-for-pixijs.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | PixiJS Sprite Sheet Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /pixijs-spritesheet-example.js: -------------------------------------------------------------------------------- 1 | // Create a PixiJS application 2 | const app = new PIXI.Application({width: 960, height: 540}); 3 | 4 | // add the view that Pixi created for you to the DOM 5 | document.body.appendChild(app.view); 6 | 7 | // load the assets and start the scene 8 | PIXI.Assets.load([ 9 | "spritesheets/character.json", 10 | "scene/background.png" 11 | ]).then(() => { 12 | // initialize background image 13 | const background = PIXI.Sprite.from("scene/background.png"); 14 | app.stage.addChild(background); 15 | 16 | // scale stage container to match the background size 17 | app.stage.scale.x = app.view.width / background.width; 18 | app.stage.scale.y = app.view.height / background.height; 19 | 20 | // add the middle ground from the sprite sheet 21 | const middleground = PIXI.Sprite.from("middleground.png"); 22 | app.stage.addChild(middleground); 23 | 24 | // get the sheet json data, required for resolving animations 25 | const animations = PIXI.Assets.cache.get('spritesheets/character.json').data.animations; 26 | 27 | // create an animated sprite 28 | const character = PIXI.AnimatedSprite.fromFrames(animations["character/walk"]); 29 | 30 | // configure + start animation: 31 | character.animationSpeed = 1 / 6; // 6 fps 32 | character.position.set(150, background.height - 180); 33 | character.play(); 34 | 35 | // Enable this to update the anchor points with each animation frame 36 | character.updateAnchor = true; 37 | 38 | // add it to the stage and render! 39 | app.stage.addChild(character); 40 | 41 | // move the character to the right, restart on the left 42 | app.ticker.add(delta => { 43 | const speed = 6; 44 | character.x = (character.x + speed * delta) % (background.width + 200); 45 | }); 46 | 47 | // some 9-scale sprites 48 | const sprite9a = new PIXI.NineSlicePlane(PIXI.Texture.from("button.png")); 49 | sprite9a.position.set(10,10); 50 | sprite9a.width = 100; 51 | sprite9a.height = 100; 52 | app.stage.addChild(sprite9a); 53 | 54 | const sprite9b = new PIXI.NineSlicePlane(PIXI.Texture.from("button.png")); 55 | sprite9b.position.set(130,10); 56 | sprite9b.width = 200; 57 | sprite9b.height = 100; 58 | app.stage.addChild(sprite9b); 59 | 60 | const sprite9c = new PIXI.NineSlicePlane(PIXI.Texture.from("button.png")); 61 | sprite9c.position.set(10, 130); 62 | sprite9c.width = 100; 63 | sprite9c.height = 200; 64 | app.stage.addChild(sprite9c); 65 | 66 | const sprite9d = new PIXI.NineSlicePlane(PIXI.Texture.from("button.png")); 67 | sprite9d.position.set(130, 130); 68 | sprite9d.width = 200; 69 | sprite9d.height = 200; 70 | app.stage.addChild(sprite9d); 71 | }); 72 | -------------------------------------------------------------------------------- /scene/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/scene/background.png -------------------------------------------------------------------------------- /sprites/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/button.png -------------------------------------------------------------------------------- /sprites/character/walk_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_01.png -------------------------------------------------------------------------------- /sprites/character/walk_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_02.png -------------------------------------------------------------------------------- /sprites/character/walk_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_03.png -------------------------------------------------------------------------------- /sprites/character/walk_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_04.png -------------------------------------------------------------------------------- /sprites/character/walk_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_05.png -------------------------------------------------------------------------------- /sprites/character/walk_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_06.png -------------------------------------------------------------------------------- /sprites/character/walk_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_07.png -------------------------------------------------------------------------------- /sprites/character/walk_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/character/walk_08.png -------------------------------------------------------------------------------- /sprites/middleground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/sprites/middleground.png -------------------------------------------------------------------------------- /spritesheets/character.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "button.png": 4 | { 5 | "frame": {"x":798,"y":1169,"w":100,"h":50}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":100,"h":50}, 9 | "sourceSize": {"w":100,"h":50}, 10 | "anchor": {"x":0,"y":0}, 11 | "borders": {"left":25,"top":13,"right":25,"bottom":12} 12 | }, 13 | "character/walk_01.png": 14 | { 15 | "frame": {"x":798,"y":737,"w":249,"h":514}, 16 | "rotated": true, 17 | "trimmed": true, 18 | "spriteSourceSize": {"x":218,"y":83,"w":249,"h":514}, 19 | "sourceSize": {"w":650,"h":650}, 20 | "anchor": {"x":0.478462,"y":0.896923} 21 | }, 22 | "character/walk_02.png": 23 | { 24 | "frame": {"x":561,"y":737,"w":235,"h":497}, 25 | "rotated": false, 26 | "trimmed": true, 27 | "spriteSourceSize": {"x":211,"y":89,"w":235,"h":497}, 28 | "sourceSize": {"w":650,"h":650}, 29 | "anchor": {"x":0.478462,"y":0.896923} 30 | }, 31 | "character/walk_03.png": 32 | { 33 | "frame": {"x":1,"y":737,"w":170,"h":508}, 34 | "rotated": false, 35 | "trimmed": true, 36 | "spriteSourceSize": {"x":242,"y":84,"w":170,"h":508}, 37 | "sourceSize": {"w":650,"h":650}, 38 | "anchor": {"x":0.478462,"y":0.896923} 39 | }, 40 | "character/walk_04.png": 41 | { 42 | "frame": {"x":1314,"y":737,"w":159,"h":509}, 43 | "rotated": true, 44 | "trimmed": true, 45 | "spriteSourceSize": {"x":246,"y":80,"w":159,"h":509}, 46 | "sourceSize": {"w":650,"h":650}, 47 | "anchor": {"x":0.478462,"y":0.896923} 48 | }, 49 | "character/walk_05.png": 50 | { 51 | "frame": {"x":379,"y":737,"w":180,"h":504}, 52 | "rotated": false, 53 | "trimmed": true, 54 | "spriteSourceSize": {"x":239,"y":87,"w":180,"h":504}, 55 | "sourceSize": {"w":650,"h":650}, 56 | "anchor": {"x":0.478462,"y":0.896923} 57 | }, 58 | "character/walk_06.png": 59 | { 60 | "frame": {"x":173,"y":737,"w":204,"h":506}, 61 | "rotated": false, 62 | "trimmed": true, 63 | "spriteSourceSize": {"x":230,"y":89,"w":204,"h":506}, 64 | "sourceSize": {"w":650,"h":650}, 65 | "anchor": {"x":0.478462,"y":0.896923} 66 | }, 67 | "character/walk_07.png": 68 | { 69 | "frame": {"x":798,"y":988,"w":179,"h":511}, 70 | "rotated": true, 71 | "trimmed": true, 72 | "spriteSourceSize": {"x":238,"y":83,"w":179,"h":511}, 73 | "sourceSize": {"w":650,"h":650}, 74 | "anchor": {"x":0.478462,"y":0.896923} 75 | }, 76 | "character/walk_08.png": 77 | { 78 | "frame": {"x":1311,"y":988,"w":177,"h":516}, 79 | "rotated": true, 80 | "trimmed": true, 81 | "spriteSourceSize": {"x":228,"y":82,"w":177,"h":516}, 82 | "sourceSize": {"w":650,"h":650}, 83 | "anchor": {"x":0.478462,"y":0.896923} 84 | }, 85 | "middleground.png": 86 | { 87 | "frame": {"x":1,"y":1,"w":1920,"h":734}, 88 | "rotated": false, 89 | "trimmed": true, 90 | "spriteSourceSize": {"x":0,"y":346,"w":1920,"h":734}, 91 | "sourceSize": {"w":1920,"h":1080}, 92 | "anchor": {"x":0,"y":0} 93 | }}, 94 | "animations": { 95 | "character/walk": ["character/walk_01.png","character/walk_02.png","character/walk_03.png","character/walk_04.png","character/walk_05.png","character/walk_06.png","character/walk_07.png","character/walk_08.png"] 96 | }, 97 | "meta": { 98 | "app": "https://www.codeandweb.com/texturepacker", 99 | "version": "1.1", 100 | "image": "character.png", 101 | "format": "RGBA8888", 102 | "size": {"w":1922,"h":1246}, 103 | "scale": "1", 104 | "smartupdate": "$TexturePacker:SmartUpdate:335e3857202d7a7f54be28577ca5d294:08eba7828a0da8e24a42cb7060fe1d2c:42e475aa4a03af306bdc7acb5ff91d19$" 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /spritesheets/character.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/pixijs-sprite-sheet-example/3cd413c0103995b0a306b482bc8516ef0f01ae8d/spritesheets/character.png -------------------------------------------------------------------------------- /spritesheets/character.tps: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fileFormatVersion 5 | 6 6 | texturePackerVersion 7 | 7.0.3 8 | autoSDSettings 9 | 10 | 11 | scale 12 | 1 13 | extension 14 | 15 | spriteFilter 16 | 17 | acceptFractionalValues 18 | 19 | maxTextureSize 20 | 21 | width 22 | -1 23 | height 24 | -1 25 | 26 | 27 | 28 | allowRotation 29 | 30 | shapeDebug 31 | 32 | dpi 33 | 72 34 | dataFormat 35 | pixijs4 36 | textureFileName 37 | 38 | flipPVR 39 | 40 | pvrQualityLevel 41 | 3 42 | astcQualityLevel 43 | 2 44 | basisUniversalQualityLevel 45 | 2 46 | etc1QualityLevel 47 | 40 48 | etc2QualityLevel 49 | 40 50 | dxtCompressionMode 51 | DXT_PERCEPTUAL 52 | ditherType 53 | PngQuantLow 54 | backgroundColor 55 | 0 56 | libGdx 57 | 58 | filtering 59 | 60 | x 61 | Linear 62 | y 63 | Linear 64 | 65 | 66 | shapePadding 67 | 0 68 | jpgQuality 69 | 80 70 | pngOptimizationLevel 71 | 1 72 | webpQualityLevel 73 | 101 74 | textureSubPath 75 | 76 | textureFormat 77 | png8 78 | borderPadding 79 | 0 80 | maxTextureSize 81 | 82 | width 83 | 2048 84 | height 85 | 2048 86 | 87 | fixedTextureSize 88 | 89 | width 90 | -1 91 | height 92 | -1 93 | 94 | algorithmSettings 95 | 96 | algorithm 97 | MaxRects 98 | freeSizeMode 99 | Best 100 | sizeConstraints 101 | AnySize 102 | forceSquared 103 | 104 | maxRects 105 | 106 | heuristic 107 | Best 108 | 109 | basic 110 | 111 | sortBy 112 | Best 113 | order 114 | Ascending 115 | 116 | polygon 117 | 118 | alignToGrid 119 | 1 120 | 121 | 122 | dataFileNames 123 | 124 | data 125 | 126 | name 127 | character.json 128 | 129 | 130 | multiPackMode 131 | MultiPackOff 132 | forceIdenticalLayout 133 | 134 | outputFormat 135 | RGBA8888 136 | alphaHandling 137 | ClearTransparentPixels 138 | contentProtection 139 | 140 | key 141 | 142 | 143 | autoAliasEnabled 144 | 145 | trimSpriteNames 146 | 147 | prependSmartFolderName 148 | 149 | autodetectAnimations 150 | 151 | globalSpriteSettings 152 | 153 | scale 154 | 1 155 | scaleMode 156 | Smooth 157 | extrude 158 | 1 159 | trimThreshold 160 | 1 161 | trimMargin 162 | 1 163 | trimMode 164 | Trim 165 | tracerTolerance 166 | 200 167 | heuristicMask 168 | 169 | defaultPivotPoint 170 | 0,0 171 | writePivotPoints 172 | 173 | 174 | individualSpriteSettings 175 | 176 | ../sprites/button.png 177 | 178 | pivotPoint 179 | 0,0 180 | spriteScale 181 | 1 182 | scale9Enabled 183 | 184 | scale9Borders 185 | 25,13,50,25 186 | scale9Paddings 187 | 25,13,50,25 188 | scale9FromFile 189 | 190 | 191 | ../sprites/character/walk_01.png 192 | ../sprites/character/walk_02.png 193 | ../sprites/character/walk_03.png 194 | ../sprites/character/walk_04.png 195 | ../sprites/character/walk_05.png 196 | ../sprites/character/walk_06.png 197 | ../sprites/character/walk_07.png 198 | ../sprites/character/walk_08.png 199 | 200 | pivotPoint 201 | 0.478462,0.896923 202 | spriteScale 203 | 1 204 | scale9Enabled 205 | 206 | scale9Borders 207 | 163,163,325,325 208 | scale9Paddings 209 | 163,163,325,325 210 | scale9FromFile 211 | 212 | 213 | ../sprites/middleground.png 214 | 215 | pivotPoint 216 | 0,0 217 | spriteScale 218 | 1 219 | scale9Enabled 220 | 221 | scale9Borders 222 | 480,270,960,540 223 | scale9Paddings 224 | 480,270,960,540 225 | scale9FromFile 226 | 227 | 228 | 229 | fileLists 230 | 231 | default 232 | 233 | files 234 | 235 | ../sprites 236 | 237 | 238 | 239 | ignoreFileList 240 | 241 | replaceList 242 | 243 | ignoredWarnings 244 | 245 | commonDivisorX 246 | 1 247 | commonDivisorY 248 | 1 249 | packNormalMaps 250 | 251 | autodetectNormalMaps 252 | 253 | normalMapFilter 254 | 255 | normalMapSuffix 256 | 257 | normalMapSheetFileName 258 | 259 | exporterProperties 260 | 261 | 262 | 263 | --------------------------------------------------------------------------------