├── assets ├── cityscene │ ├── background.png │ └── capguy │ │ └── walk │ │ ├── 0001.png │ │ ├── 0002.png │ │ ├── 0003.png │ │ ├── 0004.png │ │ ├── 0005.png │ │ ├── 0006.png │ │ ├── 0007.png │ │ └── 0008.png └── cityscene.tps ├── texturepacker-demo ├── cityscene.png ├── index.html └── cityscene.json └── README.md /assets/cityscene/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/background.png -------------------------------------------------------------------------------- /texturepacker-demo/cityscene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/texturepacker-demo/cityscene.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0001.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0002.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0003.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0004.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0005.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0006.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0007.png -------------------------------------------------------------------------------- /assets/cityscene/capguy/walk/0008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser2-sprite-sheet-example/HEAD/assets/cityscene/capguy/walk/0008.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Phaser sprite sheet optimization tutorial 2 | ========================================= 3 | 4 | The complete tutorial is available here: [Creating sprite sheets for Phaser 2](https://www.codeandweb.com/texturepacker/tutorials/creating-spritesheets-for-phaser-with-texturepacker) 5 | 6 | Content: 7 | 8 | - Creating sprite sheets 9 | - Loading sprite sheets in Phaser 10 | - Using static sprites in Phaser 11 | - Playing animations from the sprite sheet 12 | - Optimizing start up time and reducing download size 13 | 14 | -------------------------------------------------------------------------------- /texturepacker-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TexurePacker+Phaser Demo! 6 | 7 | 8 | 9 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /texturepacker-demo/cityscene.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "background": 4 | { 5 | "frame": {"x":2,"y":2,"w":800,"h":400}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":800,"h":400}, 9 | "sourceSize": {"w":800,"h":400} 10 | }, 11 | "capguy/walk/0001": 12 | { 13 | "frame": {"x":967,"y":2,"w":158,"h":316}, 14 | "rotated": false, 15 | "trimmed": true, 16 | "spriteSourceSize": {"x":15,"y":3,"w":158,"h":316}, 17 | "sourceSize": {"w":187,"h":324} 18 | }, 19 | "capguy/walk/0002": 20 | { 21 | "frame": {"x":1850,"y":2,"w":168,"h":303}, 22 | "rotated": false, 23 | "trimmed": true, 24 | "spriteSourceSize": {"x":0,"y":8,"w":168,"h":303}, 25 | "sourceSize": {"w":187,"h":324} 26 | }, 27 | "capguy/walk/0003": 28 | { 29 | "frame": {"x":1553,"y":2,"w":152,"h":307}, 30 | "rotated": false, 31 | "trimmed": true, 32 | "spriteSourceSize": {"x":26,"y":2,"w":152,"h":307}, 33 | "sourceSize": {"w":187,"h":324} 34 | }, 35 | "capguy/walk/0004": 36 | { 37 | "frame": {"x":1707,"y":2,"w":141,"h":306}, 38 | "rotated": false, 39 | "trimmed": true, 40 | "spriteSourceSize": {"x":42,"y":1,"w":141,"h":306}, 41 | "sourceSize": {"w":187,"h":324} 42 | }, 43 | "capguy/walk/0005": 44 | { 45 | "frame": {"x":1275,"y":2,"w":139,"h":311}, 46 | "rotated": false, 47 | "trimmed": true, 48 | "spriteSourceSize": {"x":33,"y":3,"w":139,"h":311}, 49 | "sourceSize": {"w":187,"h":324} 50 | }, 51 | "capguy/walk/0006": 52 | { 53 | "frame": {"x":1416,"y":2,"w":135,"h":311}, 54 | "rotated": false, 55 | "trimmed": true, 56 | "spriteSourceSize": {"x":29,"y":8,"w":135,"h":311}, 57 | "sourceSize": {"w":187,"h":324} 58 | }, 59 | "capguy/walk/0007": 60 | { 61 | "frame": {"x":1127,"y":2,"w":146,"h":314}, 62 | "rotated": false, 63 | "trimmed": true, 64 | "spriteSourceSize": {"x":32,"y":2,"w":146,"h":314}, 65 | "sourceSize": {"w":187,"h":324} 66 | }, 67 | "capguy/walk/0008": 68 | { 69 | "frame": {"x":804,"y":2,"w":161,"h":319}, 70 | "rotated": false, 71 | "trimmed": true, 72 | "spriteSourceSize": {"x":22,"y":1,"w":161,"h":319}, 73 | "sourceSize": {"w":187,"h":324} 74 | }}, 75 | "meta": { 76 | "app": "http://www.codeandweb.com/texturepacker", 77 | "version": "1.0", 78 | "image": "cityscene.png", 79 | "format": "INDEXED", 80 | "size": {"w":2020,"h":404}, 81 | "scale": "1", 82 | "smartupdate": "$TexturePacker:SmartUpdate:3f95b1feed2fbfc4385b49348c54e958:fed0f696c0a1349f4c5839d5f65ab643:292542e6853f316339413b9243f95b10$" 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /assets/cityscene.tps: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fileFormatVersion 5 | 3 6 | texturePackerVersion 7 | 4.0.0 8 | fileName 9 | /Users/sk/Programming/TexturePacker-Phaser/assets/cityscene.tps 10 | autoSDSettings 11 | 12 | 13 | scale 14 | 1 15 | extension 16 | 17 | spriteFilter 18 | 19 | acceptFractionalValues 20 | 21 | maxTextureSize 22 | 23 | width 24 | -1 25 | height 26 | -1 27 | 28 | 29 | 30 | allowRotation 31 | 32 | premultiplyAlpha 33 | 34 | shapeDebug 35 | 36 | dpi 37 | 72 38 | dataFormat 39 | phaser-json-hash 40 | textureFileName 41 | 42 | flipPVR 43 | 44 | pvrCompressionQuality 45 | PVR_QUALITY_NORMAL 46 | atfCompressData 47 | 48 | mipMapMinSize 49 | 32768 50 | etc1CompressionQuality 51 | ETC1_QUALITY_LOW_PERCEPTUAL 52 | dxtCompressionMode 53 | DXT_PERCEPTUAL 54 | jxrColorFormat 55 | JXR_YUV444 56 | jxrTrimFlexBits 57 | 0 58 | jxrCompressionLevel 59 | 0 60 | ditherType 61 | PngQuantLow 62 | backgroundColor 63 | 0 64 | libGdx 65 | 66 | filtering 67 | 68 | x 69 | Linear 70 | y 71 | Linear 72 | 73 | 74 | shapePadding 75 | 2 76 | jpgQuality 77 | 80 78 | pngOptimizationLevel 79 | 1 80 | webpQualityLevel 81 | 101 82 | textureSubPath 83 | 84 | textureFormat 85 | png 86 | borderPadding 87 | 2 88 | maxTextureSize 89 | 90 | width 91 | 2048 92 | height 93 | 2048 94 | 95 | fixedTextureSize 96 | 97 | width 98 | -1 99 | height 100 | -1 101 | 102 | reduceBorderArtifacts 103 | 104 | algorithmSettings 105 | 106 | algorithm 107 | MaxRects 108 | freeSizeMode 109 | Best 110 | sizeConstraints 111 | AnySize 112 | forceSquared 113 | 114 | forceWordAligned 115 | 116 | maxRects 117 | 118 | heuristic 119 | Best 120 | 121 | basic 122 | 123 | sortBy 124 | Best 125 | order 126 | Ascending 127 | 128 | 129 | andEngine 130 | 131 | minFilter 132 | Linear 133 | packageName 134 | Texture 135 | wrap 136 | 137 | s 138 | Clamp 139 | t 140 | Clamp 141 | 142 | magFilter 143 | MagLinear 144 | 145 | dataFileNames 146 | 147 | data 148 | 149 | name 150 | ../texturepacker-demo/cityscene.json 151 | 152 | 153 | multiPack 154 | 155 | forceIdenticalLayout 156 | 157 | outputFormat 158 | INDEXED 159 | contentProtection 160 | 161 | key 162 | 163 | 164 | autoAliasEnabled 165 | 166 | trimSpriteNames 167 | 168 | prependSmartFolderName 169 | 170 | cleanTransparentPixels 171 | 172 | globalSpriteSettings 173 | 174 | scale 175 | 1 176 | scaleMode 177 | Smooth 178 | extrude 179 | 0 180 | trimThreshold 181 | 1 182 | trimMargin 183 | 1 184 | trimMode 185 | Trim 186 | tracerTolerance 187 | 200 188 | heuristicMask 189 | 190 | pivotPoint 191 | Center 192 | 193 | fileList 194 | 195 | cityscene 196 | 197 | ignoreFileList 198 | 199 | replaceList 200 | 201 | ignoredWarnings 202 | 203 | commonDivisorX 204 | 1 205 | commonDivisorY 206 | 1 207 | packNormalMaps 208 | 209 | autodetectNormalMaps 210 | 211 | normalMapFilter 212 | 213 | normalMapSuffix 214 | 215 | normalMapSheetFileName 216 | 217 | 218 | 219 | --------------------------------------------------------------------------------