├── public ├── favicon.png ├── assets │ └── spritesheets │ │ ├── cityscene.png │ │ └── cityscene.json └── style.css ├── sprites ├── cityscene │ ├── button.png │ ├── background.png │ └── capguy │ │ └── walk │ │ ├── 0001.png │ │ ├── 0002.png │ │ ├── 0003.png │ │ ├── 0004.png │ │ ├── 0005.png │ │ ├── 0006.png │ │ ├── 0007.png │ │ └── 0008.png └── cityscene.tps ├── src ├── main.js └── game │ ├── main.js │ └── scenes │ └── Game.js ├── .gitignore ├── .babelrc ├── index.html ├── README.md ├── LICENSE ├── package.json └── webpack ├── config.js └── config.prod.js /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/public/favicon.png -------------------------------------------------------------------------------- /sprites/cityscene/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/button.png -------------------------------------------------------------------------------- /sprites/cityscene/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/background.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0001.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0002.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0003.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0004.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0005.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0006.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0007.png -------------------------------------------------------------------------------- /sprites/cityscene/capguy/walk/0008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/sprites/cityscene/capguy/walk/0008.png -------------------------------------------------------------------------------- /public/assets/spritesheets/cityscene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeAndWeb/phaser-sprite-sheet-example/HEAD/public/assets/spritesheets/cityscene.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import StartGame from './game/main'; 2 | 3 | document.addEventListener('DOMContentLoaded', () => { 4 | 5 | StartGame('game-container'); 6 | 7 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # System and IDE files 2 | Thumbs.db 3 | .DS_Store 4 | .idea 5 | *.suo 6 | *.sublime-project 7 | *.sublime-workspace 8 | *.vscode 9 | 10 | # Vendors 11 | node_modules/ 12 | 13 | # Build 14 | dist/ 15 | /npm-debug.log 16 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/env", { 4 | "targets": { 5 | "browsers": [ 6 | ">0.25%", 7 | "not ie 11", 8 | "not op_mini all" 9 | ] 10 | }, 11 | "modules": false 12 | }] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | color: rgba(255, 255, 255, 0.87); 5 | background-color: #000000; 6 | } 7 | 8 | #app { 9 | width: 100%; 10 | height: 100vh; 11 | overflow: hidden; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Phaser sprite sheet example 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/game/main.js: -------------------------------------------------------------------------------- 1 | import { Game as MainGame } from './scenes/Game'; 2 | import { AUTO, Scale,Game } from 'phaser'; 3 | 4 | // Find out more information about the Game Config at: 5 | // https://docs.phaser.io/api-documentation/typedef/types-core#gameconfig 6 | const config = { 7 | type: AUTO, 8 | width: 800, 9 | height: 600, 10 | parent: 'game-container', 11 | backgroundColor: '#028af8', 12 | // scale: { 13 | // mode: Scale.FIT, 14 | // autoCenter: Scale.CENTER_BOTH 15 | // }, 16 | scene: [ 17 | MainGame 18 | ] 19 | }; 20 | 21 | const StartGame = (parent) => { 22 | return new Game({ ...config, parent }); 23 | } 24 | 25 | export default StartGame; 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Phaser sprite sheet optimization tutorial 2 | ========================================= 3 | 4 | The complete tutorial is available from here: [Creating sprite sheets for Phaser with TexturePacker](https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser) 5 | 6 | Content: 7 | 8 | - Creating sprite sheets with TexturePacker 9 | - Loading sprite sheets in Phaser (version 3 or newer) 10 | - Setting pivot points with TexturePacker 11 | - Playing animations from the sprite sheet 12 | - Optimizing start up time and reducing download size 13 | 14 | How to run the example: 15 | 16 | git clone https://github.com/CodeAndWeb/phaser-sprite-sheet-example.git 17 | cd phaser-sprite-sheet-example 18 | npm install 19 | npm run dev 20 | 21 | The demo runs at [http://localhost:8080](http://localhost:8080) 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | License for images and sprites 2 | ------------------------------ 3 | 4 | The images and sprites contained in this project are copyright (c) by CodeAndWeb GmbH and 5 | must not be used outside of the demo project. 6 | 7 | License for source code 8 | ----------------------- 9 | 10 | The MIT License (MIT) 11 | 12 | Copyright (c) 2025 CodeAndWeb GmbH 13 | 14 | Permission is hereby granted, free of charge, to any person obtaining a copy of 15 | this software and associated documentation files (the "Software"), to deal in 16 | the Software without restriction, including without limitation the rights to 17 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 18 | the Software, and to permit persons to whom the Software is furnished to do so, 19 | subject to the following conditions: 20 | 21 | The above copyright notice and this permission notice shall be included in all 22 | copies or substantial portions of the Software. 23 | 24 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 25 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 26 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 27 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 28 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 29 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 30 | -------------------------------------------------------------------------------- /src/game/scenes/Game.js: -------------------------------------------------------------------------------- 1 | import { Scene } from 'phaser'; 2 | 3 | export class Game extends Scene 4 | { 5 | constructor () 6 | { 7 | super('Game'); 8 | } 9 | 10 | preload () 11 | { 12 | this.load.multiatlas('cityscene', 13 | 'assets/spritesheets/cityscene.json', 14 | 'assets/spritesheets'); 15 | } 16 | 17 | create () 18 | { 19 | // background 20 | this.add.sprite(0, 0, 'cityscene', 'background.png'); 21 | 22 | // sprite 23 | this.capguy = this.add.sprite(0, 400, 'cityscene', 'capguy/walk/0001.png'); 24 | this.capguy.setScale(0.5, 0.5); 25 | 26 | // animation 27 | const frameNames = this.anims.generateFrameNames('cityscene', { 28 | start: 1, end: 8, zeroPad: 4, 29 | prefix: 'capguy/walk/', suffix: '.png' 30 | }); 31 | this.anims.create({ key: 'walk', frames: frameNames, frameRate: 10, repeat: -1 }); 32 | this.capguy.anims.play('walk'); 33 | 34 | // 9-slice objects 35 | this.add.nineslice(75, 50, 'cityscene', 'button.png', 100, 50); 36 | this.add.nineslice(250, 50, 'cityscene', 'button.png', 200, 50); 37 | } 38 | 39 | update(time, delta) 40 | { 41 | this.capguy.x += delta/10; 42 | if (this.capguy.x > 850) 43 | { 44 | this.capguy.x = -50; 45 | } 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-sprite-sheet-example", 3 | "version": "1.2.0", 4 | "description": "Small example showing how to use TexturePacker with Phaser", 5 | "main": "src/main.js", 6 | "scripts": { 7 | "dev": "node log.js dev & webpack-dev-server --config webpack/config.js --open", 8 | "build": "node log.js build & webpack --config webpack/config.prod.js", 9 | "dev-nolog": "webpack-dev-server --config webpack/config.js --open", 10 | "build-nolog": "webpack --config webpack/config.prod.js" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/CodeAndWeb/phaser-sprite-sheet-example.git" 15 | }, 16 | "author": "Joachim Grill", 17 | "license": "see LICENSE file", 18 | "bugs": { 19 | "url": "https://github.com/CodeAndWeb/phaser-sprite-sheet-example/issues" 20 | }, 21 | "homepage": "https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser", 22 | "devDependencies": { 23 | "@babel/core": "^7.26.10", 24 | "@babel/preset-env": "^7.26.9", 25 | "babel-loader": "^10.0.0", 26 | "clean-webpack-plugin": "^4.0.0", 27 | "copy-webpack-plugin": "^13.0.0", 28 | "file-loader": "^6.2.0", 29 | "html-webpack-plugin": "^5.6.3", 30 | "raw-loader": "^4.0.2", 31 | "terser-webpack-plugin": "^5.3.14", 32 | "webpack": "^5.99.6", 33 | "webpack-cli": "^6.0.1", 34 | "webpack-dev-server": "^5.2.1", 35 | "webpack-merge": "^6.0.0" 36 | }, 37 | "dependencies": { 38 | "phaser": "^3.90.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /webpack/config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const path = require("path"); 4 | const webpack = require("webpack"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | devtool: "eval-source-map", 9 | entry: "./src/main.js", 10 | output: { 11 | path: path.resolve(process.cwd(), 'dist'), 12 | filename: "bundle.min.js" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.js$/, 18 | exclude: /node_modules/, 19 | use: { 20 | loader: "babel-loader" 21 | } 22 | }, 23 | { 24 | test: [/\.vert$/, /\.frag$/], 25 | use: "raw-loader" 26 | }, 27 | { 28 | test: /\.(gif|png|jpe?g|svg|xml|glsl)$/i, 29 | use: "file-loader" 30 | } 31 | ] 32 | }, 33 | plugins: [ 34 | new CleanWebpackPlugin({ 35 | cleanOnceBeforeBuildPatterns: [path.join(__dirname, "dist/**/*")] 36 | }), 37 | new webpack.DefinePlugin({ 38 | "typeof CANVAS_RENDERER": JSON.stringify(true), 39 | "typeof WEBGL_RENDERER": JSON.stringify(true), 40 | "typeof WEBGL_DEBUG": JSON.stringify(true), 41 | "typeof EXPERIMENTAL": JSON.stringify(true), 42 | "typeof PLUGIN_3D": JSON.stringify(false), 43 | "typeof PLUGIN_CAMERA3D": JSON.stringify(false), 44 | "typeof PLUGIN_FBINSTANT": JSON.stringify(false), 45 | "typeof FEATURE_SOUND": JSON.stringify(true) 46 | }), 47 | new HtmlWebpackPlugin({ 48 | template: "./index.html" 49 | }) 50 | ] 51 | }; 52 | -------------------------------------------------------------------------------- /webpack/config.prod.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const CopyPlugin = require('copy-webpack-plugin'); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | const path = require("path"); 5 | const TerserPlugin = require("terser-webpack-plugin"); 6 | const webpack = require("webpack"); 7 | 8 | const line = "---------------------------------------------------------"; 9 | const msg = `❤️❤️❤️ Tell us about your game! - games@phaser.io ❤️❤️❤️`; 10 | process.stdout.write(`${line}\n${msg}\n${line}\n`); 11 | 12 | module.exports = { 13 | mode: "production", 14 | entry: "./src/main.js", 15 | output: { 16 | path: path.resolve(process.cwd(), 'dist'), 17 | filename: "./bundle.min.js" 18 | }, 19 | devtool: false, 20 | performance: { 21 | maxEntrypointSize: 2500000, 22 | maxAssetSize: 1200000 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.js$/, 28 | exclude: /node_modules/, 29 | use: { 30 | loader: "babel-loader" 31 | } 32 | }, 33 | { 34 | test: [/\.vert$/, /\.frag$/], 35 | use: "raw-loader" 36 | }, 37 | { 38 | test: /\.(gif|png|jpe?g|svg|xml|glsl)$/i, 39 | use: "file-loader" 40 | } 41 | ] 42 | }, 43 | optimization: { 44 | minimizer: [ 45 | new TerserPlugin({ 46 | terserOptions: { 47 | output: { 48 | comments: false 49 | } 50 | } 51 | }) 52 | ] 53 | }, 54 | plugins: [ 55 | new CleanWebpackPlugin(), 56 | new webpack.DefinePlugin({ 57 | "typeof CANVAS_RENDERER": JSON.stringify(true), 58 | "typeof WEBGL_RENDERER": JSON.stringify(true), 59 | "typeof WEBGL_DEBUG": JSON.stringify(false), 60 | "typeof EXPERIMENTAL": JSON.stringify(false), 61 | "typeof PLUGIN_3D": JSON.stringify(false), 62 | "typeof PLUGIN_CAMERA3D": JSON.stringify(false), 63 | "typeof PLUGIN_FBINSTANT": JSON.stringify(false), 64 | "typeof FEATURE_SOUND": JSON.stringify(true) 65 | }), 66 | new HtmlWebpackPlugin({ 67 | template: "./index.html" 68 | }), 69 | new CopyPlugin({ 70 | patterns: [ 71 | { from: 'public/assets', to: 'assets' }, 72 | { from: 'public/favicon.png', to: 'favicon.png' }, 73 | { from: 'public/style.css', to: 'style.css' } 74 | ], 75 | }), 76 | ] 77 | }; 78 | -------------------------------------------------------------------------------- /public/assets/spritesheets/cityscene.json: -------------------------------------------------------------------------------- 1 | { 2 | "textures": [ 3 | { 4 | "image": "cityscene.png", 5 | "format": "RGBA8888", 6 | "size": { 7 | "w": 943, 8 | "h": 959 9 | }, 10 | "scale": 1, 11 | "frames": [ 12 | { 13 | "filename": "background.png", 14 | "rotated": false, 15 | "trimmed": false, 16 | "sourceSize": { 17 | "w": 800, 18 | "h": 600 19 | }, 20 | "spriteSourceSize": { 21 | "x": 0, 22 | "y": 0, 23 | "w": 800, 24 | "h": 600 25 | }, 26 | "frame": { 27 | "x": 1, 28 | "y": 1, 29 | "w": 800, 30 | "h": 600 31 | }, 32 | "anchor": { 33 | "x": 0, 34 | "y": 0 35 | } 36 | }, 37 | { 38 | "filename": "capguy/walk/0005.png", 39 | "rotated": false, 40 | "trimmed": true, 41 | "sourceSize": { 42 | "w": 187, 43 | "h": 324 44 | }, 45 | "spriteSourceSize": { 46 | "x": 33, 47 | "y": 3, 48 | "w": 139, 49 | "h": 311 50 | }, 51 | "frame": { 52 | "x": 803, 53 | "y": 1, 54 | "w": 139, 55 | "h": 311 56 | }, 57 | "anchor": { 58 | "x": 0.5, 59 | "y": 0.5 60 | } 61 | }, 62 | { 63 | "filename": "capguy/walk/0006.png", 64 | "rotated": false, 65 | "trimmed": true, 66 | "sourceSize": { 67 | "w": 187, 68 | "h": 324 69 | }, 70 | "spriteSourceSize": { 71 | "x": 29, 72 | "y": 8, 73 | "w": 135, 74 | "h": 311 75 | }, 76 | "frame": { 77 | "x": 803, 78 | "y": 314, 79 | "w": 135, 80 | "h": 311 81 | }, 82 | "anchor": { 83 | "x": 0.5, 84 | "y": 0.5 85 | } 86 | }, 87 | { 88 | "filename": "capguy/walk/0008.png", 89 | "rotated": false, 90 | "trimmed": true, 91 | "sourceSize": { 92 | "w": 187, 93 | "h": 324 94 | }, 95 | "spriteSourceSize": { 96 | "x": 22, 97 | "y": 1, 98 | "w": 161, 99 | "h": 319 100 | }, 101 | "frame": { 102 | "x": 1, 103 | "y": 627, 104 | "w": 161, 105 | "h": 319 106 | }, 107 | "anchor": { 108 | "x": 0.5, 109 | "y": 0.5 110 | } 111 | }, 112 | { 113 | "filename": "capguy/walk/0001.png", 114 | "rotated": false, 115 | "trimmed": true, 116 | "sourceSize": { 117 | "w": 187, 118 | "h": 324 119 | }, 120 | "spriteSourceSize": { 121 | "x": 15, 122 | "y": 3, 123 | "w": 158, 124 | "h": 316 125 | }, 126 | "frame": { 127 | "x": 164, 128 | "y": 627, 129 | "w": 158, 130 | "h": 316 131 | }, 132 | "anchor": { 133 | "x": 0.5, 134 | "y": 0.5 135 | } 136 | }, 137 | { 138 | "filename": "capguy/walk/0007.png", 139 | "rotated": false, 140 | "trimmed": true, 141 | "sourceSize": { 142 | "w": 187, 143 | "h": 324 144 | }, 145 | "spriteSourceSize": { 146 | "x": 32, 147 | "y": 2, 148 | "w": 146, 149 | "h": 314 150 | }, 151 | "frame": { 152 | "x": 324, 153 | "y": 627, 154 | "w": 146, 155 | "h": 314 156 | }, 157 | "anchor": { 158 | "x": 0.5, 159 | "y": 0.5 160 | } 161 | }, 162 | { 163 | "filename": "capguy/walk/0003.png", 164 | "rotated": false, 165 | "trimmed": true, 166 | "sourceSize": { 167 | "w": 187, 168 | "h": 324 169 | }, 170 | "spriteSourceSize": { 171 | "x": 26, 172 | "y": 2, 173 | "w": 152, 174 | "h": 307 175 | }, 176 | "frame": { 177 | "x": 472, 178 | "y": 627, 179 | "w": 152, 180 | "h": 307 181 | }, 182 | "anchor": { 183 | "x": 0.5, 184 | "y": 0.5 185 | } 186 | }, 187 | { 188 | "filename": "capguy/walk/0002.png", 189 | "rotated": false, 190 | "trimmed": true, 191 | "sourceSize": { 192 | "w": 187, 193 | "h": 324 194 | }, 195 | "spriteSourceSize": { 196 | "x": 0, 197 | "y": 8, 198 | "w": 168, 199 | "h": 303 200 | }, 201 | "frame": { 202 | "x": 626, 203 | "y": 603, 204 | "w": 168, 205 | "h": 303 206 | }, 207 | "anchor": { 208 | "x": 0.5, 209 | "y": 0.5 210 | } 211 | }, 212 | { 213 | "filename": "button.png", 214 | "rotated": false, 215 | "trimmed": false, 216 | "sourceSize": { 217 | "w": 100, 218 | "h": 50 219 | }, 220 | "spriteSourceSize": { 221 | "x": 0, 222 | "y": 0, 223 | "w": 100, 224 | "h": 50 225 | }, 226 | "frame": { 227 | "x": 626, 228 | "y": 908, 229 | "w": 100, 230 | "h": 50 231 | }, 232 | "anchor": { 233 | "x": 0.5, 234 | "y": 0.5 235 | }, 236 | "scale9Borders": { 237 | "x": 16, 238 | "y": 14, 239 | "w": 69, 240 | "h": 22 241 | } 242 | }, 243 | { 244 | "filename": "capguy/walk/0004.png", 245 | "rotated": false, 246 | "trimmed": true, 247 | "sourceSize": { 248 | "w": 187, 249 | "h": 324 250 | }, 251 | "spriteSourceSize": { 252 | "x": 42, 253 | "y": 1, 254 | "w": 141, 255 | "h": 306 256 | }, 257 | "frame": { 258 | "x": 796, 259 | "y": 627, 260 | "w": 141, 261 | "h": 306 262 | }, 263 | "anchor": { 264 | "x": 0.5, 265 | "y": 0.5 266 | } 267 | } 268 | ] 269 | } 270 | ], 271 | "meta": { 272 | "app": "https://www.codeandweb.com/texturepacker", 273 | "version": "3.0", 274 | "smartupdate": "$TexturePacker:SmartUpdate:f3b9ccbdfd5d7410c658f4e27fc19fda:a7b557a8b17d317efb009c64cc7cd6e2:292542e6853f316339413b9243f95b10$" 275 | } 276 | } 277 | -------------------------------------------------------------------------------- /sprites/cityscene.tps: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fileFormatVersion 5 | 6 6 | texturePackerVersion 7 | 7.9.0 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 | phaser 36 | textureFileName 37 | 38 | flipPVR 39 | 40 | pvrQualityLevel 41 | 3 42 | astcQualityLevel 43 | 2 44 | basisUniversalQualityLevel 45 | 2 46 | etc1QualityLevel 47 | 70 48 | etc2QualityLevel 49 | 70 50 | dxtCompressionMode 51 | DXT_PERCEPTUAL 52 | ditherType 53 | PngQuantHigh 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 | json 125 | 126 | name 127 | ../public/assets/spritesheets/cityscene.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.5,0.5 171 | writePivotPoints 172 | 173 | 174 | individualSpriteSettings 175 | 176 | cityscene/background.png 177 | 178 | pivotPoint 179 | 0,0 180 | spriteScale 181 | 1 182 | scale9Enabled 183 | 184 | scale9Borders 185 | 200,150,400,300 186 | scale9Paddings 187 | 200,150,400,300 188 | scale9FromFile 189 | 190 | 191 | cityscene/button.png 192 | 193 | pivotPoint 194 | 0.5,0.5 195 | spriteScale 196 | 1 197 | scale9Enabled 198 | 199 | scale9Borders 200 | 16,14,69,22 201 | scale9Paddings 202 | 25,13,50,25 203 | scale9FromFile 204 | 205 | 206 | cityscene/capguy/walk/0001.png 207 | cityscene/capguy/walk/0002.png 208 | cityscene/capguy/walk/0003.png 209 | cityscene/capguy/walk/0004.png 210 | cityscene/capguy/walk/0005.png 211 | cityscene/capguy/walk/0006.png 212 | cityscene/capguy/walk/0007.png 213 | cityscene/capguy/walk/0008.png 214 | 215 | pivotPoint 216 | 0.5,0.5 217 | spriteScale 218 | 1 219 | scale9Enabled 220 | 221 | scale9Borders 222 | 47,81,93,162 223 | scale9Paddings 224 | 47,81,93,162 225 | scale9FromFile 226 | 227 | 228 | 229 | fileLists 230 | 231 | default 232 | 233 | files 234 | 235 | cityscene 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 | --------------------------------------------------------------------------------