├── .gitmodules ├── README.md ├── chapter01 ├── 01_helloWorld.html ├── 02_displayingTheCanvas.html ├── 03_displayingSprites.html ├── 04_monitorLoadProgress.html ├── 05_positionAndRotation.html ├── 06_spriteFromTileset.html ├── 07_spriteFromTextureAtlas.html ├── es5 │ ├── displayingSprites.js │ ├── displayingSprites.js.map │ ├── displayingTheCanvas.js │ ├── displayingTheCanvas.js.map │ ├── monitorLoadProgress.js │ ├── monitorLoadProgress.js.map │ ├── positionAndRotation.js │ ├── positionAndRotation.js.map │ ├── spriteFromTextureAtlas.js │ ├── spriteFromTextureAtlas.js.map │ ├── spriteFromTileset.js │ └── spriteFromTileset.js.map ├── es6 │ ├── displayingSprites.js │ ├── displayingTheCanvas.js │ ├── monitorLoadProgress.js │ ├── positionAndRotation.js │ ├── spriteFromTextureAtlas.js │ └── spriteFromTileset.js └── images │ ├── animals.png │ ├── blob.png │ ├── cat64x64.png │ ├── door.png │ ├── dungeon.png │ ├── explorer.png │ ├── pixie.png │ ├── pixie768x512.png │ ├── pixie96x48.png │ ├── tileset.png │ ├── treasure.png │ ├── treasureHunter.json │ ├── treasureHunter.png │ └── treasureHunter.tps ├── chapter02 ├── .04_keyboardMovement.html.swp ├── .07_ticker.html.swp ├── 01_gameLoop.html ├── 02_velocity.html ├── 03_gameStates.html ├── 04_keyboardMovement.html ├── 05_physics.html ├── 06_containingMovement.html ├── es5 │ ├── containingMovement.js │ ├── containingMovement.js.map │ ├── gameLoop.js │ ├── gameLoop.js.map │ ├── gameStates.js │ ├── gameStates.js.map │ ├── keyboardMovement.js │ ├── keyboardMovement.js.map │ ├── physics.js │ ├── physics.js.map │ ├── ticker.js │ ├── ticker.js.map │ ├── velocity.js │ └── velocity.js.map ├── es6 │ ├── .containingMovement.js.swp │ ├── .gameStates.js.swp │ ├── .keyboardMovement.js.swn │ ├── .keyboardMovement.js.swo │ ├── .keyboardMovement.js.swp │ ├── .ticker.js.swp │ ├── containingMovement.js │ ├── gameLoop.js │ ├── gameStates.js │ ├── keyboardMovement.js │ ├── physics.js │ └── velocity.js └── images │ ├── cat64x64.png │ └── pixie96x48.png ├── chapter03 ├── .bitmapText.html.swp ├── .shapes.html.swp ├── 01_shapes.html ├── 02_singleGraphicsContext.html ├── 03_animatingGraphics.html ├── 04_text.html ├── 05_bitmapText.html ├── 06_groupingSprites.html ├── es5 │ ├── animatingGraphics.js │ ├── animatingGraphics.js.map │ ├── bitmapText.js │ ├── bitmapText.js.map │ ├── groupingSprites.js │ ├── groupingSprites.js.map │ ├── shapes.js │ ├── shapes.js.map │ ├── singleGraphicsContext.js │ ├── singleGraphicsContext.js.map │ ├── text.js │ └── text.js.map ├── es6 │ ├── .animatingGraphics.js.swp │ ├── .bitmapText.js.swp │ ├── .groupingSprites.js.swo │ ├── .groupingSprites.js.swp │ ├── .shapes.js.swo │ ├── .shapes.js.swp │ ├── animatingGraphics.js │ ├── bitmapText.js │ ├── groupingSprites.js │ ├── shapes.js │ ├── singleGraphicsContext.js │ └── text.js ├── fonts │ ├── PetMe.ttf │ ├── SpicyRice.ttf │ ├── disko.png │ ├── disko.xml │ └── puzzler.otf └── images │ ├── animals.json │ ├── animals.png │ ├── animals.tps │ ├── cat.png │ ├── hedgehog.png │ └── tiger.png ├── chapter04 ├── .02_treasureHunter.html.swp ├── 01_rectangleCollision.html ├── 02_treasureHunter.html ├── es5 │ ├── rectangleCollision.js │ ├── rectangleCollision.js.map │ ├── treasureHunter.js │ └── treasureHunter.js.map ├── es6 │ ├── rectangleCollision.js │ └── treasureHunter.js ├── fonts │ ├── PetMe.ttf │ ├── SpicyRice.ttf │ ├── disko.png │ ├── disko.xml │ └── puzzler.otf └── images │ ├── animals.png │ ├── blob.png │ ├── box64x64.png │ ├── cat64x64.png │ ├── door.png │ ├── dungeon.png │ ├── explorer.png │ ├── pixie.png │ ├── pixie768x512.png │ ├── pixie96x48.png │ ├── tileset.png │ ├── treasure.png │ ├── treasureHunter.json │ ├── treasureHunter.png │ └── treasureHunter.tps ├── chapter05 ├── .01_fromTextures.html.swp ├── .03_tilesetFilmstrip.html.swn ├── .04_statePlayer.html.swm ├── .04_statePlayer.html.swn ├── 01_fromTextures.html ├── 02_fromFrames.html ├── 03_tilesetFilmstrip.html ├── 04_statePlayer.html ├── 05_treasureHunter2.html ├── 06_particles.html ├── 07_particleEmitter.html ├── es5 │ ├── fromFrames.js │ ├── fromFrames.js.map │ ├── fromTextures.js │ ├── fromTextures.js.map │ ├── particleEmitter.js │ ├── particleEmitter.js.map │ ├── particles.js │ ├── particles.js.map │ ├── rectangleCollision.js │ ├── rectangleCollision.js.map │ ├── statePlayer.js │ ├── statePlayer.js.map │ ├── tilesetFilmstrip.js │ ├── tilesetFilmstrip.js.map │ ├── treasureHunter.js │ ├── treasureHunter.js.map │ ├── treasureHunter2.js │ └── treasureHunter2.js.map ├── es6 │ ├── .fromTextures.js.swp │ ├── .tilesetFilmstrip.js.swn │ ├── fromFrames.js │ ├── fromTextures.js │ ├── particleEmitter.js │ ├── particles.js │ ├── rectangleCollision.js │ ├── statePlayer.js │ ├── tilesetFilmstrip.js │ └── treasureHunter2.js └── images │ ├── adventuress.png │ ├── pixie0.png │ ├── pixie1.png │ ├── pixie2.png │ ├── pixieAtlas.json │ ├── pixieAtlas.png │ ├── pixieAtlas.tps │ ├── pixieFrames.png │ ├── star.png │ ├── tileset.png │ ├── treasureHunter.json │ └── treasureHunter.png ├── chapter06 ├── 01_tilingSprites.html ├── 02_scrolling.html ├── 03_generateTexture.html ├── 04_renderTexture.html ├── 05_tinting.html ├── 06_masking.html ├── 07_blendModes.html ├── 08_filters.html ├── 09_rope.html ├── 10_tweening.html ├── 11_sceneTransitions.html ├── 12_motionPaths.html ├── es5 │ ├── blendModes.js │ ├── blendModes.js.map │ ├── filters.js │ ├── filters.js.map │ ├── generateTexture.js │ ├── generateTexture.js.map │ ├── masking.js │ ├── masking.js.map │ ├── motionPaths.js │ ├── motionPaths.js.map │ ├── renderTexture.js │ ├── renderTexture.js.map │ ├── rope.js │ ├── rope.js.map │ ├── sceneTransitions.js │ ├── sceneTransitions.js.map │ ├── scrolling.js │ ├── scrolling.js.map │ ├── tilingSprites.js │ ├── tilingSprites.js.map │ ├── tinting.js │ ├── tinting.js.map │ ├── tweening.js │ ├── tweening.js.map │ ├── video.js │ └── video.js.map ├── es6 │ ├── .motionPaths.js.swn │ ├── blendModes.js │ ├── filters.js │ ├── generateTexture.js │ ├── masking.js │ ├── motionPaths.js │ ├── renderTexture.js │ ├── rope.js │ ├── sceneTransitions.js │ ├── scrolling.js │ ├── tilingSprites.js │ ├── tinting.js │ └── tweening.js ├── fonts │ └── puzzler.otf └── images │ ├── animals.json │ ├── animals.png │ ├── clouds.png │ ├── pixie96x48.png │ ├── snake.png │ └── tile.png ├── chapter07 ├── 01_pointer.html ├── 02_spriteInteractivity.html ├── 03_dragAndDrop.html ├── 04_button.html ├── 05_interactiveSprite.html ├── 06_pixiePerilousness.html ├── es5 │ ├── button.js │ ├── button.js.map │ ├── dragAndDrop.js │ ├── dragAndDrop.js.map │ ├── ineractiveSprite.js │ ├── ineractiveSprite.js.map │ ├── interactiveSprite.js │ ├── interactiveSprite.js.map │ ├── pixiePerilousness.js │ ├── pixiePerilousness.js.map │ ├── pointer.js │ ├── pointer.js.map │ ├── spriteInteractivity.js │ └── spriteInteractivity.js.map ├── es6 │ ├── button.js │ ├── dragAndDrop.js │ ├── interactiveSprite.js │ ├── pixiePerilousness.js │ ├── pointer.js │ └── spriteInteractivity.js ├── images │ ├── 0.png │ ├── 1.png │ ├── 2.png │ ├── animals.json │ ├── animals.png │ ├── button.json │ ├── button.png │ ├── clouds.png │ ├── down.png │ ├── finish.png │ ├── green.png │ ├── greenBlock.png │ ├── over.png │ ├── pink.png │ ├── pixiePerilousness.json │ ├── pixiePerilousness.png │ ├── pixiePerilousness.tps │ ├── star.png │ ├── up.png │ ├── violet.png │ └── yellow.png └── texturePackerFiles │ ├── animals.tps │ └── button.tps └── learnPixiJS.zip /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "library/charm"] 2 | path = library/charm 3 | url = https://github.com/kittykatattack/charm 4 | [submodule "library/spriteUtilities"] 5 | path = library/spriteUtilities 6 | url = https://github.com/kittykatattack/spriteUtilities 7 | [submodule "library/keyboard"] 8 | path = library/keyboard 9 | url = https://github.com/kittykatattack/keyboard 10 | [submodule "library/scaleToWindow"] 11 | path = library/scaleToWindow 12 | url = https://github.com/kittykatattack/scaleToWindow 13 | [submodule "library/hitTestRectangle"] 14 | path = library/hitTestRectangle 15 | url = https://github.com/kittykatattack/hitTestRectangle 16 | [submodule "library/plugins/pixi.js"] 17 | path = library/plugins/pixi.js 18 | url = https://github.com/pixijs/pixi.js 19 | [submodule "library/tink"] 20 | path = library/tink 21 | url = https://github.com/kittykatattack/tink 22 | [submodule "library/bump"] 23 | path = library/bump 24 | url = git@github.com:kittykatattack/bump.git 25 | 26 | [submodule "library/contain"] 27 | path = library/contain 28 | url = https://github.com/kittykatattack/contain 29 | [submodule "library/dust"] 30 | path = library/dust 31 | url = git@github.com:kittykatattack/dust.git 32 | -------------------------------------------------------------------------------- /chapter01/01_helloWorld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Hello world 4 | 5 | 6 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter01/02_displayingTheCanvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Displaying the canvas 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter01/03_displayingSprites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Displaying sprites 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter01/04_monitorLoadProgress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Monitor load progress 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter01/05_positionAndRotation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Position and rotation 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter01/06_spriteFromTileset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Sprite from tileset 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter01/07_spriteFromTextureAtlas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Sprite from texture atlas 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter01/es5/displayingSprites.js: -------------------------------------------------------------------------------- 1 | //Create the stage and renderer 2 | "use strict"; 3 | 4 | var stage = new PIXI.Container(), 5 | renderer = PIXI.autoDetectRenderer(256, 256); 6 | document.body.appendChild(renderer.view); 7 | 8 | //Use Pixi's built-in `loader` object to load an image 9 | PIXI.loader.add("images/pixie96x48.png").load(setup); 10 | 11 | //This `setup` function will run when the image has loaded 12 | function setup() { 13 | 14 | //Create the sprite from the texture 15 | var pixie = new PIXI.Sprite(PIXI.loader.resources["images/pixie96x48.png"].texture); 16 | 17 | //Add the sprite to the stage 18 | stage.addChild(pixie); 19 | 20 | //Render the stage 21 | renderer.render(stage); 22 | } 23 | 24 | //You can alternatively use aliases to stand for Pixi objects and 25 | //methods. Here's what the code above looks like using aliases: 26 | /* 27 | //Create the aliases 28 | let Container = PIXI.Container, 29 | autoDetectRenderer = PIXI.autoDetectRenderer, 30 | loader = PIXI.loader, 31 | resources = PIXI.loader.resources, 32 | Sprite = PIXI.Sprite; 33 | 34 | //Create the stage and renderer 35 | let stage = new Container(), 36 | renderer = autoDetectRenderer(256, 256); 37 | document.body.appendChild(renderer.view); 38 | 39 | //Use Pixi's built-in `loader` object to load an image 40 | loader 41 | .add("images/pixie96x48.png") 42 | .load(setup); 43 | 44 | //This `setup` function will run when the image has loaded 45 | function setup() { 46 | 47 | //Create the sprite from the texture 48 | let pixie = new PIXI.Sprite(resources["images/pixie96x48.png"].texture); 49 | 50 | //Add the sprite to the stage 51 | stage.addChild(pixie); 52 | 53 | //Render the stage 54 | renderer.render(stage); 55 | } 56 | */ 57 | //# sourceMappingURL=displayingSprites.js.map -------------------------------------------------------------------------------- /chapter01/es5/displayingSprites.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/displayingSprites.js"],"names":[],"mappings":";;;AACA,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE;IAC5B,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,IAAI,CAAC,MAAM,CACR,GAAG,CAAC,uBAAuB,CAAC,CAC5B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,SAAS,KAAK,GAAG;;;AAGf,MAAI,KAAK,GAAG,IAAI,IAAI,CAAC,MAAM,CACzB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC,OAAO,CACvD,CAAC;;;AAGF,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;;AAGtB,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","file":"displayingSprites.js","sourcesContent":["//Create the stage and renderer\nlet stage = new PIXI.Container(),\n renderer = PIXI.autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Use Pixi's built-in `loader` object to load an image\nPIXI.loader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//This `setup` function will run when the image has loaded\nfunction setup() {\n\n //Create the sprite from the texture\n let pixie = new PIXI.Sprite(\n PIXI.loader.resources[\"images/pixie96x48.png\"].texture\n );\n\n //Add the sprite to the stage\n stage.addChild(pixie);\n \n //Render the stage \n renderer.render(stage);\n}\n\n//You can alternatively use aliases to stand for Pixi objects and\n//methods. Here's what the code above looks like using aliases:\n/*\n//Create the aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n resources = PIXI.loader.resources,\n Sprite = PIXI.Sprite;\n\n//Create the stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Use Pixi's built-in `loader` object to load an image\nloader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//This `setup` function will run when the image has loaded\nfunction setup() {\n\n //Create the sprite from the texture\n let pixie = new PIXI.Sprite(resources[\"images/pixie96x48.png\"].texture);\n\n //Add the sprite to the stage\n stage.addChild(pixie);\n \n //Render the stage \n renderer.render(stage);\n}\n*/\n\n"]} -------------------------------------------------------------------------------- /chapter01/es5/displayingTheCanvas.js: -------------------------------------------------------------------------------- 1 | //Create the renderer 2 | "use strict"; 3 | 4 | var renderer = PIXI.autoDetectRenderer(144, 256); 5 | 6 | /* You can also create a renderer with more advanced options like this: 7 | //Create a Pixi renderer 8 | let renderer = PIXI.autoDetectRenderer( 9 | 256, //Width 10 | 256, //Height 11 | { //Options 12 | antialiasing: false, 13 | transparent: false, 14 | resolution: 1 15 | }, 16 | false //Optionally force canvas rendering 17 | ); 18 | 19 | //Force canvas rendering like this: 20 | //let renderer = new PIXI.CanvasRenderer(256, 256); 21 | 22 | //Force WebGL rendering like this: 23 | //let renderer = new PIXI.WebGLRenderer(256, 256); 24 | */ 25 | 26 | //Add the canvas to the HTML document 27 | document.body.appendChild(renderer.view); 28 | 29 | //Create a container object called the `stage`. The `stage` is the 30 | //root container for all your objects 31 | var stage = new PIXI.Container(); 32 | 33 | //The `renderer.view` is just an ordinary `` element. 34 | //Here's how you can reference to add an optional dashed 35 | //border around the canvas 36 | renderer.view.style.border = "1px dashed black"; 37 | 38 | //To resize the canvas 39 | //renderer.resize(512, 512); 40 | 41 | //To change the background color 42 | renderer.backgroundColor = 16777215; 43 | 44 | //If you want to make the canvas fill the entire window, you can apply this 45 | //CSS styling: 46 | /* 47 | renderer.view.style.position = "absolute" 48 | renderer.view.style.width = window.innerWidth + "px"; 49 | renderer.view.style.height = window.innerHeight + "px"; 50 | renderer.view.style.display = "block"; 51 | */ 52 | 53 | //Tell the renderer to render the stage 54 | renderer.render(stage); 55 | 56 | //Use the custom `scaleToWindow` function to scale and align Pixi's 57 | //canvas to the maximum browser window size. 58 | var scale = scaleToWindow(renderer.view); 59 | console.log(scale); 60 | 61 | //# sourceMappingURL=displayingTheCanvas.js.map 62 | //# sourceMappingURL=displayingTheCanvas.js.map -------------------------------------------------------------------------------- /chapter01/es5/displayingTheCanvas.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/displayingTheCanvas.js"],"names":[],"mappings":";;;AACA,IAAI,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAuBjD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;;AAIzC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;;;;;AAKjC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;;;;;;AAMhD,QAAQ,CAAC,eAAe,GAAG,QAAQ,CAAC;;;;;;;;;;;;AAYpC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;AAIvB,IAAI,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACzC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC","file":"displayingTheCanvas.js","sourcesContent":["//Create the renderer\nlet renderer = PIXI.autoDetectRenderer(144, 256);\n\n/* You can also create a renderer with more advanced options like this:\n//Create a Pixi renderer \nlet renderer = PIXI.autoDetectRenderer(\n 256, //Width \n 256, //Height\n { //Options\n antialiasing: false, \n transparent: false, \n resolution: 1\n }, \n false //Optionally force canvas rendering\n);\n\n//Force canvas rendering like this: \n//let renderer = new PIXI.CanvasRenderer(256, 256);\n\n//Force WebGL rendering like this:\n//let renderer = new PIXI.WebGLRenderer(256, 256);\n*/\n\n//Add the canvas to the HTML document\ndocument.body.appendChild(renderer.view);\n\n//Create a container object called the `stage`. The `stage` is the\n//root container for all your objects\nlet stage = new PIXI.Container();\n\n//The `renderer.view` is just an ordinary `` element.\n//Here's how you can reference to add an optional dashed\n//border around the canvas\nrenderer.view.style.border = \"1px dashed black\";\n\n//To resize the canvas\n//renderer.resize(512, 512);\n\n//To change the background color\nrenderer.backgroundColor = 0xFFFFFF;\n\n//If you want to make the canvas fill the entire window, you can apply this\n//CSS styling:\n/*\nrenderer.view.style.position = \"absolute\"\nrenderer.view.style.width = window.innerWidth + \"px\";\nrenderer.view.style.height = window.innerHeight + \"px\";\nrenderer.view.style.display = \"block\";\n*/\n\n//Tell the renderer to render the stage\nrenderer.render(stage);\n\n//Use the custom `scaleToWindow` function to scale and align Pixi's\n//canvas to the maximum browser window size.\nlet scale = scaleToWindow(renderer.view);\nconsole.log(scale);\n\n//# sourceMappingURL=displayingTheCanvas.js.map\n"]} -------------------------------------------------------------------------------- /chapter01/es5/monitorLoadProgress.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | PIXI.loader.add(["images/blob.png", "images/door.png", "images/explorer.png"]).on("progress", loadProgressHandler).load(setup); 4 | 5 | function loadProgressHandler(loader, resource) { 6 | 7 | //Display the file `url` currently being loaded 8 | console.log("loading: " + resource.url); 9 | 10 | //Display the percentage of files currently loaded 11 | console.log("progress: " + loader.progress); 12 | 13 | //If you gave your files names as the first argument 14 | //of the `add` method, you can access them like this 15 | //console.log(`loading: ${resource.name}`); 16 | } 17 | 18 | function setup() { 19 | console.log("All files loaded"); 20 | } 21 | //# sourceMappingURL=monitorLoadProgress.js.map -------------------------------------------------------------------------------- /chapter01/es5/monitorLoadProgress.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/monitorLoadProgress.js"],"names":[],"mappings":";;AAAA,IAAI,CAAC,MAAM,CACR,GAAG,CAAC,CACH,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,CACtB,CAAC,CACD,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CACnC,IAAI,CAAC,KAAK,CAAC,CAAC;;AAEf,SAAS,mBAAmB,CAAC,MAAM,EAAE,QAAQ,EAAE;;;AAG7C,SAAO,CAAC,GAAG,eAAa,QAAQ,CAAC,GAAG,CAAG,CAAC;;;AAGxC,SAAO,CAAC,GAAG,gBAAc,MAAM,CAAC,QAAQ,CAAG,CAAC;;;;;CAK7C;;AAED,SAAS,KAAK,GAAG;AACf,SAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;CACjC","file":"monitorLoadProgress.js","sourcesContent":["PIXI.loader\n .add([\n \"images/blob.png\",\n \"images/door.png\",\n \"images/explorer.png\"\n ])\n .on(\"progress\", loadProgressHandler)\n .load(setup);\n\nfunction loadProgressHandler(loader, resource) {\n\n //Display the file `url` currently being loaded\n console.log(`loading: ${resource.url}`); \n\n //Display the percentage of files currently loaded\n console.log(`progress: ${loader.progress}`); \n\n //If you gave your files names as the first argument \n //of the `add` method, you can access them like this\n //console.log(`loading: ${resource.name}`);\n}\n\nfunction setup() {\n console.log(\"All files loaded\");\n}\n\n"]} -------------------------------------------------------------------------------- /chapter01/es5/positionAndRotation.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | Sprite = PIXI.Sprite; 9 | 10 | //Create a Pixi stage and renderer and add the 11 | //renderer.view to the DOM 12 | var stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load an image and run the `setup` function when it's done 21 | loader.add("images/cat64x64.png").load(setup); 22 | 23 | function setup() { 24 | 25 | //Create the `cat` sprite from the texture 26 | var cat = new Sprite(resources["images/cat64x64.png"].texture); 27 | 28 | //Position the sprite and change its width and height 29 | cat.x = 96; 30 | cat.y = 128; 31 | 32 | //Optionally change the width and height 33 | //cat.width = 80; 34 | //cat.height = 120; 35 | 36 | //Optionally change the sprite's scale 37 | //cat.scale.x = 1.5; 38 | //cat.scale.y = 1.5; 39 | 40 | //Optionally center the sprite's anchor point 41 | //cat.anchor.x = 0.5; 42 | //cat.anchor.y = 0.5; 43 | 44 | //As an alternative to anchor, you can optionally set the cat's pivot point 45 | //cat.pivot.x = 32; 46 | //cat.pivot.y = 32; 47 | 48 | //Rotate the sprite 49 | //cat.rotation = 0.5; 50 | 51 | //You can use this alternative syntax to set the 52 | //sprites anchor point, scale and rotation 53 | /* 54 | cat.anchor.set(0.5, 0.5); 55 | cat.position.set(120, 120); 56 | cat.scale.set(1.5, 3); 57 | */ 58 | 59 | //Add the cat to the stage 60 | stage.addChild(cat); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | //# sourceMappingURL=positionAndRotation.js.map -------------------------------------------------------------------------------- /chapter01/es5/positionAndRotation.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/positionAndRotation.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC1B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;IACjC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;;;;AAIzB,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACvB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC5C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,qBAAqB,CAAC,CAC1B,IAAI,CAAC,KAAK,CAAC,CAAC;;AAEf,SAAS,KAAK,GAAG;;;AAGf,MAAI,GAAG,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC;;;AAG/D,KAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AACX,KAAG,CAAC,CAAC,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BZ,OAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;;;AAGpB,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB","file":"positionAndRotation.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n resources = PIXI.loader.resources,\n Sprite = PIXI.Sprite;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/cat64x64.png\")\n .load(setup);\n\nfunction setup() {\n\n //Create the `cat` sprite from the texture\n let cat = new Sprite(resources[\"images/cat64x64.png\"].texture);\n\n //Position the sprite and change its width and height\n cat.x = 96;\n cat.y = 128;\n\n //Optionally change the width and height\n //cat.width = 80;\n //cat.height = 120;\n\n //Optionally change the sprite's scale\n //cat.scale.x = 1.5;\n //cat.scale.y = 1.5;\n\n //Optionally center the sprite's anchor point\n //cat.anchor.x = 0.5;\n //cat.anchor.y = 0.5;\n \n //As an alternative to anchor, you can optionally set the cat's pivot point\n //cat.pivot.x = 32;\n //cat.pivot.y = 32;\n \n //Rotate the sprite\n //cat.rotation = 0.5;\n\n //You can use this alternative syntax to set the\n //sprites anchor point, scale and rotation\n /*\n cat.anchor.set(0.5, 0.5);\n cat.position.set(120, 120);\n cat.scale.set(1.5, 3);\n */\n\n //Add the cat to the stage\n stage.addChild(cat);\n \n //Render the stage \n renderer.render(stage);\n}\n"]} -------------------------------------------------------------------------------- /chapter01/es5/spriteFromTileset.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Sprite = PIXI.Sprite, 9 | Rectangle = PIXI.Rectangle; 10 | 11 | //Create a Pixi stage and renderer and add the 12 | //renderer.view to the DOM 13 | var stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load an image and run the `setup` function when it's done 22 | loader.add("images/tileset.png").load(setup); 23 | 24 | function setup() { 25 | 26 | //Create the `tileset` sprite from the texture 27 | var texture = TextureCache["images/tileset.png"]; 28 | 29 | //Fix possible texture bleed 30 | texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 31 | 32 | //Create a rectangle object that defines the position and 33 | //size of the sub-image you want to extract from the texture 34 | var rectangle = new Rectangle(160, 256, 32, 32); 35 | 36 | //Tell the texture to use that rectangular section 37 | texture.frame = rectangle; 38 | 39 | //Create the sprite from the texture 40 | var adventuress = new Sprite(texture); 41 | 42 | //Position the sprite on the canvas 43 | adventuress.x = 64; 44 | adventuress.y = 64; 45 | 46 | //Scale the sprite up 47 | adventuress.scale.set(3, 3); 48 | 49 | //Add the sprite to the stage 50 | stage.addChild(adventuress); 51 | 52 | //Render the stage 53 | renderer.render(stage); 54 | } 55 | //# sourceMappingURL=spriteFromTileset.js.map -------------------------------------------------------------------------------- /chapter01/es5/spriteFromTileset.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/spriteFromTileset.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC1B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;;;;AAI/B,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACvB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC5C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,oBAAoB,CAAC,CACzB,IAAI,CAAC,KAAK,CAAC,CAAC;;AAEf,SAAS,KAAK,GAAG;;;AAGf,MAAI,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;;;AAGjD,SAAO,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;;;;AAIzD,MAAI,SAAS,GAAG,IAAI,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;AAGhD,SAAO,CAAC,KAAK,GAAG,SAAS,CAAC;;;AAG1B,MAAI,WAAW,GAAG,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;;;AAGtC,aAAW,CAAC,CAAC,GAAG,EAAE,CAAC;AACnB,aAAW,CAAC,CAAC,GAAG,EAAE,CAAC;;;AAGnB,aAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;;;AAG5B,OAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;;;AAG5B,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB","file":"spriteFromTileset.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n TextureCache = PIXI.utils.TextureCache,\n Sprite = PIXI.Sprite,\n Rectangle = PIXI.Rectangle;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/tileset.png\")\n .load(setup);\n\nfunction setup() {\n\n //Create the `tileset` sprite from the texture\n let texture = TextureCache[\"images/tileset.png\"];\n\n //Fix possible texture bleed\n texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;\n\n //Create a rectangle object that defines the position and\n //size of the sub-image you want to extract from the texture\n let rectangle = new Rectangle(160, 256, 32, 32);\n\n //Tell the texture to use that rectangular section\n texture.frame = rectangle;\n\n //Create the sprite from the texture\n let adventuress = new Sprite(texture);\n\n //Position the sprite on the canvas\n adventuress.x = 64;\n adventuress.y = 64;\n\n //Scale the sprite up\n adventuress.scale.set(3, 3);\n\n //Add the sprite to the stage\n stage.addChild(adventuress);\n \n //Render the stage \n renderer.render(stage);\n}\n\n"]} -------------------------------------------------------------------------------- /chapter01/es6/displayingSprites.js: -------------------------------------------------------------------------------- 1 | //Create the stage and renderer 2 | let stage = new PIXI.Container(), 3 | renderer = PIXI.autoDetectRenderer(256, 256); 4 | document.body.appendChild(renderer.view); 5 | 6 | //Use Pixi's built-in `loader` object to load an image 7 | PIXI.loader 8 | .add("images/pixie96x48.png") 9 | .load(setup); 10 | 11 | //This `setup` function will run when the image has loaded 12 | function setup() { 13 | 14 | //Create the sprite from the texture 15 | let pixie = new PIXI.Sprite( 16 | PIXI.loader.resources["images/pixie96x48.png"].texture 17 | ); 18 | 19 | //Add the sprite to the stage 20 | stage.addChild(pixie); 21 | 22 | //Render the stage 23 | renderer.render(stage); 24 | } 25 | 26 | //You can alternatively use aliases to stand for Pixi objects and 27 | //methods. Here's what the code above looks like using aliases: 28 | /* 29 | //Create the aliases 30 | let Container = PIXI.Container, 31 | autoDetectRenderer = PIXI.autoDetectRenderer, 32 | loader = PIXI.loader, 33 | resources = PIXI.loader.resources, 34 | Sprite = PIXI.Sprite; 35 | 36 | //Create the stage and renderer 37 | let stage = new Container(), 38 | renderer = autoDetectRenderer(256, 256); 39 | document.body.appendChild(renderer.view); 40 | 41 | //Use Pixi's built-in `loader` object to load an image 42 | loader 43 | .add("images/pixie96x48.png") 44 | .load(setup); 45 | 46 | //This `setup` function will run when the image has loaded 47 | function setup() { 48 | 49 | //Create the sprite from the texture 50 | let pixie = new PIXI.Sprite(resources["images/pixie96x48.png"].texture); 51 | 52 | //Add the sprite to the stage 53 | stage.addChild(pixie); 54 | 55 | //Render the stage 56 | renderer.render(stage); 57 | } 58 | */ 59 | 60 | -------------------------------------------------------------------------------- /chapter01/es6/displayingTheCanvas.js: -------------------------------------------------------------------------------- 1 | //Create the renderer 2 | let renderer = PIXI.autoDetectRenderer(144, 256); 3 | 4 | /* You can also create a renderer with more advanced options like this: 5 | //Create a Pixi renderer 6 | let renderer = PIXI.autoDetectRenderer( 7 | 256, //Width 8 | 256, //Height 9 | { //Options 10 | antialiasing: false, 11 | transparent: false, 12 | resolution: 1 13 | }, 14 | false //Optionally force canvas rendering 15 | ); 16 | 17 | //Force canvas rendering like this: 18 | //let renderer = new PIXI.CanvasRenderer(256, 256); 19 | 20 | //Force WebGL rendering like this: 21 | //let renderer = new PIXI.WebGLRenderer(256, 256); 22 | */ 23 | 24 | //Add the canvas to the HTML document 25 | document.body.appendChild(renderer.view); 26 | 27 | //Create a container object called the `stage`. The `stage` is the 28 | //root container for all your objects 29 | let stage = new PIXI.Container(); 30 | 31 | //The `renderer.view` is just an ordinary `` element. 32 | //Here's how you can reference to add an optional dashed 33 | //border around the canvas 34 | renderer.view.style.border = "1px dashed black"; 35 | 36 | //To resize the canvas 37 | //renderer.resize(512, 512); 38 | 39 | //To change the background color 40 | renderer.backgroundColor = 0xFFFFFF; 41 | 42 | //If you want to make the canvas fill the entire window, you can apply this 43 | //CSS styling: 44 | /* 45 | renderer.view.style.position = "absolute" 46 | renderer.view.style.width = window.innerWidth + "px"; 47 | renderer.view.style.height = window.innerHeight + "px"; 48 | renderer.view.style.display = "block"; 49 | */ 50 | 51 | //Tell the renderer to render the stage 52 | renderer.render(stage); 53 | 54 | //Use the custom `scaleToWindow` function to scale and align Pixi's 55 | //canvas to the maximum browser window size. 56 | let scale = scaleToWindow(renderer.view); 57 | console.log(scale); 58 | 59 | //# sourceMappingURL=displayingTheCanvas.js.map 60 | -------------------------------------------------------------------------------- /chapter01/es6/monitorLoadProgress.js: -------------------------------------------------------------------------------- 1 | PIXI.loader 2 | .add([ 3 | "images/blob.png", 4 | "images/door.png", 5 | "images/explorer.png" 6 | ]) 7 | .on("progress", loadProgressHandler) 8 | .load(setup); 9 | 10 | function loadProgressHandler(loader, resource) { 11 | 12 | //Display the file `url` currently being loaded 13 | console.log(`loading: ${resource.url}`); 14 | 15 | //Display the percentage of files currently loaded 16 | console.log(`progress: ${loader.progress}`); 17 | 18 | //If you gave your files names as the first argument 19 | //of the `add` method, you can access them like this 20 | //console.log(`loading: ${resource.name}`); 21 | } 22 | 23 | function setup() { 24 | console.log("All files loaded"); 25 | } 26 | 27 | -------------------------------------------------------------------------------- /chapter01/es6/positionAndRotation.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | Sprite = PIXI.Sprite; 7 | 8 | //Create a Pixi stage and renderer and add the 9 | //renderer.view to the DOM 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(256, 256); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //load an image and run the `setup` function when it's done 19 | loader 20 | .add("images/cat64x64.png") 21 | .load(setup); 22 | 23 | function setup() { 24 | 25 | //Create the `cat` sprite from the texture 26 | let cat = new Sprite(resources["images/cat64x64.png"].texture); 27 | 28 | //Position the sprite and change its width and height 29 | cat.x = 96; 30 | cat.y = 128; 31 | 32 | //Optionally change the width and height 33 | //cat.width = 80; 34 | //cat.height = 120; 35 | 36 | //Optionally change the sprite's scale 37 | //cat.scale.x = 1.5; 38 | //cat.scale.y = 1.5; 39 | 40 | //Optionally center the sprite's anchor point 41 | //cat.anchor.x = 0.5; 42 | //cat.anchor.y = 0.5; 43 | 44 | //As an alternative to anchor, you can optionally set the cat's pivot point 45 | //cat.pivot.x = 32; 46 | //cat.pivot.y = 32; 47 | 48 | //Rotate the sprite 49 | //cat.rotation = 0.5; 50 | 51 | //You can use this alternative syntax to set the 52 | //sprites anchor point, scale and rotation 53 | /* 54 | cat.anchor.set(0.5, 0.5); 55 | cat.position.set(120, 120); 56 | cat.scale.set(1.5, 3); 57 | */ 58 | 59 | //Add the cat to the stage 60 | stage.addChild(cat); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | -------------------------------------------------------------------------------- /chapter01/es6/spriteFromTileset.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | TextureCache = PIXI.utils.TextureCache, 6 | Sprite = PIXI.Sprite, 7 | Rectangle = PIXI.Rectangle; 8 | 9 | //Create a Pixi stage and renderer and add the 10 | //renderer.view to the DOM 11 | let stage = new Container(), 12 | renderer = autoDetectRenderer(256, 256); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load an image and run the `setup` function when it's done 20 | loader 21 | .add("images/tileset.png") 22 | .load(setup); 23 | 24 | function setup() { 25 | 26 | //Create the `tileset` sprite from the texture 27 | let texture = TextureCache["images/tileset.png"]; 28 | 29 | //Fix possible texture bleed 30 | texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 31 | 32 | //Create a rectangle object that defines the position and 33 | //size of the sub-image you want to extract from the texture 34 | let rectangle = new Rectangle(160, 256, 32, 32); 35 | 36 | //Tell the texture to use that rectangular section 37 | texture.frame = rectangle; 38 | 39 | //Create the sprite from the texture 40 | let adventuress = new Sprite(texture); 41 | 42 | //Position the sprite on the canvas 43 | adventuress.x = 64; 44 | adventuress.y = 64; 45 | 46 | //Scale the sprite up 47 | adventuress.scale.set(3, 3); 48 | 49 | //Add the sprite to the stage 50 | stage.addChild(adventuress); 51 | 52 | //Render the stage 53 | renderer.render(stage); 54 | } 55 | 56 | -------------------------------------------------------------------------------- /chapter01/images/animals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/animals.png -------------------------------------------------------------------------------- /chapter01/images/blob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/blob.png -------------------------------------------------------------------------------- /chapter01/images/cat64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/cat64x64.png -------------------------------------------------------------------------------- /chapter01/images/door.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/door.png -------------------------------------------------------------------------------- /chapter01/images/dungeon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/dungeon.png -------------------------------------------------------------------------------- /chapter01/images/explorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/explorer.png -------------------------------------------------------------------------------- /chapter01/images/pixie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/pixie.png -------------------------------------------------------------------------------- /chapter01/images/pixie768x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/pixie768x512.png -------------------------------------------------------------------------------- /chapter01/images/pixie96x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/pixie96x48.png -------------------------------------------------------------------------------- /chapter01/images/tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/tileset.png -------------------------------------------------------------------------------- /chapter01/images/treasure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/treasure.png -------------------------------------------------------------------------------- /chapter01/images/treasureHunter.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "blob.png": 4 | { 5 | "frame": {"x":55,"y":2,"w":32,"h":24}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24}, 9 | "sourceSize": {"w":32,"h":24}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "door.png": 13 | { 14 | "frame": {"x":89,"y":2,"w":32,"h":32}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 18 | "sourceSize": {"w":32,"h":32}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "dungeon.png": 22 | { 23 | "frame": {"x":2,"y":36,"w":512,"h":512}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":512,"h":512}, 27 | "sourceSize": {"w":512,"h":512}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }, 30 | "explorer.png": 31 | { 32 | "frame": {"x":2,"y":2,"w":21,"h":32}, 33 | "rotated": false, 34 | "trimmed": false, 35 | "spriteSourceSize": {"x":0,"y":0,"w":21,"h":32}, 36 | "sourceSize": {"w":21,"h":32}, 37 | "pivot": {"x":0.5,"y":0.5} 38 | }, 39 | "treasure.png": 40 | { 41 | "frame": {"x":25,"y":2,"w":28,"h":24}, 42 | "rotated": false, 43 | "trimmed": false, 44 | "spriteSourceSize": {"x":0,"y":0,"w":28,"h":24}, 45 | "sourceSize": {"w":28,"h":24}, 46 | "pivot": {"x":0.5,"y":0.5} 47 | }}, 48 | "meta": { 49 | "app": "http://www.codeandweb.com/texturepacker", 50 | "version": "1.0", 51 | "image": "treasureHunter.png", 52 | "format": "RGBA8888", 53 | "size": {"w":516,"h":550}, 54 | "scale": "1", 55 | "smartupdate": "$TexturePacker:SmartUpdate:7436ef99382129f1f187e060cc7d5e94:3923663e59fb40b578d66a492a2cda2d:9995f8b4db1ac3cb75651b1542df8ee2$" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /chapter01/images/treasureHunter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter01/images/treasureHunter.png -------------------------------------------------------------------------------- /chapter02/.04_keyboardMovement.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/.04_keyboardMovement.html.swp -------------------------------------------------------------------------------- /chapter02/.07_ticker.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/.07_ticker.html.swp -------------------------------------------------------------------------------- /chapter02/01_gameLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Game loop 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/02_velocity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Velocity 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/03_gameStates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Game states 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/04_keyboardMovement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Keyboard movement 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/05_physics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Physics 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/06_containingMovement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Containing movement 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter02/es5/gameLoop.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite; 8 | 9 | //Create a Pixi stage and renderer and add the 10 | //renderer.view to the DOM 11 | var stage = new Container(), 12 | renderer = autoDetectRenderer(512, 512); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load an image and run the `setup` function when it's done 20 | loader.add("images/pixie96x48.png").load(setup); 21 | 22 | //Define any variables that are used in more than one function 23 | var pixie = undefined; 24 | 25 | function setup() { 26 | 27 | //Create the `pixie` sprite 28 | pixie = new Sprite.fromImage("images/pixie96x48.png"); 29 | 30 | //Center the sprite vertically on the stage 31 | pixie.y = renderer.view.height / 2 - pixie.height / 2; 32 | 33 | //Add the sprite to the stage 34 | stage.addChild(pixie); 35 | 36 | //Start the game loop 37 | gameLoop(); 38 | } 39 | 40 | function gameLoop() { 41 | 42 | //Loop this function 60 times per second 43 | requestAnimationFrame(gameLoop); 44 | 45 | //Move the sprite 1 pixel per frame 46 | pixie.x += 1; 47 | 48 | //Render the stage 49 | renderer.render(stage); 50 | } 51 | //# sourceMappingURL=gameLoop.js.map -------------------------------------------------------------------------------- /chapter02/es5/gameLoop.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/gameLoop.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;;;;AAIvB,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,uBAAuB,CAAC,CAC5B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,YAAA,CAAC;;AAEV,SAAS,KAAK,GAAG;;;AAGf,OAAK,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;;;AAGtD,OAAK,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;;;AAGtD,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;;AAGtB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,CAAC,CAAC,IAAI,CAAC,CAAC;;;AAGb,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB","file":"gameLoop.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n Sprite = PIXI.Sprite;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//Define any variables that are used in more than one function\nlet pixie;\n\nfunction setup() {\n\n //Create the `pixie` sprite \n pixie = new Sprite.fromImage(\"images/pixie96x48.png\");\n\n //Center the sprite vertically on the stage\n pixie.y = renderer.view.height / 2 - pixie.height / 2; \n\n //Add the sprite to the stage\n stage.addChild(pixie);\n \n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Move the sprite 1 pixel per frame\n pixie.x += 1;\n\n //Render the stage\n renderer.render(stage);\n}\n\n"]} -------------------------------------------------------------------------------- /chapter02/es5/gameStates.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite; 8 | 9 | //Create a Pixi stage and renderer and add the 10 | //renderer.view to the DOM 11 | var stage = new Container(), 12 | renderer = autoDetectRenderer(512, 512); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load an image and run the `setup` function when it's done 20 | loader.add("images/pixie96x48.png").load(setup); 21 | 22 | //Define any variables that are used in more than one function 23 | var pixie = undefined; 24 | 25 | //Set the game's current state to `play`: 26 | var state = play; 27 | 28 | function setup() { 29 | 30 | //Create the `pixie` sprite 31 | pixie = new Sprite.fromImage("images/pixie96x48.png"); 32 | 33 | //Position the sprite at the top left corner 34 | pixie.x = 0; 35 | pixie.y = 0; 36 | 37 | //Initialize the sprites's velocity variables 38 | pixie.vx = 0; 39 | pixie.vy = 0; 40 | 41 | //Add the sprite to the stage 42 | stage.addChild(pixie); 43 | 44 | //Start the game loop 45 | gameLoop(); 46 | } 47 | 48 | function gameLoop() { 49 | 50 | //Loop this function 60 times per second 51 | requestAnimationFrame(gameLoop); 52 | 53 | //Update the current game state: 54 | state(); 55 | 56 | //Render the stage 57 | renderer.render(stage); 58 | } 59 | 60 | function play() { 61 | 62 | //Update the sprite's velocity 63 | pixie.vx = 1; 64 | pixie.vy = 1; 65 | 66 | //Apply the velocity values to the sprite's 67 | //position to make it move 68 | pixie.x += pixie.vx; 69 | pixie.y += pixie.vy; 70 | } 71 | //# sourceMappingURL=gameStates.js.map -------------------------------------------------------------------------------- /chapter02/es5/gameStates.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/gameStates.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;;;;AAIvB,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,uBAAuB,CAAC,CAC5B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,YAAA,CAAC;;;AAGV,IAAI,KAAK,GAAG,IAAI,CAAC;;AAEjB,SAAS,KAAK,GAAG;;;AAGf,OAAK,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;;;AAGtD,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;AACZ,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;;;AAGZ,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;AAGb,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;;AAGtB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG;;;AAGd,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;;AAIb,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;AACpB,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;CACrB","file":"gameStates.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n Sprite = PIXI.Sprite;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//Define any variables that are used in more than one function\nlet pixie;\n\n//Set the game's current state to `play`:\nlet state = play;\n\nfunction setup() {\n\n //Create the `pixie` sprite \n pixie = new Sprite.fromImage(\"images/pixie96x48.png\");\n\n //Position the sprite at the top left corner\n pixie.x = 0;\n pixie.y = 0;\n\n //Initialize the sprites's velocity variables\n pixie.vx = 0;\n pixie.vy = 0;\n\n //Add the sprite to the stage\n stage.addChild(pixie);\n \n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Update the current game state:\n state(); \n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n //Update the sprite's velocity\n pixie.vx = 1;\n pixie.vy = 1;\n\n //Apply the velocity values to the sprite's \n //position to make it move\n pixie.x += pixie.vx;\n pixie.y += pixie.vy;\n}\n\n"]} -------------------------------------------------------------------------------- /chapter02/es5/ticker.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite, 8 | Ticker = PIXI.ticker.Ticker; 9 | 10 | //Create a Pixi stage and renderer and add the 11 | //renderer.view to the DOM 12 | var stage = new Container(), 13 | renderer = autoDetectRenderer(512, 512); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load an image and run the `setup` function when it's done 21 | loader.add("images/pixie96x48.png").load(setup); 22 | 23 | //Define any variables that are used in more than one function 24 | var pixie = undefined; 25 | 26 | //Set the game's current state to `play`: 27 | var state = play; 28 | 29 | function setup() { 30 | 31 | //Create the `pixie` sprite 32 | pixie = new Sprite.fromImage("images/pixie96x48.png"); 33 | 34 | //Position the sprite at the top left corner 35 | pixie.x = 0; 36 | pixie.y = 0; 37 | 38 | //Initialize the sprites's velocity variables 39 | pixie.vx = 0; 40 | pixie.vy = 0; 41 | 42 | //Add the sprite to the stage 43 | stage.addChild(pixie); 44 | 45 | //Start the gameLoop 46 | ticker = new Ticker(); 47 | ticker.add(gameLoop); 48 | } 49 | 50 | function gameLoop(dt) { 51 | 52 | //Update the current game state: 53 | state(); 54 | 55 | //Render the stage 56 | renderer.render(stage); 57 | } 58 | 59 | function play() { 60 | 61 | //Update the sprite's velocity 62 | pixie.vx = 1; 63 | pixie.vy = 1; 64 | 65 | //Apply the velocity values to the sprite's 66 | //position to make it move 67 | pixie.x += pixie.vx; 68 | pixie.y += pixie.vy; 69 | } 70 | //# sourceMappingURL=ticker.js.map -------------------------------------------------------------------------------- /chapter02/es5/ticker.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/ticker.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;;;;AAI9B,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,uBAAuB,CAAC,CAC5B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,YAAA,CAAC;;;AAGV,IAAI,KAAK,GAAG,IAAI,CAAC;;AAEjB,SAAS,KAAK,GAAG;;;AAGf,OAAK,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;;;AAGtD,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;AACZ,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;;;AAGZ,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;AAGb,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;;AAGtB,QAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AACtB,QAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;CACtB;;AAED,SAAS,QAAQ,CAAC,EAAE,EAAC;;;AAGnB,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG;;;AAGd,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;;AAIb,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;AACpB,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;CACrB","file":"ticker.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n Sprite = PIXI.Sprite,\n Ticker = PIXI.ticker.Ticker;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//Define any variables that are used in more than one function\nlet pixie;\n\n//Set the game's current state to `play`:\nlet state = play;\n\nfunction setup() {\n\n //Create the `pixie` sprite \n pixie = new Sprite.fromImage(\"images/pixie96x48.png\");\n\n //Position the sprite at the top left corner\n pixie.x = 0;\n pixie.y = 0;\n\n //Initialize the sprites's velocity variables\n pixie.vx = 0;\n pixie.vy = 0;\n\n //Add the sprite to the stage\n stage.addChild(pixie);\n\n //Start the gameLoop\n ticker = new Ticker();\n ticker.add(gameLoop);\n}\n\nfunction gameLoop(dt){\n\n //Update the current game state:\n state(); \n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n //Update the sprite's velocity\n pixie.vx = 1;\n pixie.vy = 1;\n\n //Apply the velocity values to the sprite's \n //position to make it move\n pixie.x += pixie.vx;\n pixie.y += pixie.vy;\n}\n\n"]} -------------------------------------------------------------------------------- /chapter02/es5/velocity.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite; 8 | 9 | //Create a Pixi stage and renderer and add the 10 | //renderer.view to the DOM 11 | var stage = new Container(), 12 | renderer = autoDetectRenderer(512, 512); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load an image and run the `setup` function when it's done 20 | loader.add("images/pixie96x48.png").load(setup); 21 | 22 | //Define any variables that are used in more than one function 23 | var pixie = undefined; 24 | 25 | function setup() { 26 | 27 | //Create the `pixie` sprite 28 | pixie = new Sprite.fromImage("images/pixie96x48.png"); 29 | 30 | //Position the sprite at the top left corner 31 | pixie.x = 0; 32 | pixie.y = 0; 33 | 34 | //Initialize the sprites's velocity variables 35 | pixie.vx = 0; 36 | pixie.vy = 0; 37 | 38 | //Add the sprite to the stage 39 | stage.addChild(pixie); 40 | 41 | //Start the game loop 42 | gameLoop(); 43 | } 44 | 45 | function gameLoop() { 46 | 47 | //Loop this function 60 times per second 48 | requestAnimationFrame(gameLoop); 49 | 50 | //Update the sprite's velocity 51 | pixie.vx = 1; 52 | pixie.vy = 1; 53 | 54 | //Apply the velocity values to the sprite's 55 | //position to make it move 56 | pixie.x += pixie.vx; 57 | pixie.y += pixie.vy; 58 | 59 | //Render the stage 60 | renderer.render(stage); 61 | } 62 | //# sourceMappingURL=velocity.js.map -------------------------------------------------------------------------------- /chapter02/es5/velocity.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/velocity.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;;;;AAIvB,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,uBAAuB,CAAC,CAC5B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,YAAA,CAAC;;AAEV,SAAS,KAAK,GAAG;;;AAGf,OAAK,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;;;AAGtD,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;AACZ,OAAK,CAAC,CAAC,GAAG,CAAC,CAAC;;;AAGZ,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;AAGb,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;;AAGtB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;AACb,OAAK,CAAC,EAAE,GAAG,CAAC,CAAC;;;;AAIb,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;AACpB,OAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;;;AAGpB,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB","file":"velocity.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n Sprite = PIXI.Sprite;\n\n//Create a Pixi stage and renderer and add the \n//renderer.view to the DOM\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load an image and run the `setup` function when it's done\nloader\n .add(\"images/pixie96x48.png\")\n .load(setup);\n\n//Define any variables that are used in more than one function\nlet pixie;\n\nfunction setup() {\n\n //Create the `pixie` sprite \n pixie = new Sprite.fromImage(\"images/pixie96x48.png\");\n\n //Position the sprite at the top left corner\n pixie.x = 0;\n pixie.y = 0;\n\n //Initialize the sprites's velocity variables\n pixie.vx = 0;\n pixie.vy = 0;\n\n //Add the sprite to the stage\n stage.addChild(pixie);\n \n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Update the sprite's velocity\n pixie.vx = 1;\n pixie.vy = 1;\n\n //Apply the velocity values to the sprite's \n //position to make it move\n pixie.x += pixie.vx;\n pixie.y += pixie.vy;\n\n //Render the stage\n renderer.render(stage);\n}\n\n"]} -------------------------------------------------------------------------------- /chapter02/es6/.containingMovement.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.containingMovement.js.swp -------------------------------------------------------------------------------- /chapter02/es6/.gameStates.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.gameStates.js.swp -------------------------------------------------------------------------------- /chapter02/es6/.keyboardMovement.js.swn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.keyboardMovement.js.swn -------------------------------------------------------------------------------- /chapter02/es6/.keyboardMovement.js.swo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.keyboardMovement.js.swo -------------------------------------------------------------------------------- /chapter02/es6/.keyboardMovement.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.keyboardMovement.js.swp -------------------------------------------------------------------------------- /chapter02/es6/.ticker.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/es6/.ticker.js.swp -------------------------------------------------------------------------------- /chapter02/es6/gameLoop.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | Sprite = PIXI.Sprite; 7 | 8 | //Create a Pixi stage and renderer and add the 9 | //renderer.view to the DOM 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(512, 512); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //load an image and run the `setup` function when it's done 19 | loader 20 | .add("images/pixie96x48.png") 21 | .load(setup); 22 | 23 | //Define any variables that are used in more than one function 24 | let pixie; 25 | 26 | function setup() { 27 | 28 | //Create the `pixie` sprite 29 | pixie = new Sprite(resources["images/pixie96x48.png"].texture); 30 | 31 | //Center the sprite vertically on the stage 32 | pixie.y = renderer.view.height / 2 - pixie.height / 2; 33 | 34 | //Add the sprite to the stage 35 | stage.addChild(pixie); 36 | 37 | //Start the game loop 38 | gameLoop(); 39 | } 40 | 41 | function gameLoop(){ 42 | 43 | //Loop this function 60 times per second 44 | requestAnimationFrame(gameLoop); 45 | 46 | //Move the sprite 1 pixel per frame 47 | pixie.x += 1; 48 | 49 | //Render the stage 50 | renderer.render(stage); 51 | } 52 | 53 | -------------------------------------------------------------------------------- /chapter02/es6/gameStates.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | Sprite = PIXI.Sprite; 7 | 8 | //Create a Pixi stage and renderer and add the 9 | //renderer.view to the DOM 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(512, 512); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //load an image and run the `setup` function when it's done 19 | loader 20 | .add("images/pixie96x48.png") 21 | .load(setup); 22 | 23 | //Define any variables that are used in more than one function 24 | let pixie; 25 | 26 | //Set the game's current state to `play`: 27 | let state = play; 28 | 29 | function setup() { 30 | 31 | //Create the `pixie` sprite 32 | pixie = new Sprite(resources["images/pixie96x48.png"]); 33 | 34 | //Position the sprite at the top left corner 35 | pixie.x = 0; 36 | pixie.y = 0; 37 | 38 | //Initialize the sprites's velocity variables 39 | pixie.vx = 0; 40 | pixie.vy = 0; 41 | 42 | //Add the sprite to the stage 43 | stage.addChild(pixie); 44 | 45 | //Start the game loop 46 | gameLoop(); 47 | } 48 | 49 | function gameLoop(){ 50 | 51 | //Loop this function 60 times per second 52 | requestAnimationFrame(gameLoop); 53 | 54 | //Update the current game state: 55 | state(); 56 | 57 | //Render the stage 58 | renderer.render(stage); 59 | } 60 | 61 | function play() { 62 | 63 | //Update the sprite's velocity 64 | pixie.vx = 1; 65 | pixie.vy = 1; 66 | 67 | //Apply the velocity values to the sprite's 68 | //position to make it move 69 | pixie.x += pixie.vx; 70 | pixie.y += pixie.vy; 71 | } 72 | 73 | -------------------------------------------------------------------------------- /chapter02/es6/velocity.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | Sprite = PIXI.Sprite; 7 | 8 | //Create a Pixi stage and renderer and add the 9 | //renderer.view to the DOM 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(512, 512); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //load an image and run the `setup` function when it's done 19 | loader 20 | .add("images/pixie96x48.png") 21 | .load(setup); 22 | 23 | //Define any variables that are used in more than one function 24 | let pixie; 25 | 26 | function setup() { 27 | 28 | //Create the `pixie` sprite 29 | pixie = new Sprite(resources["images/pixie96x48.png"]); 30 | 31 | //Position the sprite at the top left corner 32 | pixie.x = 0; 33 | pixie.y = 0; 34 | 35 | //Initialize the sprites's velocity variables 36 | pixie.vx = 0; 37 | pixie.vy = 0; 38 | 39 | //Add the sprite to the stage 40 | stage.addChild(pixie); 41 | 42 | //Start the game loop 43 | gameLoop(); 44 | } 45 | 46 | function gameLoop(){ 47 | 48 | //Loop this function 60 times per second 49 | requestAnimationFrame(gameLoop); 50 | 51 | //Update the sprite's velocity 52 | pixie.vx = 1; 53 | pixie.vy = 1; 54 | 55 | //Apply the velocity values to the sprite's 56 | //position to make it move 57 | pixie.x += pixie.vx; 58 | pixie.y += pixie.vy; 59 | 60 | //Render the stage 61 | renderer.render(stage); 62 | } 63 | 64 | -------------------------------------------------------------------------------- /chapter02/images/cat64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/images/cat64x64.png -------------------------------------------------------------------------------- /chapter02/images/pixie96x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter02/images/pixie96x48.png -------------------------------------------------------------------------------- /chapter03/.bitmapText.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/.bitmapText.html.swp -------------------------------------------------------------------------------- /chapter03/.shapes.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/.shapes.html.swp -------------------------------------------------------------------------------- /chapter03/01_shapes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Shapes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/02_singleGraphicsContext.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Single graphics context 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/03_animatingGraphics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Single graphics context 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/04_text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Text 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/05_bitmapText.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Bitmsp text 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/06_groupingSprites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Grouping sprites 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chapter03/es5/animatingGraphics.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite, 8 | Graphics = PIXI.Graphics; 9 | 10 | //Create a Pixi stage and renderer 11 | var stage = new Container(), 12 | renderer = autoDetectRenderer(256, 256); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //Set the initial game state 20 | var state = play; 21 | 22 | //Define any variables that are used in more than one function 23 | var line = undefined; 24 | 25 | //Run the `setup` function 26 | setup(); 27 | 28 | function setup() { 29 | 30 | line = new Graphics(); 31 | stage.addChild(line); 32 | 33 | line.angleA = 0; 34 | line.angleB = 0; 35 | 36 | //Start the game loop 37 | gameLoop(); 38 | } 39 | 40 | function gameLoop() { 41 | 42 | //Loop this function 60 times per second 43 | requestAnimationFrame(gameLoop); 44 | 45 | //Run the current state 46 | state(); 47 | 48 | //Render the stage 49 | renderer.render(stage); 50 | } 51 | 52 | function play() { 53 | 54 | //Make the line's start point rotate clockwise around 55 | //x/y point 64, 64. `rotateAroundPoint` returns an 56 | //object with `x` and `y` properties 57 | //containing the point's new rotated position 58 | line.angleA += 0.02; 59 | var rotatingA = rotateAroundPoint(64, 64, 20, 20, line.angleA); 60 | 61 | //Make the line's end point rotate counter-clockwise around x/y point 192, 208 62 | line.angleB -= 0.03; 63 | var rotatingB = rotateAroundPoint(192, 208, 20, 20, line.angleB); 64 | 65 | //Clear the line to reset it from the previous frame 66 | line.clear(); 67 | 68 | //Draw the line using the rotating points as start and end points 69 | line.lineStyle(4, 0, 1); 70 | line.moveTo(rotatingA.x, rotatingA.y); 71 | line.lineTo(rotatingB.x, rotatingB.y); 72 | } 73 | 74 | function rotateAroundPoint(pointX, pointY, distanceX, distanceY, angle) { 75 | var point = {}; 76 | point.x = pointX + Math.cos(angle) * distanceX; 77 | point.y = pointY + Math.sin(angle) * distanceY; 78 | return point; 79 | } 80 | //# sourceMappingURL=animatingGraphics.js.map -------------------------------------------------------------------------------- /chapter03/es5/bitmapText.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite, 8 | Graphics = PIXI.Graphics, 9 | Text = PIXI.Text, 10 | BitmapText = PIXI.extras.BitmapText; 11 | 12 | //Create a Pixi stage and renderer 13 | var stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load resources (images and fonts) 22 | 23 | loader.add("fonts/disko.xml").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var message = undefined; 30 | 31 | function setup() { 32 | 33 | message = new BitmapText("Hello Pixi!", { font: "48px disko" }); 34 | 35 | //Use the `text` property to change the content 36 | //message.text = "Changed!"; 37 | 38 | //Use the `style` property to change the text style 39 | //message.style = {fill: "black", font: "16px PetMe"}; 40 | 41 | message.x = renderer.view.width / 2 - message.width / 2; 42 | message.y = renderer.view.height / 2 - message.height / 2; 43 | 44 | //Add the text to the stage 45 | stage.addChild(message); 46 | 47 | //Start the game loop 48 | gameLoop(); 49 | } 50 | 51 | function gameLoop() { 52 | 53 | //Loop this function 60 times per second 54 | requestAnimationFrame(gameLoop); 55 | 56 | //Run the current state 57 | state(); 58 | 59 | //Render the stage 60 | renderer.render(stage); 61 | } 62 | 63 | function play() {} 64 | 65 | function linkFont(source) { 66 | 67 | //Use the font's filename as the `fontFamily` name. This code captures 68 | //the font file’s name without the extension or file path 69 | var fontFamily = source.split("/").pop().split(".")[0]; 70 | 71 | //Append an `@afont-face` style rule to the head of the HTML document 72 | var newStyle = document.createElement("style"); 73 | var fontFace = "@font-face {font-family: '" + fontFamily + "'; src: url('" + source + "');}"; 74 | newStyle.appendChild(document.createTextNode(fontFace)); 75 | document.head.appendChild(newStyle); 76 | } 77 | 78 | //Update the font family in the game loop to ensure that it 79 | //it's being applied after the font file has loaded 80 | //message.style = {fill: "black", font: "16px PetMe"}; 81 | //# sourceMappingURL=bitmapText.js.map -------------------------------------------------------------------------------- /chapter03/es5/singleGraphicsContext.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite, 8 | Graphics = PIXI.Graphics; 9 | 10 | //Create a Pixi stage and renderer 11 | var stage = new Container(), 12 | renderer = autoDetectRenderer(464, 164); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //Set the initial game state 20 | var state = play; 21 | 22 | //Run the `setup` function 23 | setup(); 24 | 25 | function setup() { 26 | 27 | //Create a single graphics context 28 | var ctx = new Graphics(); 29 | 30 | //Draw a rectangle on the context 31 | ctx.beginFill(13260); 32 | ctx.lineStyle(4, 16711680, 1); 33 | ctx.drawRect(32, 32, 96, 96); 34 | ctx.endFill(); 35 | 36 | //Draw a circle without an outline 37 | ctx.beginFill(16750899); 38 | ctx.lineStyle(0); 39 | ctx.drawCircle(224, 80, 48); 40 | ctx.endFill(); 41 | 42 | //Draw a line 43 | ctx.lineStyle(4, 0, 1); 44 | ctx.moveTo(320, 48); 45 | ctx.lineTo(420, 112); 46 | 47 | //Add the graphics context to the stage 48 | stage.addChild(ctx); 49 | 50 | //Start the game loop 51 | gameLoop(); 52 | } 53 | 54 | function gameLoop() { 55 | 56 | //Loop this function 60 times per second 57 | requestAnimationFrame(gameLoop); 58 | 59 | //Run the current state 60 | state(); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | 66 | function play() {} 67 | 68 | //Any animation code goes here 69 | //# sourceMappingURL=singleGraphicsContext.js.map -------------------------------------------------------------------------------- /chapter03/es5/singleGraphicsContext.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/singleGraphicsContext.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;;;AAG3B,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,KAAK,EAAE,CAAC;;AAER,SAAS,KAAK,GAAG;;;AAGf,MAAI,GAAG,GAAG,IAAI,QAAQ,EAAE,CAAC;;;AAGzB,KAAG,CAAC,SAAS,CAAC,KAAQ,CAAC,CAAC;AACxB,KAAG,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC9B,KAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC7B,KAAG,CAAC,OAAO,EAAE,CAAC;;;AAGd,KAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;AACxB,KAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACjB,KAAG,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC5B,KAAG,CAAC,OAAO,EAAE,CAAC;;;AAGd,KAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAQ,EAAE,CAAC,CAAC,CAAC;AAC9B,KAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACpB,KAAG,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;;;AAGrB,OAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;;;AAGpB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG,EAGf","file":"singleGraphicsContext.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n Sprite = PIXI.Sprite,\n Graphics = PIXI.Graphics;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(464, 164);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//Set the initial game state\nlet state = play;\n\n//Run the `setup` function\nsetup();\n \nfunction setup() {\n\n //Create a single graphics context\n let ctx = new Graphics();\n\n //Draw a rectangle on the context\n ctx.beginFill(0x0033CC);\n ctx.lineStyle(4, 0xFF0000, 1);\n ctx.drawRect(32, 32, 96, 96);\n ctx.endFill();\n\n //Draw a circle without an outline\n ctx.beginFill(0xFF9933);\n ctx.lineStyle(0);\n ctx.drawCircle(224, 80, 48);\n ctx.endFill();\n\n //Draw a line\n ctx.lineStyle(4, 0x000000, 1);\n ctx.moveTo(320, 48);\n ctx.lineTo(420, 112);\n\n //Add the graphics context to the stage\n stage.addChild(ctx);\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n //Any animation code goes here\n}\n"]} -------------------------------------------------------------------------------- /chapter03/es5/text.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | Sprite = PIXI.Sprite, 8 | Graphics = PIXI.Graphics, 9 | Text = PIXI.Text; 10 | 11 | //Create a Pixi stage and renderer 12 | var stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | 22 | loader.add("fonts/SpicyRice.ttf").add("fonts/PetMe.ttf").load(setup); 23 | 24 | //Link the fonts you want to use 25 | linkFont("fonts/SpicyRice.ttf"); 26 | linkFont("fonts/PetMe.ttf"); 27 | 28 | //Set the initial game state 29 | var state = play; 30 | 31 | //Define any variables that are used in more than one function 32 | var message = undefined; 33 | 34 | function setup() { 35 | 36 | message = new Text("Hello Pixi!", { font: "48px Impact", fill: "red" }); 37 | 38 | //Use the `text` property to change the content 39 | //message.text = "Text changed!"; 40 | 41 | //Use the `style` property to change the text style 42 | //message.style = {fill: "black", font: "16px PetMe"}; 43 | 44 | message.x = renderer.view.width / 2 - message.width / 2; 45 | message.y = renderer.view.height / 2 - message.height / 2; 46 | 47 | //Add the text to the stage 48 | stage.addChild(message); 49 | 50 | //Start the game loop 51 | gameLoop(); 52 | } 53 | 54 | function gameLoop() { 55 | 56 | //Loop this function 60 times per second 57 | requestAnimationFrame(gameLoop); 58 | 59 | //Run the current state 60 | state(); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | 66 | function play() {} 67 | 68 | function linkFont(source) { 69 | 70 | //Use the font's filename as the `fontFamily` name. This code captures 71 | //the font file’s name without the extension or file path 72 | var fontFamily = source.split("/").pop().split(".")[0]; 73 | 74 | //Append an `@afont-face` style rule to the head of the HTML document 75 | var newStyle = document.createElement("style"); 76 | var fontFace = "@font-face {font-family: '" + fontFamily + "'; src: url('" + source + "');}"; 77 | newStyle.appendChild(document.createTextNode(fontFace)); 78 | document.head.appendChild(newStyle); 79 | } 80 | 81 | //Update the font family in the game loop to ensure that it 82 | //it's being applied after the font file has loaded 83 | //message.style = {fill: "black", font: "16px PetMe"}; 84 | //# sourceMappingURL=text.js.map -------------------------------------------------------------------------------- /chapter03/es6/.animatingGraphics.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.animatingGraphics.js.swp -------------------------------------------------------------------------------- /chapter03/es6/.bitmapText.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.bitmapText.js.swp -------------------------------------------------------------------------------- /chapter03/es6/.groupingSprites.js.swo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.groupingSprites.js.swo -------------------------------------------------------------------------------- /chapter03/es6/.groupingSprites.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.groupingSprites.js.swp -------------------------------------------------------------------------------- /chapter03/es6/.shapes.js.swo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.shapes.js.swo -------------------------------------------------------------------------------- /chapter03/es6/.shapes.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/es6/.shapes.js.swp -------------------------------------------------------------------------------- /chapter03/es6/animatingGraphics.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | Sprite = PIXI.Sprite, 6 | Graphics = PIXI.Graphics; 7 | 8 | //Create a Pixi stage and renderer 9 | let stage = new Container(), 10 | renderer = autoDetectRenderer(256, 256); 11 | document.body.appendChild(renderer.view); 12 | 13 | //Set the canvas's border style and background color 14 | renderer.view.style.border = "1px dashed black"; 15 | renderer.backgroundColor = "0xFFFFFF"; 16 | 17 | //Set the initial game state 18 | let state = play; 19 | 20 | //Define any variables that are used in more than one function 21 | let line; 22 | 23 | //Run the `setup` function 24 | setup(); 25 | 26 | function setup() { 27 | 28 | line = new Graphics(); 29 | stage.addChild(line); 30 | 31 | line.angleA = 0; 32 | line.angleB = 0; 33 | 34 | //Start the game loop 35 | gameLoop(); 36 | } 37 | 38 | function gameLoop(){ 39 | 40 | //Loop this function 60 times per second 41 | requestAnimationFrame(gameLoop); 42 | 43 | //Run the current state 44 | state(); 45 | 46 | //Render the stage 47 | renderer.render(stage); 48 | } 49 | 50 | function play() { 51 | 52 | //Make the line's start point rotate clockwise around 53 | //x/y point 64, 64. `rotateAroundPoint` returns an 54 | //object with `x` and `y` properties 55 | //containing the point's new rotated position 56 | line.angleA += 0.02; 57 | let rotatingA = rotateAroundPoint(64, 64, 20, 20, line.angleA); 58 | 59 | //Make the line's end point rotate counter-clockwise around x/y point 192, 208 60 | line.angleB -= 0.03; 61 | let rotatingB = rotateAroundPoint(192, 208, 20, 20, line.angleB); 62 | 63 | //Clear the line to reset it from the previous frame 64 | line.clear(); 65 | 66 | //Draw the line using the rotating points as start and end points 67 | line.lineStyle(4, 0x000000, 1); 68 | line.moveTo(rotatingA.x, rotatingA.y); 69 | line.lineTo(rotatingB.x, rotatingB.y); 70 | } 71 | 72 | function rotateAroundPoint(pointX, pointY, distanceX, distanceY, angle) { 73 | let point = {}; 74 | point.x = pointX + Math.cos(angle) * distanceX; 75 | point.y = pointY + Math.sin(angle) * distanceY; 76 | return point; 77 | } 78 | 79 | -------------------------------------------------------------------------------- /chapter03/es6/bitmapText.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | Sprite = PIXI.Sprite, 6 | Graphics = PIXI.Graphics, 7 | Text = PIXI.Text, 8 | BitmapText = PIXI.extras.BitmapText; 9 | 10 | //Create a Pixi stage and renderer 11 | let stage = new Container(), 12 | renderer = autoDetectRenderer(256, 256); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load resources (images and fonts) 20 | 21 | loader 22 | .add("fonts/disko.xml") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let message; 30 | 31 | function setup() { 32 | 33 | message = new BitmapText( 34 | "Hello Pixi!", 35 | {font: "48px disko"} 36 | ); 37 | 38 | //Use the `text` property to change the content 39 | //message.text = "Changed!"; 40 | 41 | //Use the `style` property to change the text style 42 | //message.style = {fill: "black", font: "16px PetMe"}; 43 | 44 | message.x = renderer.view.width / 2 - message.width / 2; 45 | message.y = renderer.view.height / 2 - message.height / 2; 46 | 47 | //Add the text to the stage 48 | stage.addChild(message); 49 | 50 | //Start the game loop 51 | gameLoop(); 52 | } 53 | 54 | function gameLoop(){ 55 | 56 | //Loop this function 60 times per second 57 | requestAnimationFrame(gameLoop); 58 | 59 | //Run the current state 60 | state(); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | 66 | function play() { 67 | 68 | //Update the font family in the game loop to ensure that it 69 | //it's being applied after the font file has loaded 70 | //message.style = {fill: "black", font: "16px PetMe"}; 71 | 72 | } 73 | 74 | function linkFont(source) { 75 | 76 | //Use the font's filename as the `fontFamily` name. This code captures 77 | //the font file’s name without the extension or file path 78 | let fontFamily = source.split("/").pop().split(".")[0]; 79 | 80 | //Append an `@afont-face` style rule to the head of the HTML document 81 | let newStyle = document.createElement("style"); 82 | let fontFace 83 | = "@font-face {font-family: '" + fontFamily + "'; src: url('" + source + "');}"; 84 | newStyle.appendChild(document.createTextNode(fontFace)); 85 | document.head.appendChild(newStyle); 86 | } 87 | 88 | -------------------------------------------------------------------------------- /chapter03/es6/singleGraphicsContext.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | Sprite = PIXI.Sprite, 6 | Graphics = PIXI.Graphics; 7 | 8 | //Create a Pixi stage and renderer 9 | let stage = new Container(), 10 | renderer = autoDetectRenderer(464, 164); 11 | document.body.appendChild(renderer.view); 12 | 13 | //Set the canvas's border style and background color 14 | renderer.view.style.border = "1px dashed black"; 15 | renderer.backgroundColor = "0xFFFFFF"; 16 | 17 | //Set the initial game state 18 | let state = play; 19 | 20 | //Run the `setup` function 21 | setup(); 22 | 23 | function setup() { 24 | 25 | //Create a single graphics context 26 | let ctx = new Graphics(); 27 | 28 | //Draw a rectangle on the context 29 | ctx.beginFill(0x0033CC); 30 | ctx.lineStyle(4, 0xFF0000, 1); 31 | ctx.drawRect(32, 32, 96, 96); 32 | ctx.endFill(); 33 | 34 | //Draw a circle without an outline 35 | ctx.beginFill(0xFF9933); 36 | ctx.lineStyle(0); 37 | ctx.drawCircle(224, 80, 48); 38 | ctx.endFill(); 39 | 40 | //Draw a line 41 | ctx.lineStyle(4, 0x000000, 1); 42 | ctx.moveTo(320, 48); 43 | ctx.lineTo(420, 112); 44 | 45 | //Add the graphics context to the stage 46 | stage.addChild(ctx); 47 | 48 | //Start the game loop 49 | gameLoop(); 50 | } 51 | 52 | function gameLoop(){ 53 | 54 | //Loop this function 60 times per second 55 | requestAnimationFrame(gameLoop); 56 | 57 | //Run the current state 58 | state(); 59 | 60 | //Render the stage 61 | renderer.render(stage); 62 | } 63 | 64 | function play() { 65 | 66 | //Any animation code goes here 67 | } 68 | -------------------------------------------------------------------------------- /chapter03/es6/text.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | Sprite = PIXI.Sprite, 6 | Graphics = PIXI.Graphics, 7 | Text = PIXI.Text; 8 | 9 | //Create a Pixi stage and renderer 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(256, 256); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //load resources (images and fonts) 19 | 20 | loader 21 | .add("fonts/SpicyRice.ttf") 22 | .add("fonts/PetMe.ttf") 23 | .load(setup); 24 | 25 | //Link the fonts you want to use 26 | linkFont("fonts/SpicyRice.ttf"); 27 | linkFont("fonts/PetMe.ttf"); 28 | 29 | //Set the initial game state 30 | let state = play; 31 | 32 | //Define any variables that are used in more than one function 33 | let message; 34 | 35 | function setup() { 36 | 37 | message = new Text( 38 | "Hello Pixi!", 39 | {font: "48px Impact", fill: "red"} 40 | ); 41 | 42 | //Use the `text` property to change the content 43 | //message.text = "Text changed!"; 44 | 45 | //Use the `style` property to change the text style 46 | //message.style = {fill: "black", font: "16px PetMe"}; 47 | 48 | message.x = renderer.view.width / 2 - message.width / 2; 49 | message.y = renderer.view.height / 2 - message.height / 2; 50 | 51 | //Add the text to the stage 52 | stage.addChild(message); 53 | 54 | //Start the game loop 55 | gameLoop(); 56 | } 57 | 58 | function gameLoop(){ 59 | 60 | //Loop this function 60 times per second 61 | requestAnimationFrame(gameLoop); 62 | 63 | //Run the current state 64 | state(); 65 | 66 | //Render the stage 67 | renderer.render(stage); 68 | } 69 | 70 | function play() { 71 | 72 | //Update the font family in the game loop to ensure that it 73 | //it's being applied after the font file has loaded 74 | //message.style = {fill: "black", font: "16px PetMe"}; 75 | 76 | } 77 | 78 | function linkFont(source) { 79 | 80 | //Use the font's filename as the `fontFamily` name. This code captures 81 | //the font file’s name without the extension or file path 82 | let fontFamily = source.split("/").pop().split(".")[0]; 83 | 84 | //Append an `@afont-face` style rule to the head of the HTML document 85 | let newStyle = document.createElement("style"); 86 | let fontFace 87 | = "@font-face {font-family: '" + fontFamily + "'; src: url('" + source + "');}"; 88 | newStyle.appendChild(document.createTextNode(fontFace)); 89 | document.head.appendChild(newStyle); 90 | } 91 | 92 | -------------------------------------------------------------------------------- /chapter03/fonts/PetMe.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/fonts/PetMe.ttf -------------------------------------------------------------------------------- /chapter03/fonts/SpicyRice.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/fonts/SpicyRice.ttf -------------------------------------------------------------------------------- /chapter03/fonts/disko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/fonts/disko.png -------------------------------------------------------------------------------- /chapter03/fonts/puzzler.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/fonts/puzzler.otf -------------------------------------------------------------------------------- /chapter03/images/animals.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "cat.png": 4 | { 5 | "frame": {"x":2,"y":2,"w":64,"h":64}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 9 | "sourceSize": {"w":64,"h":64}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "hedgehog.png": 13 | { 14 | "frame": {"x":68,"y":2,"w":64,"h":64}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 18 | "sourceSize": {"w":64,"h":64}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "tiger.png": 22 | { 23 | "frame": {"x":134,"y":2,"w":64,"h":64}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 27 | "sourceSize": {"w":64,"h":64}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }}, 30 | "meta": { 31 | "app": "http://www.codeandweb.com/texturepacker", 32 | "version": "1.0", 33 | "image": "animals.png", 34 | "format": "RGBA8888", 35 | "size": {"w":200,"h":68}, 36 | "scale": "1", 37 | "smartupdate": "$TexturePacker:SmartUpdate:aa42b222ddb3faeafaa3b7c9f66556ee:15b03a4eb0cd5b5d361ef8988283677a:b00d48b51f56eb7c81e25100fcce2828$" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter03/images/animals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/images/animals.png -------------------------------------------------------------------------------- /chapter03/images/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/images/cat.png -------------------------------------------------------------------------------- /chapter03/images/hedgehog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/images/hedgehog.png -------------------------------------------------------------------------------- /chapter03/images/tiger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter03/images/tiger.png -------------------------------------------------------------------------------- /chapter04/.02_treasureHunter.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/.02_treasureHunter.html.swp -------------------------------------------------------------------------------- /chapter04/01_rectangleCollision.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Rectangle collision 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter04/02_treasureHunter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Treasure hunter 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter04/fonts/PetMe.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/fonts/PetMe.ttf -------------------------------------------------------------------------------- /chapter04/fonts/SpicyRice.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/fonts/SpicyRice.ttf -------------------------------------------------------------------------------- /chapter04/fonts/disko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/fonts/disko.png -------------------------------------------------------------------------------- /chapter04/fonts/puzzler.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/fonts/puzzler.otf -------------------------------------------------------------------------------- /chapter04/images/animals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/animals.png -------------------------------------------------------------------------------- /chapter04/images/blob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/blob.png -------------------------------------------------------------------------------- /chapter04/images/box64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/box64x64.png -------------------------------------------------------------------------------- /chapter04/images/cat64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/cat64x64.png -------------------------------------------------------------------------------- /chapter04/images/door.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/door.png -------------------------------------------------------------------------------- /chapter04/images/dungeon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/dungeon.png -------------------------------------------------------------------------------- /chapter04/images/explorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/explorer.png -------------------------------------------------------------------------------- /chapter04/images/pixie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/pixie.png -------------------------------------------------------------------------------- /chapter04/images/pixie768x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/pixie768x512.png -------------------------------------------------------------------------------- /chapter04/images/pixie96x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/pixie96x48.png -------------------------------------------------------------------------------- /chapter04/images/tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/tileset.png -------------------------------------------------------------------------------- /chapter04/images/treasure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/treasure.png -------------------------------------------------------------------------------- /chapter04/images/treasureHunter.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "blob.png": 4 | { 5 | "frame": {"x":55,"y":2,"w":32,"h":24}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24}, 9 | "sourceSize": {"w":32,"h":24}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "door.png": 13 | { 14 | "frame": {"x":89,"y":2,"w":32,"h":32}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 18 | "sourceSize": {"w":32,"h":32}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "dungeon.png": 22 | { 23 | "frame": {"x":2,"y":36,"w":512,"h":512}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":512,"h":512}, 27 | "sourceSize": {"w":512,"h":512}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }, 30 | "explorer.png": 31 | { 32 | "frame": {"x":2,"y":2,"w":21,"h":32}, 33 | "rotated": false, 34 | "trimmed": false, 35 | "spriteSourceSize": {"x":0,"y":0,"w":21,"h":32}, 36 | "sourceSize": {"w":21,"h":32}, 37 | "pivot": {"x":0.5,"y":0.5} 38 | }, 39 | "treasure.png": 40 | { 41 | "frame": {"x":25,"y":2,"w":28,"h":24}, 42 | "rotated": false, 43 | "trimmed": false, 44 | "spriteSourceSize": {"x":0,"y":0,"w":28,"h":24}, 45 | "sourceSize": {"w":28,"h":24}, 46 | "pivot": {"x":0.5,"y":0.5} 47 | }}, 48 | "meta": { 49 | "app": "http://www.codeandweb.com/texturepacker", 50 | "version": "1.0", 51 | "image": "treasureHunter.png", 52 | "format": "RGBA8888", 53 | "size": {"w":516,"h":550}, 54 | "scale": "1", 55 | "smartupdate": "$TexturePacker:SmartUpdate:7436ef99382129f1f187e060cc7d5e94:3923663e59fb40b578d66a492a2cda2d:9995f8b4db1ac3cb75651b1542df8ee2$" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /chapter04/images/treasureHunter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter04/images/treasureHunter.png -------------------------------------------------------------------------------- /chapter05/.01_fromTextures.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/.01_fromTextures.html.swp -------------------------------------------------------------------------------- /chapter05/.03_tilesetFilmstrip.html.swn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/.03_tilesetFilmstrip.html.swn -------------------------------------------------------------------------------- /chapter05/.04_statePlayer.html.swm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/.04_statePlayer.html.swm -------------------------------------------------------------------------------- /chapter05/.04_statePlayer.html.swn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/.04_statePlayer.html.swn -------------------------------------------------------------------------------- /chapter05/01_fromTextures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | From textures 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter05/02_fromFrames.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | From frames 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter05/03_tilesetFilmstrip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tileset filmstrip 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter05/04_statePlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | State player 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter05/05_treasureHunter2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Treasure hunter 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter05/06_particles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Particles 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter05/07_particleEmitter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Particle emitter 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter05/es5/fromFrames.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Rectangle = PIXI.Rectangle, 11 | MovieClip = PIXI.extras.MovieClip; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/pixieAtlas.json").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var pixie = undefined, 30 | su = undefined, 31 | id = undefined; 32 | 33 | function setup() { 34 | 35 | //Create a new instance of SpriteUtilities 36 | su = new SpriteUtilities(PIXI); 37 | 38 | //Create an alias for the texture atlas frame ids 39 | id = resources["images/pixieAtlas.json"].textures; 40 | 41 | //Create an array that references the frames you want to use 42 | var frames = [id["pixie0.png"], id["pixie1.png"], id["pixie2.png"]]; 43 | 44 | //Use the custom `frameSeries` function to create the frames array 45 | //let frames = su.frameSeries(0, 2, "pixie", ".png"); 46 | 47 | //Create a MoveClip from the frames 48 | pixie = new MovieClip(frames); 49 | 50 | //Set the sprite's position and add it to the stage 51 | pixie.position.set(32, 32); 52 | stage.addChild(pixie); 53 | 54 | pixie.play(); 55 | pixie.animationSpeed = 0.1; 56 | console.log(pixie.textures); 57 | 58 | //Start the game loop 59 | gameLoop(); 60 | } 61 | 62 | function gameLoop() { 63 | 64 | //Loop this function 60 times per second 65 | requestAnimationFrame(gameLoop); 66 | 67 | //Run the current state 68 | state(); 69 | 70 | //Render the stage 71 | renderer.render(stage); 72 | } 73 | 74 | function play() {} 75 | //# sourceMappingURL=fromFrames.js.map -------------------------------------------------------------------------------- /chapter05/es5/particleEmitter.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | ParticleContainer = PIXI.ParticleContainer, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Rectangle = PIXI.Rectangle, 11 | MovieClip = PIXI.extras.MovieClip; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | //renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/star.png").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var su = undefined, 30 | d = undefined; 31 | 32 | function setup() { 33 | 34 | //Create a new instance of SpriteUtilities 35 | su = new SpriteUtilities(PIXI); 36 | 37 | //Intialize Dust 38 | d = new Dust(PIXI); 39 | 40 | var stars = new ParticleContainer(15000, { 41 | alpha: true, 42 | scale: true, 43 | rotation: true, 44 | uvs: true 45 | }); 46 | 47 | stage.addChild(stars); 48 | 49 | //Create star particles 50 | var particleStream = d.emitter(100, function () { 51 | return d.create(128, 128, function () { 52 | return su.sprite("images/star.png"); 53 | }, stars, 30, 0.1, false, 3.14, 6.28, 16, 32, 2, 5); 54 | }); 55 | 56 | particleStream.play(); 57 | 58 | //Start the game loop 59 | gameLoop(); 60 | } 61 | 62 | function gameLoop() { 63 | 64 | //Loop this function 60 times per second 65 | requestAnimationFrame(gameLoop); 66 | 67 | //Run the current state 68 | state(); 69 | 70 | //Update the particles 71 | d.update(); 72 | 73 | //Render the stage 74 | renderer.render(stage); 75 | } 76 | 77 | function play() {} 78 | //# sourceMappingURL=particleEmitter.js.map -------------------------------------------------------------------------------- /chapter05/es5/particles.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | ParticleContainer = PIXI.ParticleContainer, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Rectangle = PIXI.Rectangle, 11 | MovieClip = PIXI.extras.MovieClip; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | //renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/star.png").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var su = undefined, 30 | d = undefined; 31 | 32 | function setup() { 33 | 34 | //Create a new instance of SpriteUtilities 35 | su = new SpriteUtilities(PIXI); 36 | 37 | //Intialize Dust 38 | d = new Dust(PIXI); 39 | 40 | //Optionally add the particles to a high-perforamnce 41 | //`ParticleContainer` 42 | /* 43 | let starContainer = new ParticleContainer( 44 | 15000, 45 | {alpha: true, scale: true, rotation: true, uvs: true} 46 | ); 47 | stage.addChild(starContainer); 48 | */ 49 | 50 | //Create star particles 51 | var stars = d.create(128, 128, function () { 52 | return su.sprite("images/star.png"); 53 | }, stage, 50); 54 | 55 | //The `create` function returns an array of all the 56 | //particle sprites. 57 | console.log(stars); 58 | 59 | //Start the game loop 60 | gameLoop(); 61 | } 62 | 63 | function gameLoop() { 64 | 65 | //Loop this function 60 times per second 66 | requestAnimationFrame(gameLoop); 67 | 68 | //Run the current state 69 | state(); 70 | 71 | //Render the stage 72 | renderer.render(stage); 73 | } 74 | 75 | function play() { 76 | 77 | //Update Dust 78 | d.update(); 79 | } 80 | //# sourceMappingURL=particles.js.map -------------------------------------------------------------------------------- /chapter05/es5/particles.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/particles.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,iBAAiB,GAAG,IAAI,CAAC,iBAAiB;IAC1C,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC,SAAS;IAC1B,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;;;AAGpC,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;;;;AAIhD,MAAM,CACH,GAAG,CAAC,iBAAiB,CAAC,CACtB,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,EAAE,YAAA;IAAE,CAAC,YAAA,CAAC;;AAEV,SAAS,KAAK,GAAG;;;AAGf,IAAE,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;;;AAG/B,GAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;;AAanB,MAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAClB,GAAG,EAAE,GAAG,EACR;WAAM,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC;GAAA,EAClC,KAAK,EACL,EAAE,CACH,CAAC;;;;AAIF,SAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;;;AAGnB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG;;;AAGd,GAAC,CAAC,MAAM,EAAE,CAAC;CACZ","file":"particles.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n ParticleContainer = PIXI.ParticleContainer,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Rectangle = PIXI.Rectangle,\n MovieClip = PIXI.extras.MovieClip;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\n//renderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"images/star.png\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet su, d;\n\nfunction setup() {\n\n //Create a new instance of SpriteUtilities\n su = new SpriteUtilities(PIXI); \n\n //Intialize Dust\n d = new Dust(PIXI);\n\n //Optionally add the particles to a high-perforamnce\n //`ParticleContainer`\n /*\n let starContainer = new ParticleContainer(\n 15000,\n {alpha: true, scale: true, rotation: true, uvs: true}\n );\n stage.addChild(starContainer);\n */\n\n //Create star particles\n let stars = d.create(\n 128, 128, \n () => su.sprite(\"images/star.png\"),\n stage,\n 50\n );\n\n //The `create` function returns an array of all the \n //particle sprites.\n console.log(stars);\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n //Update Dust\n d.update();\n}\n\n"]} -------------------------------------------------------------------------------- /chapter05/es5/tilesetFilmstrip.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Rectangle = PIXI.Rectangle, 11 | MovieClip = PIXI.extras.MovieClip; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/pixieFrames.png").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var pixie = undefined, 30 | su = undefined; 31 | 32 | function setup() { 33 | 34 | //Create a new instance of SpriteUtilities 35 | su = new SpriteUtilities(PIXI); 36 | 37 | //Use the custom `frameSeries` function to create the frames array 38 | var frames = su.filmstrip("images/pixieFrames.png", 48, 32); 39 | 40 | //Create a MoveClip from the frames 41 | pixie = new MovieClip(frames); 42 | 43 | //Set the sprite's position and add it to the stage 44 | pixie.position.set(32, 32); 45 | stage.addChild(pixie); 46 | 47 | pixie.play(); 48 | pixie.animationSpeed = 0.1; 49 | 50 | //Start the game loop 51 | gameLoop(); 52 | } 53 | 54 | function gameLoop() { 55 | 56 | //Loop this function 60 times per second 57 | requestAnimationFrame(gameLoop); 58 | 59 | //Run the current state 60 | state(); 61 | 62 | //Render the stage 63 | renderer.render(stage); 64 | } 65 | 66 | function play() {} 67 | //# sourceMappingURL=tilesetFilmstrip.js.map -------------------------------------------------------------------------------- /chapter05/es5/tilesetFilmstrip.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/tilesetFilmstrip.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;IACjC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC,SAAS;IAC1B,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;;;AAGpC,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,wBAAwB,CAAC,CAC7B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,KAAK,YAAA;IAAE,EAAE,YAAA,CAAC;;AAEd,SAAS,KAAK,GAAG;;;AAGf,IAAE,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;;;AAG/B,MAAI,MAAM,GAAG,EAAE,CAAC,SAAS,CAAC,wBAAwB,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;AAG5D,OAAK,GAAG,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC;;;AAG9B,OAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAC3B,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;AAEtB,OAAK,CAAC,IAAI,EAAE,CAAC;AACb,OAAK,CAAC,cAAc,GAAG,GAAG,CAAC;;;AAG3B,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG,EAEf","file":"tilesetFilmstrip.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n resources = PIXI.loader.resources,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Rectangle = PIXI.Rectangle,\n MovieClip = PIXI.extras.MovieClip;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"images/pixieFrames.png\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet pixie, su;\n\nfunction setup() {\n\n //Create a new instance of SpriteUtilities\n su = new SpriteUtilities(PIXI);\n\n //Use the custom `frameSeries` function to create the frames array\n let frames = su.filmstrip(\"images/pixieFrames.png\", 48, 32);\n\n //Create a MoveClip from the frames\n pixie = new MovieClip(frames);\n\n //Set the sprite's position and add it to the stage\n pixie.position.set(32, 32);\n stage.addChild(pixie);\n\n pixie.play();\n pixie.animationSpeed = 0.1;\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n}\n\n"]} -------------------------------------------------------------------------------- /chapter05/es6/.fromTextures.js.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/es6/.fromTextures.js.swp -------------------------------------------------------------------------------- /chapter05/es6/.tilesetFilmstrip.js.swn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/es6/.tilesetFilmstrip.js.swn -------------------------------------------------------------------------------- /chapter05/es6/fromFrames.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Rectangle = PIXI.Rectangle, 9 | MovieClip = PIXI.extras.MovieClip; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/pixieAtlas.json") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let pixie, su, id; 30 | 31 | function setup() { 32 | 33 | //Create a new instance of SpriteUtilities 34 | su = new SpriteUtilities(PIXI); 35 | 36 | //Create an alias for the texture atlas frame ids 37 | id = resources["images/pixieAtlas.json"].textures; 38 | 39 | //Create an array that references the frames you want to use 40 | let frames = [ 41 | id["pixie0.png"], 42 | id["pixie1.png"], 43 | id["pixie2.png"] 44 | ]; 45 | 46 | //Use the custom `frameSeries` function to create the frames array 47 | //let frames = su.frameSeries(0, 2, "pixie", ".png"); 48 | 49 | //Create a MoveClip from the frames 50 | pixie = new MovieClip(frames); 51 | 52 | //Set the sprite's position and add it to the stage 53 | pixie.position.set(32, 32); 54 | stage.addChild(pixie); 55 | 56 | pixie.play(); 57 | pixie.animationSpeed = 0.1; 58 | console.log(pixie.textures) 59 | 60 | //Start the game loop 61 | gameLoop(); 62 | } 63 | 64 | function gameLoop(){ 65 | 66 | //Loop this function 60 times per second 67 | requestAnimationFrame(gameLoop); 68 | 69 | //Run the current state 70 | state(); 71 | 72 | //Render the stage 73 | renderer.render(stage); 74 | } 75 | 76 | function play() { 77 | 78 | } 79 | 80 | -------------------------------------------------------------------------------- /chapter05/es6/particleEmitter.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | ParticleContainer = PIXI.ParticleContainer, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Rectangle = PIXI.Rectangle, 9 | MovieClip = PIXI.extras.MovieClip; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | //renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/star.png") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let su, d; 30 | 31 | function setup() { 32 | 33 | //Create a new instance of SpriteUtilities 34 | su = new SpriteUtilities(PIXI); 35 | 36 | //Intialize Dust 37 | d = new Dust(PIXI); 38 | 39 | let stars = new ParticleContainer( 40 | 15000, 41 | { 42 | alpha: true, 43 | scale: true, 44 | rotation: true, 45 | uvs: true 46 | } 47 | ); 48 | 49 | stage.addChild(stars); 50 | 51 | //Create star particles 52 | let particleStream = d.emitter( 53 | 100, 54 | () => d.create( 55 | 128, 128, 56 | () => su.sprite("images/star.png"), 57 | stars, 58 | 30, 59 | 0.1, 60 | false, 61 | 3.14, 6.28, 62 | 16, 32, 63 | 2, 5 64 | ) 65 | ); 66 | 67 | particleStream.play(); 68 | 69 | //Start the game loop 70 | gameLoop(); 71 | } 72 | 73 | function gameLoop(){ 74 | 75 | //Loop this function 60 times per second 76 | requestAnimationFrame(gameLoop); 77 | 78 | //Run the current state 79 | state(); 80 | 81 | //Update the particles 82 | d.update(); 83 | 84 | //Render the stage 85 | renderer.render(stage); 86 | } 87 | 88 | function play() { 89 | 90 | } 91 | 92 | -------------------------------------------------------------------------------- /chapter05/es6/particles.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | ParticleContainer = PIXI.ParticleContainer, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Rectangle = PIXI.Rectangle, 9 | MovieClip = PIXI.extras.MovieClip; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | //renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/star.png") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let su, d; 30 | 31 | function setup() { 32 | 33 | //Create a new instance of SpriteUtilities 34 | su = new SpriteUtilities(PIXI); 35 | 36 | //Intialize Dust 37 | d = new Dust(PIXI); 38 | 39 | //Optionally add the particles to a high-perforamnce 40 | //`ParticleContainer` 41 | /* 42 | let starContainer = new ParticleContainer( 43 | 15000, 44 | {alpha: true, scale: true, rotation: true, uvs: true} 45 | ); 46 | stage.addChild(starContainer); 47 | */ 48 | 49 | //Create star particles 50 | let stars = d.create( 51 | 128, 128, 52 | () => su.sprite("images/star.png"), 53 | stage, 54 | 50 55 | ); 56 | 57 | //The `create` function returns an array of all the 58 | //particle sprites. 59 | console.log(stars); 60 | 61 | //Start the game loop 62 | gameLoop(); 63 | } 64 | 65 | function gameLoop(){ 66 | 67 | //Loop this function 60 times per second 68 | requestAnimationFrame(gameLoop); 69 | 70 | //Run the current state 71 | state(); 72 | 73 | //Render the stage 74 | renderer.render(stage); 75 | } 76 | 77 | function play() { 78 | 79 | //Update Dust 80 | d.update(); 81 | } 82 | 83 | -------------------------------------------------------------------------------- /chapter05/es6/tilesetFilmstrip.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Rectangle = PIXI.Rectangle, 9 | MovieClip = PIXI.extras.MovieClip; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/pixieFrames.png") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let pixie, su; 30 | 31 | function setup() { 32 | 33 | //Create a new instance of SpriteUtilities 34 | su = new SpriteUtilities(PIXI); 35 | 36 | //Use the custom `frameSeries` function to create the frames array 37 | let frames = su.filmstrip("images/pixieFrames.png", 48, 32); 38 | 39 | //Create a MoveClip from the frames 40 | pixie = new MovieClip(frames); 41 | 42 | //Set the sprite's position and add it to the stage 43 | pixie.position.set(32, 32); 44 | stage.addChild(pixie); 45 | 46 | pixie.play(); 47 | pixie.animationSpeed = 0.1; 48 | 49 | //Start the game loop 50 | gameLoop(); 51 | } 52 | 53 | function gameLoop(){ 54 | 55 | //Loop this function 60 times per second 56 | requestAnimationFrame(gameLoop); 57 | 58 | //Run the current state 59 | state(); 60 | 61 | //Render the stage 62 | renderer.render(stage); 63 | } 64 | 65 | function play() { 66 | 67 | } 68 | 69 | -------------------------------------------------------------------------------- /chapter05/images/adventuress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/adventuress.png -------------------------------------------------------------------------------- /chapter05/images/pixie0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/pixie0.png -------------------------------------------------------------------------------- /chapter05/images/pixie1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/pixie1.png -------------------------------------------------------------------------------- /chapter05/images/pixie2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/pixie2.png -------------------------------------------------------------------------------- /chapter05/images/pixieAtlas.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "pixie0.png": 4 | { 5 | "frame": {"x":2,"y":2,"w":48,"h":32}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 9 | "sourceSize": {"w":48,"h":32}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "pixie1.png": 13 | { 14 | "frame": {"x":2,"y":36,"w":48,"h":32}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 18 | "sourceSize": {"w":48,"h":32}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "pixie2.png": 22 | { 23 | "frame": {"x":2,"y":70,"w":48,"h":32}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 27 | "sourceSize": {"w":48,"h":32}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }}, 30 | "meta": { 31 | "app": "http://www.codeandweb.com/texturepacker", 32 | "version": "1.0", 33 | "image": "pixieAtlas.png", 34 | "format": "RGBA8888", 35 | "size": {"w":52,"h":104}, 36 | "scale": "1", 37 | "smartupdate": "$TexturePacker:SmartUpdate:df70885208ad6a9a18b70d3ad687fd96:4dbd194d0c37549bdff850cec7f6292d:f650d989e9809a4ef7e3cb8b62e80685$" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter05/images/pixieAtlas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/pixieAtlas.png -------------------------------------------------------------------------------- /chapter05/images/pixieFrames.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/pixieFrames.png -------------------------------------------------------------------------------- /chapter05/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/star.png -------------------------------------------------------------------------------- /chapter05/images/tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/tileset.png -------------------------------------------------------------------------------- /chapter05/images/treasureHunter.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "blob.png": 4 | { 5 | "frame": {"x":55,"y":2,"w":32,"h":24}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24}, 9 | "sourceSize": {"w":32,"h":24}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "door.png": 13 | { 14 | "frame": {"x":89,"y":2,"w":32,"h":32}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 18 | "sourceSize": {"w":32,"h":32}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "dungeon.png": 22 | { 23 | "frame": {"x":2,"y":36,"w":512,"h":512}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":512,"h":512}, 27 | "sourceSize": {"w":512,"h":512}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }, 30 | "explorer.png": 31 | { 32 | "frame": {"x":2,"y":2,"w":21,"h":32}, 33 | "rotated": false, 34 | "trimmed": false, 35 | "spriteSourceSize": {"x":0,"y":0,"w":21,"h":32}, 36 | "sourceSize": {"w":21,"h":32}, 37 | "pivot": {"x":0.5,"y":0.5} 38 | }, 39 | "treasure.png": 40 | { 41 | "frame": {"x":25,"y":2,"w":28,"h":24}, 42 | "rotated": false, 43 | "trimmed": false, 44 | "spriteSourceSize": {"x":0,"y":0,"w":28,"h":24}, 45 | "sourceSize": {"w":28,"h":24}, 46 | "pivot": {"x":0.5,"y":0.5} 47 | }}, 48 | "meta": { 49 | "app": "http://www.codeandweb.com/texturepacker", 50 | "version": "1.0", 51 | "image": "treasureHunter.png", 52 | "format": "RGBA8888", 53 | "size": {"w":516,"h":550}, 54 | "scale": "1", 55 | "smartupdate": "$TexturePacker:SmartUpdate:7436ef99382129f1f187e060cc7d5e94:3923663e59fb40b578d66a492a2cda2d:9995f8b4db1ac3cb75651b1542df8ee2$" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /chapter05/images/treasureHunter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter05/images/treasureHunter.png -------------------------------------------------------------------------------- /chapter06/01_tilingSprites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tiling sprite 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/02_scrolling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Scrolling 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/03_generateTexture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Generate texture 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/04_renderTexture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Render texture 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/05_tinting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tinting 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/06_masking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Masking 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/07_blendModes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Blend modes 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/08_filters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Blend modes 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/09_rope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Rope 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter06/10_tweening.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tweening 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter06/11_sceneTransitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Rope 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter06/12_motionPaths.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Motion paths 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter06/es5/blendModes.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Sprite = PIXI.Sprite, 11 | RenderTexture = PIXI.RenderTexture, 12 | TilingSprite = PIXI.extras.TilingSprite; 13 | 14 | //Create a Pixi stage and renderer 15 | var stage = new Container(), 16 | renderer = autoDetectRenderer(256, 256); 17 | document.body.appendChild(renderer.view); 18 | 19 | //Set the canvas's border style and background color 20 | renderer.view.style.border = "1px dashed black"; 21 | renderer.backgroundColor = "0xFFFFFF"; 22 | 23 | //load resources (images and fonts) 24 | loader.add("images/animals.json").load(setup); 25 | 26 | //Set the initial game state 27 | var state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | var cat = undefined, 31 | hedgehog = undefined, 32 | tiger = undefined, 33 | id = undefined; 34 | 35 | function setup() { 36 | 37 | //An alias for the texture atlas frame ids 38 | id = resources["images/animals.json"].textures; 39 | 40 | cat = new Sprite(id["cat.png"]); 41 | cat.position.set(32, 32); 42 | cat.scale.set(2, 2); 43 | cat.alpha = 0.5; 44 | cat.blendMode = PIXI.BLEND_MODES.MULTIPLY; 45 | stage.addChild(cat); 46 | 47 | hedgehog = new Sprite(id["hedgehog.png"]); 48 | hedgehog.position.set(64, 64); 49 | hedgehog.scale.set(2, 2); 50 | hedgehog.alpha = 0.5; 51 | hedgehog.blendMode = PIXI.BLEND_MODES.MULTIPLY; 52 | stage.addChild(hedgehog); 53 | 54 | tiger = new Sprite(id["tiger.png"]); 55 | tiger.position.set(96, 96); 56 | tiger.scale.set(2, 2); 57 | tiger.alpha = 0.5; 58 | tiger.blendMode = PIXI.BLEND_MODES.MULTIPLY; 59 | stage.addChild(tiger); 60 | 61 | //Start the game loop 62 | gameLoop(); 63 | } 64 | 65 | function gameLoop() { 66 | 67 | //Loop this function 60 times per second 68 | requestAnimationFrame(gameLoop); 69 | 70 | //Run the current state 71 | state(); 72 | 73 | //Render the stage 74 | renderer.render(stage); 75 | } 76 | 77 | function play() {} 78 | //# sourceMappingURL=blendModes.js.map -------------------------------------------------------------------------------- /chapter06/es5/filters.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Sprite = PIXI.Sprite, 11 | RenderTexture = PIXI.RenderTexture, 12 | TilingSprite = PIXI.extras.TilingSprite; 13 | 14 | //Create a Pixi stage and renderer 15 | var stage = new Container(), 16 | renderer = autoDetectRenderer(256, 256); 17 | document.body.appendChild(renderer.view); 18 | 19 | //Set the canvas's border style and background color 20 | renderer.view.style.border = "1px dashed black"; 21 | renderer.backgroundColor = "0xFFFFFF"; 22 | 23 | //load resources (images and fonts) 24 | loader.add("images/animals.json").load(setup); 25 | 26 | //Set the initial game state 27 | var state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | var cat = undefined, 31 | hedgehog = undefined, 32 | tiger = undefined, 33 | id = undefined; 34 | 35 | function setup() { 36 | 37 | //An alias for the texture atlas frame ids 38 | id = resources["images/animals.json"].textures; 39 | 40 | cat = new Sprite(id["cat.png"]); 41 | cat.position.set(64, 64); 42 | cat.scale.set(2, 2); 43 | stage.addChild(cat); 44 | 45 | var filter = new PIXI.filters.BlurFilter(); 46 | filter.blur = 20; 47 | cat.filters = [filter]; 48 | 49 | //Start the game loop 50 | gameLoop(); 51 | } 52 | 53 | function gameLoop() { 54 | 55 | //Loop this function 60 times per second 56 | requestAnimationFrame(gameLoop); 57 | 58 | //Run the current state 59 | state(); 60 | 61 | //Render the stage 62 | renderer.render(stage); 63 | } 64 | 65 | function play() {} 66 | //# sourceMappingURL=filters.js.map -------------------------------------------------------------------------------- /chapter06/es5/filters.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/filters.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;IACjC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,aAAa,GAAG,IAAI,CAAC,aAAa;IAClC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;;;AAG1C,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,qBAAqB,CAAC,CAC1B,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,GAAG,YAAA;IAAE,QAAQ,YAAA;IAAE,KAAK,YAAA;IAAE,EAAE,YAAA,CAAC;;AAE7B,SAAS,KAAK,GAAG;;;AAGf,IAAE,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC,QAAQ,CAAC;;AAE/C,KAAG,GAAG,IAAI,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAChC,KAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACzB,KAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACpB,OAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;;AAEpB,MAAI,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;AAC3C,QAAM,CAAC,IAAI,GAAG,EAAE,CAAC;AACjB,KAAG,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;;;AAGvB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG,EAEf","file":"filters.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n resources = PIXI.loader.resources,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Sprite = PIXI.Sprite,\n RenderTexture = PIXI.RenderTexture,\n TilingSprite = PIXI.extras.TilingSprite;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"images/animals.json\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet cat, hedgehog, tiger, id;\n\nfunction setup() {\n\n //An alias for the texture atlas frame ids\n id = resources[\"images/animals.json\"].textures;\n\n cat = new Sprite(id[\"cat.png\"]);\n cat.position.set(64, 64);\n cat.scale.set(2, 2);\n stage.addChild(cat);\n\n let filter = new PIXI.filters.BlurFilter();\n filter.blur = 20;\n cat.filters = [filter];\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n \n}\n\n"]} -------------------------------------------------------------------------------- /chapter06/es5/generateTexture.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Texture = PIXI.Texture, 9 | Sprite = PIXI.Sprite, 10 | Graphics = PIXI.Graphics; 11 | 12 | //Create a Pixi stage and renderer 13 | var stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //Set the initial game state 22 | var state = play; 23 | 24 | setup(); 25 | 26 | //Define any variables that are used in more than one function 27 | 28 | function setup() { 29 | 30 | //Triangle 31 | var triangle = new Graphics(); 32 | triangle.beginFill(16724736); 33 | triangle.lineStyle(4, 3368601, 1); 34 | triangle.moveTo(0, 0); 35 | triangle.lineTo(-64, 64); 36 | triangle.lineTo(64, 64); 37 | triangle.lineTo(0, 0); 38 | triangle.endFill(); 39 | 40 | //The x/y position is the first point of the triangle 41 | triangle.x = 92; 42 | triangle.y = 32; 43 | stage.addChild(triangle); 44 | 45 | var triangleTexture = triangle.generateTexture(); 46 | var triangleSprite = new Sprite(triangleTexture); 47 | triangleSprite.position.set(92, 128); 48 | 49 | stage.addChild(triangleSprite); 50 | 51 | //Start the game loop 52 | gameLoop(); 53 | } 54 | 55 | function gameLoop() { 56 | 57 | //Loop this function 60 times per second 58 | requestAnimationFrame(gameLoop); 59 | 60 | //Run the current state 61 | state(); 62 | 63 | //Render the stage 64 | renderer.render(stage); 65 | } 66 | 67 | function play() {} 68 | //# sourceMappingURL=generateTexture.js.map -------------------------------------------------------------------------------- /chapter06/es5/masking.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Sprite = PIXI.Sprite, 11 | Graphics = PIXI.Graphics; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/animals.json").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var cat = undefined, 30 | id = undefined; 31 | 32 | function setup() { 33 | 34 | //An alias for the texture atlas frame ids 35 | id = resources["images/animals.json"].textures; 36 | 37 | //Make a sprite 38 | cat = new Sprite(id["cat.png"]); 39 | cat.position.set(32, 32); 40 | cat.scale.set(3, 3); 41 | stage.addChild(cat); 42 | 43 | //Make a rectangle 44 | var rectangle = new Graphics(); 45 | rectangle.beginFill(16711680); 46 | rectangle.drawRect(0, 0, 128, 128); 47 | rectangle.endFill(); 48 | rectangle.x = 64; 49 | rectangle.y = 64; 50 | stage.addChild(rectangle); 51 | 52 | //Mask the cat with the rectangle 53 | cat.mask = rectangle; 54 | 55 | //Start the game loop 56 | gameLoop(); 57 | } 58 | 59 | function gameLoop() { 60 | 61 | //Loop this function 60 times per second 62 | requestAnimationFrame(gameLoop); 63 | 64 | //Run the current state 65 | state(); 66 | 67 | //Render the stage 68 | renderer.render(stage); 69 | } 70 | 71 | function play() {} 72 | //# sourceMappingURL=masking.js.map -------------------------------------------------------------------------------- /chapter06/es5/renderTexture.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Texture = PIXI.Texture, 9 | Sprite = PIXI.Sprite, 10 | RenderTexture = PIXI.RenderTexture, 11 | TilingSprite = PIXI.extras.TilingSprite; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/tile.png").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var renderTexture = undefined, 30 | spriteOne = undefined, 31 | spriteTwo = undefined; 32 | 33 | function setup() { 34 | 35 | spriteOne = TilingSprite.fromImage("images/tile.png", 128, 128); 36 | spriteOne.position.set(16, 16); 37 | stage.addChild(spriteOne); 38 | 39 | renderTexture = new RenderTexture(renderer, 128, 128); 40 | spriteTwo = new Sprite(renderTexture); 41 | spriteTwo.position.set(108, 108); 42 | stage.addChild(spriteTwo); 43 | 44 | renderTexture.render(spriteOne); 45 | 46 | //Start the game loop 47 | gameLoop(); 48 | } 49 | 50 | function gameLoop() { 51 | 52 | //Loop this function 60 times per second 53 | requestAnimationFrame(gameLoop); 54 | 55 | //Run the current state 56 | state(); 57 | 58 | //Render the stage 59 | renderer.render(stage); 60 | } 61 | 62 | function play() { 63 | 64 | spriteOne.tilePosition.x += 1; 65 | spriteOne.tilePosition.y += 1; 66 | 67 | renderTexture.render(spriteOne); 68 | } 69 | //# sourceMappingURL=renderTexture.js.map -------------------------------------------------------------------------------- /chapter06/es5/rope.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Texture = PIXI.Texture, 9 | Sprite = PIXI.Sprite, 10 | Point = PIXI.Point, 11 | Rope = PIXI.mesh.Rope, 12 | RenderTexture = PIXI.RenderTexture, 13 | TilingSprite = PIXI.extras.TilingSprite; 14 | 15 | //Create a Pixi stage and renderer 16 | var stage = new Container(), 17 | renderer = autoDetectRenderer(750, 300); 18 | document.body.appendChild(renderer.view); 19 | 20 | //Set the canvas's border style and background color 21 | renderer.view.style.border = "1px dashed black"; 22 | renderer.backgroundColor = "0xFFFFFF"; 23 | 24 | //load resources (images and fonts) 25 | loader.add("images/snake.png").load(setup); 26 | 27 | //Set the initial game state 28 | var state = play; 29 | 30 | //Define any variables that are used in more than one function 31 | var points = undefined, 32 | counter = undefined, 33 | ropeSegment = undefined, 34 | numberOfSegments = undefined, 35 | imageWidth = undefined; 36 | 37 | function setup() { 38 | 39 | //Figure out the length of each rope segment. We want a rope with 40 | //20 segments, so divide the length of the image, which is 600 41 | //pixels, by 20 42 | numberOfSegments = 20; 43 | imageWidth = 600; 44 | ropeSegment = imageWidth / numberOfSegments; 45 | 46 | //Create an array of 20 Point object, one for each rope segment 47 | points = []; 48 | for (var i = 0; i < numberOfSegments; i++) { 49 | points.push(new Point(i * ropeSegment, 0)); 50 | } 51 | 52 | //Create the snake as a `Rope` object. The first argument is the 53 | //texture, the second is the `points` array 54 | var snake = new Rope(TextureCache["images/snake.png"], points); 55 | 56 | //Add the snake to a container, so it's easier to position 57 | var snakeContainer = new Container(); 58 | snakeContainer.addChild(snake); 59 | 60 | //Add the container to the stage and position it 61 | stage.addChild(snakeContainer); 62 | snakeContainer.position.set(64, 128); 63 | 64 | //Intialize the counter variable 65 | counter = 0; 66 | 67 | //Start the game loop 68 | gameLoop(); 69 | } 70 | 71 | function gameLoop() { 72 | 73 | //Loop this function 60 times per second 74 | requestAnimationFrame(gameLoop); 75 | 76 | //Run the current state 77 | state(); 78 | 79 | //Render the stage 80 | renderer.render(stage); 81 | } 82 | 83 | function play() { 84 | 85 | //Increment the counter 86 | counter += 0.1; 87 | 88 | //Loop through all the points and shift them in a circular 89 | //pattern to produce the rippling effect. 90 | for (var i = 0; i < points.length; i++) { 91 | points[i].y = Math.sin(i * 0.5 + counter) * 30; 92 | points[i].x = i * ropeSegment + Math.cos(i * 0.3 + counter) * numberOfSegments; 93 | } 94 | } 95 | //# sourceMappingURL=rope.js.map -------------------------------------------------------------------------------- /chapter06/es5/scrolling.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Texture = PIXI.Texture, 9 | Sprite = PIXI.Sprite, 10 | TilingSprite = PIXI.extras.TilingSprite; 11 | 12 | //Create a Pixi stage and renderer 13 | var stage = new Container(), 14 | renderer = autoDetectRenderer(512, 512); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load resources (images and fonts) 22 | loader.add("images/clouds.png").load(setup); 23 | 24 | //Set the initial game state 25 | var state = play; 26 | 27 | //Define any variables that are used in more than one function 28 | var clouds = undefined; 29 | 30 | function setup() { 31 | 32 | clouds = TilingSprite.fromImage("images/clouds.png", 800, 800); 33 | //clouds.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 34 | 35 | stage.addChild(clouds); 36 | 37 | //Start the game loop 38 | gameLoop(); 39 | } 40 | 41 | function gameLoop() { 42 | 43 | //Loop this function 60 times per second 44 | requestAnimationFrame(gameLoop); 45 | 46 | //Run the current state 47 | state(); 48 | 49 | //Render the stage 50 | renderer.render(stage); 51 | } 52 | 53 | function play() { 54 | 55 | clouds.tilePosition.x -= 1; 56 | } 57 | //# sourceMappingURL=scrolling.js.map -------------------------------------------------------------------------------- /chapter06/es5/scrolling.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/scrolling.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;;;AAG1C,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,mBAAmB,CAAC,CACxB,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,MAAM,YAAA,CAAC;;AAEX,SAAS,KAAK,GAAG;;AAEf,QAAM,GAAG,YAAY,CAAC,SAAS,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;;;AAG/D,OAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;;;AAGvB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG;;AAEd,QAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC;CAE5B","file":"scrolling.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Sprite = PIXI.Sprite,\n TilingSprite = PIXI.extras.TilingSprite;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"images/clouds.png\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet clouds;\n\nfunction setup() {\n\n clouds = TilingSprite.fromImage(\"images/clouds.png\", 800, 800);\n //clouds.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;\n \n stage.addChild(clouds);\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n clouds.tilePosition.x -= 1;\n\n}\n\n"]} -------------------------------------------------------------------------------- /chapter06/es5/tilingSprites.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Sprite = PIXI.Sprite, 11 | TilingSprite = PIXI.extras.TilingSprite; 12 | 13 | //Create a Pixi stage and renderer 14 | var stage = new Container(), 15 | renderer = autoDetectRenderer(256, 256); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader.add("images/tile.png").load(setup); 24 | 25 | //Set the initial game state 26 | var state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | var tilingSprite = undefined; 30 | 31 | function setup() { 32 | 33 | tilingSprite = new TilingSprite(TextureCache["images/tile.png"], 192, 192); 34 | 35 | //Alternatively, you can make a tiling sprite from a texture like this: 36 | //let texture = TextureCache["images/tile.png"]; 37 | //tilingSprite = new TilingSprite(texture, 192, 192); 38 | 39 | tilingSprite.position.set(32, 32); 40 | stage.addChild(tilingSprite); 41 | 42 | //Optionally offset the tile's x and y positions 43 | /* 44 | tilingSprite.tilePosition.x = 32; 45 | tilingSprite.tilePosition.y = 32; 46 | */ 47 | 48 | //Optionally change the tile's scale 49 | //tilingSprite.tileScale.x = 1.5; 50 | //tilingSprite.tileScale.y = 1.5; 51 | 52 | //Start the game loop 53 | gameLoop(); 54 | } 55 | 56 | function gameLoop() { 57 | 58 | //Loop this function 60 times per second 59 | requestAnimationFrame(gameLoop); 60 | 61 | //Run the current state 62 | state(); 63 | 64 | //Render the stage 65 | renderer.render(stage); 66 | } 67 | 68 | function play() {} 69 | //# sourceMappingURL=tilingSprites.js.map -------------------------------------------------------------------------------- /chapter06/es5/tilingSprites.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/tilingSprites.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;IACjC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;;;AAG1C,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,iBAAiB,CAAC,CACtB,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,YAAY,YAAA,CAAC;;AAEjB,SAAS,KAAK,GAAG;;AAEf,cAAY,GAAG,IAAI,YAAY,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;;;;;;AAM3E,cAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAClC,OAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;;;;;;;;;;;;;AAc7B,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG,EAEf","file":"tilingSprites.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n resources = PIXI.loader.resources,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Sprite = PIXI.Sprite,\n TilingSprite = PIXI.extras.TilingSprite;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"images/tile.png\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet tilingSprite;\n\nfunction setup() {\n\n tilingSprite = new TilingSprite(TextureCache[\"images/tile.png\"], 192, 192);\n\n //Alternatively, you can make a tiling sprite from a texture like this:\n //let texture = TextureCache[\"images/tile.png\"];\n //tilingSprite = new TilingSprite(texture, 192, 192);\n\n tilingSprite.position.set(32, 32);\n stage.addChild(tilingSprite);\n\n //Optionally offset the tile's x and y positions\n /*\n tilingSprite.tilePosition.x = 32;\n tilingSprite.tilePosition.y = 32; \n */\n\n //Optionally change the tile's scale\n //tilingSprite.tileScale.x = 1.5;\n //tilingSprite.tileScale.y = 1.5;\n \n \n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n}\n\n"]} -------------------------------------------------------------------------------- /chapter06/es5/tinting.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | TextureCache = PIXI.utils.TextureCache, 9 | Texture = PIXI.Texture, 10 | Sprite = PIXI.Sprite, 11 | RenderTexture = PIXI.RenderTexture, 12 | TilingSprite = PIXI.extras.TilingSprite; 13 | 14 | //Create a Pixi stage and renderer 15 | var stage = new Container(), 16 | renderer = autoDetectRenderer(256, 256); 17 | document.body.appendChild(renderer.view); 18 | 19 | //Set the canvas's border style and background color 20 | renderer.view.style.border = "1px dashed black"; 21 | renderer.backgroundColor = "0xFFFFFF"; 22 | 23 | //load resources (images and fonts) 24 | loader.add("images/animals.json").load(setup); 25 | 26 | //Set the initial game state 27 | var state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | var cat = undefined, 31 | hedgehog = undefined, 32 | tiger = undefined, 33 | id = undefined; 34 | 35 | function setup() { 36 | 37 | //An alias for the texture atlas frame ids 38 | id = resources["images/animals.json"].textures; 39 | 40 | cat = new Sprite(id["cat.png"]); 41 | cat.position.set(32, 32); 42 | stage.addChild(cat); 43 | 44 | hedgehog = new Sprite(id["hedgehog.png"]); 45 | hedgehog.position.set(96, 96); 46 | stage.addChild(hedgehog); 47 | 48 | tiger = new Sprite(id["tiger.png"]); 49 | tiger.position.set(160, 160); 50 | stage.addChild(tiger); 51 | 52 | //Change the tint 53 | cat.tint = 16774752; 54 | tiger.tint = 6750054; 55 | hedgehog.tint = 16737894; 56 | 57 | //Start the game loop 58 | gameLoop(); 59 | } 60 | 61 | function gameLoop() { 62 | 63 | //Loop this function 60 times per second 64 | requestAnimationFrame(gameLoop); 65 | 66 | //Run the current state 67 | state(); 68 | 69 | //Render the stage 70 | renderer.render(stage); 71 | } 72 | 73 | function play() {} 74 | //# sourceMappingURL=tinting.js.map -------------------------------------------------------------------------------- /chapter06/es5/video.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | loader = PIXI.loader, 7 | TextureCache = PIXI.utils.TextureCache, 8 | Texture = PIXI.Texture, 9 | Sprite = PIXI.Sprite, 10 | RenderTexture = PIXI.RenderTexture, 11 | resources = PIXI.loader.resources, 12 | TilingSprite = PIXI.extras.TilingSprite; 13 | 14 | //Create a Pixi stage and renderer 15 | var stage = new Container(), 16 | renderer = autoDetectRenderer(256, 256); 17 | document.body.appendChild(renderer.view); 18 | 19 | //Set the canvas's border style and background color 20 | renderer.view.style.border = "1px dashed black"; 21 | renderer.backgroundColor = "0xFFFFFF"; 22 | 23 | //load resources (images and fonts) 24 | loader.add("video/how.mp4").load(setup); 25 | 26 | //Set the initial game state 27 | var state = play; 28 | 29 | function setup() { 30 | 31 | console.log("loaded"); 32 | 33 | var videoTexture = new PIXI.VideoBaseTexture.fromUrl("video/how.mp4"); 34 | var video = new Sprite(videoTexture); 35 | stage.addChild(video); 36 | 37 | var videoSource = videoTexture.baseTexture.source; 38 | videoSource.play(); 39 | /* 40 | let videoTexture = Texture.fromVideo("video/how.mp4"); 41 | let videoSprite = new Sprite(videoTexture); 42 | stage.addChild(videoSprite); 43 | 44 | let videoSource = videoTexture.baseTexture.source; 45 | videoSource.play(); 46 | */ 47 | 48 | //Start the game loop 49 | gameLoop(); 50 | } 51 | 52 | function gameLoop() { 53 | 54 | //Loop this function 60 times per second 55 | requestAnimationFrame(gameLoop); 56 | 57 | //Run the current state 58 | state(); 59 | //Render the stage 60 | renderer.render(stage); 61 | } 62 | 63 | function play() {} 64 | //# sourceMappingURL=video.js.map -------------------------------------------------------------------------------- /chapter06/es5/video.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/video.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB;IAC5C,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;IACtC,OAAO,GAAG,IAAI,CAAC,OAAO;IACtB,MAAM,GAAG,IAAI,CAAC,MAAM;IACpB,aAAa,GAAG,IAAI,CAAC,aAAa;IAClC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS;IACjC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;;;AAG1C,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;AAGtC,MAAM,CACH,GAAG,CAAC,eAAe,CAAC,CACpB,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAGf,IAAI,KAAK,GAAG,IAAI,CAAC;;AAEjB,SAAS,KAAK,GAAG;;AAEf,SAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;;AAEtB,MAAI,YAAY,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;AACtE,MAAI,KAAK,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,CAAC;AACrC,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;AAEtB,MAAI,WAAW,GAAG,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC;AAClD,aAAW,CAAC,IAAI,EAAE,CAAC;;;;;;;;;;;AAYnB,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;AAER,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG,EAEf","file":"video.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer,\n loader = PIXI.loader,\n TextureCache = PIXI.utils.TextureCache,\n Texture = PIXI.Texture,\n Sprite = PIXI.Sprite,\n RenderTexture = PIXI.RenderTexture,\n resources = PIXI.loader.resources,\n TilingSprite = PIXI.extras.TilingSprite;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(256, 256);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//load resources (images and fonts)\nloader\n .add(\"video/how.mp4\")\n .load(setup);\n\n//Set the initial game state\nlet state = play;\n\nfunction setup() {\n\n console.log(\"loaded\");\n\n let videoTexture = new PIXI.VideoBaseTexture.fromUrl(\"video/how.mp4\");\n let video = new Sprite(videoTexture);\n stage.addChild(video);\n\n let videoSource = videoTexture.baseTexture.source;\n videoSource.play();\n /* \n let videoTexture = Texture.fromVideo(\"video/how.mp4\");\n let videoSprite = new Sprite(videoTexture);\n stage.addChild(videoSprite);\n \n\n let videoSource = videoTexture.baseTexture.source;\n videoSource.play();\n */\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n}\n\n"]} -------------------------------------------------------------------------------- /chapter06/es6/.motionPaths.js.swn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/es6/.motionPaths.js.swn -------------------------------------------------------------------------------- /chapter06/es6/blendModes.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Sprite = PIXI.Sprite, 9 | RenderTexture = PIXI.RenderTexture, 10 | TilingSprite = PIXI.extras.TilingSprite; 11 | 12 | //Create a Pixi stage and renderer 13 | let stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load resources (images and fonts) 22 | loader 23 | .add("images/animals.json") 24 | .load(setup); 25 | 26 | //Set the initial game state 27 | let state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | let cat, hedgehog, tiger, id; 31 | 32 | function setup() { 33 | 34 | //An alias for the texture atlas frame ids 35 | id = resources["images/animals.json"].textures; 36 | 37 | cat = new Sprite(id["cat.png"]); 38 | cat.position.set(32, 32); 39 | cat.scale.set(2, 2); 40 | cat.alpha = 0.5; 41 | cat.blendMode = PIXI.BLEND_MODES.MULTIPLY; 42 | stage.addChild(cat); 43 | 44 | hedgehog = new Sprite(id["hedgehog.png"]); 45 | hedgehog.position.set(64, 64); 46 | hedgehog.scale.set(2, 2); 47 | hedgehog.alpha = 0.5; 48 | hedgehog.blendMode = PIXI.BLEND_MODES.MULTIPLY; 49 | stage.addChild(hedgehog); 50 | 51 | tiger = new Sprite(id["tiger.png"]); 52 | tiger.position.set(96, 96); 53 | tiger.scale.set(2, 2); 54 | tiger.alpha = 0.5; 55 | tiger.blendMode = PIXI.BLEND_MODES.MULTIPLY; 56 | stage.addChild(tiger); 57 | 58 | 59 | //Start the game loop 60 | gameLoop(); 61 | } 62 | 63 | function gameLoop(){ 64 | 65 | //Loop this function 60 times per second 66 | requestAnimationFrame(gameLoop); 67 | 68 | //Run the current state 69 | state(); 70 | 71 | //Render the stage 72 | renderer.render(stage); 73 | } 74 | 75 | function play() { 76 | 77 | } 78 | 79 | -------------------------------------------------------------------------------- /chapter06/es6/filters.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Sprite = PIXI.Sprite, 9 | RenderTexture = PIXI.RenderTexture, 10 | TilingSprite = PIXI.extras.TilingSprite; 11 | 12 | //Create a Pixi stage and renderer 13 | let stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load resources (images and fonts) 22 | loader 23 | .add("images/animals.json") 24 | .load(setup); 25 | 26 | //Set the initial game state 27 | let state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | let cat, hedgehog, tiger, id; 31 | 32 | function setup() { 33 | 34 | //An alias for the texture atlas frame ids 35 | id = resources["images/animals.json"].textures; 36 | 37 | cat = new Sprite(id["cat.png"]); 38 | cat.position.set(64, 64); 39 | cat.scale.set(2, 2); 40 | stage.addChild(cat); 41 | 42 | let filter = new PIXI.filters.BlurFilter(); 43 | filter.blur = 20; 44 | cat.filters = [filter]; 45 | 46 | //Start the game loop 47 | gameLoop(); 48 | } 49 | 50 | function gameLoop(){ 51 | 52 | //Loop this function 60 times per second 53 | requestAnimationFrame(gameLoop); 54 | 55 | //Run the current state 56 | state(); 57 | 58 | //Render the stage 59 | renderer.render(stage); 60 | } 61 | 62 | function play() { 63 | 64 | } 65 | 66 | -------------------------------------------------------------------------------- /chapter06/es6/generateTexture.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | TextureCache = PIXI.utils.TextureCache, 6 | Texture = PIXI.Texture, 7 | Sprite = PIXI.Sprite, 8 | Graphics = PIXI.Graphics; 9 | 10 | //Create a Pixi stage and renderer 11 | let stage = new Container(), 12 | renderer = autoDetectRenderer(256, 256); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //Set the initial game state 20 | let state = play; 21 | 22 | setup(); 23 | 24 | //Define any variables that are used in more than one function 25 | 26 | function setup() { 27 | 28 | //Triangle 29 | let triangle = new Graphics(); 30 | triangle.beginFill(0xFF3300); 31 | triangle.lineStyle(4, 0x336699, 1); 32 | triangle.moveTo(0,0); 33 | triangle.lineTo(-64, 64); 34 | triangle.lineTo(64, 64); 35 | triangle.lineTo(0, 0); 36 | triangle.endFill(); 37 | 38 | //The x/y position is the first point of the triangle 39 | triangle.x = 92; 40 | triangle.y = 32; 41 | stage.addChild(triangle); 42 | 43 | let triangleTexture = triangle.generateTexture(); 44 | let triangleSprite = new Sprite(triangleTexture); 45 | triangleSprite.position.set(92, 128); 46 | 47 | stage.addChild(triangleSprite); 48 | 49 | //Start the game loop 50 | gameLoop(); 51 | } 52 | 53 | function gameLoop(){ 54 | 55 | //Loop this function 60 times per second 56 | requestAnimationFrame(gameLoop); 57 | 58 | //Run the current state 59 | state(); 60 | 61 | //Render the stage 62 | renderer.render(stage); 63 | } 64 | 65 | function play() { 66 | 67 | } 68 | 69 | -------------------------------------------------------------------------------- /chapter06/es6/masking.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Sprite = PIXI.Sprite, 9 | Graphics = PIXI.Graphics; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/animals.json") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let cat, id; 30 | 31 | function setup() { 32 | 33 | //An alias for the texture atlas frame ids 34 | id = resources["images/animals.json"].textures; 35 | 36 | //Make a sprite 37 | cat = new Sprite(id["cat.png"]); 38 | cat.position.set(32, 32); 39 | cat.scale.set(3, 3); 40 | stage.addChild(cat); 41 | 42 | //Make a rectangle 43 | let rectangle = new Graphics(); 44 | rectangle.beginFill(0xFF0000); 45 | rectangle.drawRect(0, 0, 128, 128); 46 | rectangle.endFill(); 47 | rectangle.x = 64; 48 | rectangle.y = 64; 49 | stage.addChild(rectangle); 50 | 51 | //Mask the cat with the rectangle 52 | cat.mask = rectangle; 53 | 54 | //Start the game loop 55 | gameLoop(); 56 | } 57 | 58 | function gameLoop(){ 59 | 60 | //Loop this function 60 times per second 61 | requestAnimationFrame(gameLoop); 62 | 63 | //Run the current state 64 | state(); 65 | 66 | //Render the stage 67 | renderer.render(stage); 68 | } 69 | 70 | function play() { 71 | 72 | } 73 | 74 | -------------------------------------------------------------------------------- /chapter06/es6/renderTexture.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | TextureCache = PIXI.utils.TextureCache, 6 | Texture = PIXI.Texture, 7 | Sprite = PIXI.Sprite, 8 | RenderTexture = PIXI.RenderTexture, 9 | TilingSprite = PIXI.extras.TilingSprite; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/tile.png") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let renderTexture, spriteOne, spriteTwo; 30 | 31 | function setup() { 32 | 33 | spriteOne = TilingSprite.fromImage("images/tile.png", 128, 128); 34 | spriteOne.position.set(16, 16); 35 | stage.addChild(spriteOne); 36 | 37 | renderTexture = new RenderTexture(renderer, 128, 128); 38 | spriteTwo = new Sprite(renderTexture); 39 | spriteTwo.position.set(108, 108); 40 | stage.addChild(spriteTwo); 41 | 42 | renderTexture.render(spriteOne); 43 | 44 | //Start the game loop 45 | gameLoop(); 46 | } 47 | 48 | function gameLoop(){ 49 | 50 | //Loop this function 60 times per second 51 | requestAnimationFrame(gameLoop); 52 | 53 | //Run the current state 54 | state(); 55 | 56 | //Render the stage 57 | renderer.render(stage); 58 | } 59 | 60 | function play() { 61 | 62 | 63 | spriteOne.tilePosition.x += 1; 64 | spriteOne.tilePosition.y += 1; 65 | 66 | renderTexture.render(spriteOne); 67 | 68 | } 69 | 70 | -------------------------------------------------------------------------------- /chapter06/es6/rope.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | TextureCache = PIXI.utils.TextureCache, 6 | Texture = PIXI.Texture, 7 | Sprite = PIXI.Sprite, 8 | Point = PIXI.Point, 9 | Rope = PIXI.mesh.Rope, 10 | RenderTexture = PIXI.RenderTexture, 11 | TilingSprite = PIXI.extras.TilingSprite; 12 | 13 | //Create a Pixi stage and renderer 14 | let stage = new Container(), 15 | renderer = autoDetectRenderer(750, 300); 16 | document.body.appendChild(renderer.view); 17 | 18 | //Set the canvas's border style and background color 19 | renderer.view.style.border = "1px dashed black"; 20 | renderer.backgroundColor = "0xFFFFFF"; 21 | 22 | //load resources (images and fonts) 23 | loader 24 | .add("images/snake.png") 25 | .load(setup); 26 | 27 | //Set the initial game state 28 | let state = play; 29 | 30 | //Define any variables that are used in more than one function 31 | let points, counter, ropeSegment, numberOfSegments, imageWidth; 32 | 33 | function setup() { 34 | 35 | //Figure out the length of each rope segment. We want a rope with 36 | //20 segments, so divide the length of the image, which is 600 37 | //pixels, by 20 38 | numberOfSegments = 20; 39 | imageWidth = 600; 40 | ropeSegment = imageWidth / numberOfSegments; 41 | 42 | //Create an array of 20 Point object, one for each rope segment 43 | points = []; 44 | for (let i = 0; i < numberOfSegments; i++) { 45 | points.push(new Point(i * ropeSegment, 0)); 46 | } 47 | 48 | //Create the snake as a `Rope` object. The first argument is the 49 | //texture, the second is the `points` array 50 | let snake = new Rope(TextureCache["images/snake.png"], points); 51 | 52 | //Add the snake to a container, so it's easier to position 53 | let snakeContainer = new Container(); 54 | snakeContainer.addChild(snake); 55 | 56 | //Add the container to the stage and position it 57 | stage.addChild(snakeContainer); 58 | snakeContainer.position.set(64, 128); 59 | 60 | //Intialize the counter variable 61 | counter = 0; 62 | 63 | //Start the game loop 64 | gameLoop(); 65 | } 66 | 67 | function gameLoop(){ 68 | 69 | //Loop this function 60 times per second 70 | requestAnimationFrame(gameLoop); 71 | 72 | //Run the current state 73 | state(); 74 | 75 | //Render the stage 76 | renderer.render(stage); 77 | } 78 | 79 | function play() { 80 | 81 | //Increment the counter 82 | counter += 0.1; 83 | 84 | //Loop through all the points and shift them in a circular 85 | //pattern to produce the rippling effect. 86 | for (let i = 0; i < points.length; i++) { 87 | points[i].y = Math.sin((i * 0.5) + counter) * 30; 88 | points[i].x = i * ropeSegment + Math.cos((i * 0.3) + counter) * numberOfSegments; 89 | } 90 | } 91 | 92 | -------------------------------------------------------------------------------- /chapter06/es6/scrolling.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | TextureCache = PIXI.utils.TextureCache, 6 | Texture = PIXI.Texture, 7 | Sprite = PIXI.Sprite, 8 | TilingSprite = PIXI.extras.TilingSprite; 9 | 10 | //Create a Pixi stage and renderer 11 | let stage = new Container(), 12 | renderer = autoDetectRenderer(512, 512); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //load resources (images and fonts) 20 | loader 21 | .add("images/clouds.png") 22 | .load(setup); 23 | 24 | //Set the initial game state 25 | let state = play; 26 | 27 | //Define any variables that are used in more than one function 28 | let clouds; 29 | 30 | function setup() { 31 | 32 | clouds = TilingSprite.fromImage("images/clouds.png", 800, 800); 33 | //clouds.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 34 | 35 | stage.addChild(clouds); 36 | 37 | //Start the game loop 38 | gameLoop(); 39 | } 40 | 41 | function gameLoop(){ 42 | 43 | //Loop this function 60 times per second 44 | requestAnimationFrame(gameLoop); 45 | 46 | //Run the current state 47 | state(); 48 | 49 | //Render the stage 50 | renderer.render(stage); 51 | } 52 | 53 | function play() { 54 | 55 | clouds.tilePosition.x -= 1; 56 | 57 | } 58 | 59 | -------------------------------------------------------------------------------- /chapter06/es6/tilingSprites.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Sprite = PIXI.Sprite, 9 | TilingSprite = PIXI.extras.TilingSprite; 10 | 11 | //Create a Pixi stage and renderer 12 | let stage = new Container(), 13 | renderer = autoDetectRenderer(256, 256); 14 | document.body.appendChild(renderer.view); 15 | 16 | //Set the canvas's border style and background color 17 | renderer.view.style.border = "1px dashed black"; 18 | renderer.backgroundColor = "0xFFFFFF"; 19 | 20 | //load resources (images and fonts) 21 | loader 22 | .add("images/tile.png") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let tilingSprite; 30 | 31 | function setup() { 32 | 33 | tilingSprite = new TilingSprite(TextureCache["images/tile.png"], 192, 192); 34 | 35 | //Alternatively, you can make a tiling sprite from a texture like this: 36 | //let texture = TextureCache["images/tile.png"]; 37 | //tilingSprite = new TilingSprite(texture, 192, 192); 38 | 39 | tilingSprite.position.set(32, 32); 40 | stage.addChild(tilingSprite); 41 | 42 | //Optionally offset the tile's x and y positions 43 | /* 44 | tilingSprite.tilePosition.x = 32; 45 | tilingSprite.tilePosition.y = 32; 46 | */ 47 | 48 | //Optionally change the tile's scale 49 | //tilingSprite.tileScale.x = 1.5; 50 | //tilingSprite.tileScale.y = 1.5; 51 | 52 | 53 | //Start the game loop 54 | gameLoop(); 55 | } 56 | 57 | function gameLoop(){ 58 | 59 | //Loop this function 60 times per second 60 | requestAnimationFrame(gameLoop); 61 | 62 | //Run the current state 63 | state(); 64 | 65 | //Render the stage 66 | renderer.render(stage); 67 | } 68 | 69 | function play() { 70 | 71 | } 72 | 73 | -------------------------------------------------------------------------------- /chapter06/es6/tinting.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | loader = PIXI.loader, 5 | resources = PIXI.loader.resources, 6 | TextureCache = PIXI.utils.TextureCache, 7 | Texture = PIXI.Texture, 8 | Sprite = PIXI.Sprite, 9 | RenderTexture = PIXI.RenderTexture, 10 | TilingSprite = PIXI.extras.TilingSprite; 11 | 12 | //Create a Pixi stage and renderer 13 | let stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //load resources (images and fonts) 22 | loader 23 | .add("images/animals.json") 24 | .load(setup); 25 | 26 | //Set the initial game state 27 | let state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | let cat, hedgehog, tiger, id; 31 | 32 | function setup() { 33 | 34 | //An alias for the texture atlas frame ids 35 | id = resources["images/animals.json"].textures; 36 | 37 | cat = new Sprite(id["cat.png"]); 38 | cat.position.set(32, 32); 39 | stage.addChild(cat); 40 | 41 | hedgehog = new Sprite(id["hedgehog.png"]); 42 | hedgehog.position.set(96, 96); 43 | stage.addChild(hedgehog); 44 | 45 | tiger = new Sprite(id["tiger.png"]); 46 | tiger.position.set(160, 160); 47 | stage.addChild(tiger); 48 | 49 | //Change the tint 50 | cat.tint = 0xFFF660; 51 | tiger.tint = 0x66FF66; 52 | hedgehog.tint = 0xFF6666; 53 | 54 | //Start the game loop 55 | gameLoop(); 56 | } 57 | 58 | function gameLoop(){ 59 | 60 | //Loop this function 60 times per second 61 | requestAnimationFrame(gameLoop); 62 | 63 | //Run the current state 64 | state(); 65 | 66 | //Render the stage 67 | renderer.render(stage); 68 | } 69 | 70 | function play() { 71 | 72 | } 73 | 74 | -------------------------------------------------------------------------------- /chapter06/fonts/puzzler.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/fonts/puzzler.otf -------------------------------------------------------------------------------- /chapter06/images/animals.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "cat.png": 4 | { 5 | "frame": {"x":2,"y":2,"w":64,"h":64}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 9 | "sourceSize": {"w":64,"h":64}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "hedgehog.png": 13 | { 14 | "frame": {"x":68,"y":2,"w":64,"h":64}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 18 | "sourceSize": {"w":64,"h":64}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "tiger.png": 22 | { 23 | "frame": {"x":134,"y":2,"w":64,"h":64}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 27 | "sourceSize": {"w":64,"h":64}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }}, 30 | "meta": { 31 | "app": "http://www.codeandweb.com/texturepacker", 32 | "version": "1.0", 33 | "image": "animals.png", 34 | "format": "RGBA8888", 35 | "size": {"w":200,"h":68}, 36 | "scale": "1", 37 | "smartupdate": "$TexturePacker:SmartUpdate:aa42b222ddb3faeafaa3b7c9f66556ee:15b03a4eb0cd5b5d361ef8988283677a:b00d48b51f56eb7c81e25100fcce2828$" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter06/images/animals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/images/animals.png -------------------------------------------------------------------------------- /chapter06/images/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/images/clouds.png -------------------------------------------------------------------------------- /chapter06/images/pixie96x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/images/pixie96x48.png -------------------------------------------------------------------------------- /chapter06/images/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/images/snake.png -------------------------------------------------------------------------------- /chapter06/images/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter06/images/tile.png -------------------------------------------------------------------------------- /chapter07/01_pointer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pointer 4 | 5 |

6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chapter07/02_spriteInteractivity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Sprite interactivity 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter07/03_dragAndDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Drag and drop 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter07/04_button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Drag and drop 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter07/05_interactiveSprite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Drag and drop 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /chapter07/06_pixiePerilousness.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pixie Perilousness! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter07/es5/dragAndDrop.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer, 6 | Graphics = PIXI.Graphics, 7 | Sprite = PIXI.Sprite, 8 | loader = PIXI.loader, 9 | resources = PIXI.loader.resources, 10 | Text = PIXI.Text; 11 | 12 | //Create a Pixi stage and renderer 13 | var stage = new Container(), 14 | renderer = autoDetectRenderer(256, 256); 15 | document.body.appendChild(renderer.view); 16 | 17 | //Set the canvas's border style and background color 18 | renderer.view.style.border = "1px dashed black"; 19 | renderer.backgroundColor = "0xFFFFFF"; 20 | 21 | //let scale = scaleToWindow(renderer.view); 22 | 23 | //load resources 24 | loader.add("images/animals.json").load(setup); 25 | 26 | //Set the initial game state 27 | var state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | var t = undefined, 31 | pointer = undefined, 32 | rectangle = undefined, 33 | circle = undefined, 34 | id = undefined, 35 | cat = undefined, 36 | tiger = undefined, 37 | hedgehog = undefined, 38 | draggableObjects = undefined; 39 | 40 | function setup() { 41 | 42 | //Create a new instance of Tink 43 | t = new Tink(PIXI, renderer.view); 44 | 45 | //Get a reference to the texture atlas id's 46 | id = resources["images/animals.json"].textures; 47 | 48 | //The cat 49 | cat = new Sprite(id["cat.png"]); 50 | cat.position.set(32, 32); 51 | 52 | //The hedgehog 53 | hedgehog = new Sprite(id["hedgehog.png"]); 54 | hedgehog.position.set(64, 64); 55 | 56 | //The tiger 57 | tiger = new Sprite(id["tiger.png"]); 58 | tiger.position.set(96, 96); 59 | 60 | //Create a container for the draggable objects and 61 | //add the sprites to it 62 | draggableObjects = new Container(); 63 | draggableObjects.addChild(cat); 64 | draggableObjects.addChild(hedgehog); 65 | draggableObjects.addChild(tiger); 66 | 67 | //Add the `draggableObjects` to the stage 68 | stage.addChild(draggableObjects); 69 | 70 | //Make the sprites draggable 71 | t.makeDraggable(cat, tiger, hedgehog); 72 | 73 | //Optionally create a `pointer` object 74 | //pointer = t.makePointer(); 75 | 76 | //Start the game loop 77 | gameLoop(); 78 | } 79 | 80 | function gameLoop() { 81 | 82 | //Loop this function 60 times per second 83 | requestAnimationFrame(gameLoop); 84 | 85 | //Run the current state 86 | state(); 87 | 88 | //Update Tink 89 | t.update(); 90 | 91 | //Render the stage 92 | renderer.render(stage); 93 | } 94 | 95 | function play() {} 96 | //# sourceMappingURL=dragAndDrop.js.map -------------------------------------------------------------------------------- /chapter07/es5/pointer.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | "use strict"; 3 | 4 | var Container = PIXI.Container, 5 | autoDetectRenderer = PIXI.autoDetectRenderer; 6 | 7 | //Create a Pixi stage and renderer 8 | var stage = new Container(), 9 | renderer = autoDetectRenderer(512, 512); 10 | document.body.appendChild(renderer.view); 11 | 12 | //Set the canvas's border style and background color 13 | renderer.view.style.border = "1px dashed black"; 14 | renderer.backgroundColor = "0xFFFFFF"; 15 | 16 | //let scale = scaleToWindow(renderer.view); 17 | 18 | //Set the initial game state 19 | var state = play; 20 | 21 | //Define any variables that are used in more than one function 22 | var t = undefined, 23 | pointer = undefined; 24 | 25 | setup(); 26 | 27 | function setup() { 28 | 29 | //Create a new instance of Tink 30 | t = new Tink(PIXI, renderer.view); 31 | 32 | //Create a `pointer` object 33 | pointer = t.makePointer(); 34 | 35 | //Add a custom `press` method 36 | pointer.press = function () { 37 | return console.log("The pointer was pressed"); 38 | }; 39 | 40 | //Add a custom `release` method 41 | pointer.release = function () { 42 | return console.log("The pointer was released"); 43 | }; 44 | 45 | //Add a custom `tap` method 46 | pointer.tap = function () { 47 | return console.log("The pointer was tapped"); 48 | }; 49 | 50 | //Start the game loop 51 | gameLoop(); 52 | } 53 | 54 | function gameLoop() { 55 | 56 | //Loop this function 60 times per second 57 | requestAnimationFrame(gameLoop); 58 | 59 | //Run the current state 60 | state(); 61 | 62 | //Update Tink 63 | t.update(); 64 | 65 | //Render the stage 66 | renderer.render(stage); 67 | } 68 | 69 | function play() { 70 | 71 | //Display the pointer properties in the 72 | //HTML

tag called `output` 73 | output.innerHTML = "Pointer properties:
\n pointer.x: " + pointer.x + "
\n pointer.y: " + pointer.y + "
\n pointer.isDown: " + pointer.isDown + "
\n pointer.isUp: " + pointer.isUp + "
\n pointer.tapped: " + pointer.tapped; 74 | } 75 | //# sourceMappingURL=pointer.js.map -------------------------------------------------------------------------------- /chapter07/es5/pointer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/pointer.js"],"names":[],"mappings":";;;AACA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS;IAC5B,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;;;AAG/C,IAAI,KAAK,GAAG,IAAI,SAAS,EAAE;IACzB,QAAQ,GAAG,kBAAkB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,CAAC;AAChD,QAAQ,CAAC,eAAe,GAAG,UAAU,CAAC;;;;;AAKtC,IAAI,KAAK,GAAG,IAAI,CAAC;;;AAGjB,IAAI,CAAC,YAAA;IAAE,OAAO,YAAA,CAAC;;AAEf,KAAK,EAAE,CAAC;;AAER,SAAS,KAAK,GAAG;;;AAGf,GAAC,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;;;AAGlC,SAAO,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;;;AAG1B,SAAO,CAAC,KAAK,GAAG;WAAM,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC;GAAA,CAAC;;;AAG7D,SAAO,CAAC,OAAO,GAAG;WAAM,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC;GAAA,CAAC;;;AAGhE,SAAO,CAAC,GAAG,GAAG;WAAM,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC;GAAA,CAAC;;;AAG1D,UAAQ,EAAE,CAAC;CACZ;;AAED,SAAS,QAAQ,GAAE;;;AAGjB,uBAAqB,CAAC,QAAQ,CAAC,CAAC;;;AAGhC,OAAK,EAAE,CAAC;;;AAGR,GAAC,CAAC,MAAM,EAAE,CAAC;;;AAGX,UAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CACxB;;AAED,SAAS,IAAI,GAAG;;;;AAId,QAAM,CAAC,SAAS,iDAED,OAAO,CAAC,CAAC,8BACT,OAAO,CAAC,CAAC,mCACJ,OAAO,CAAC,MAAM,iCAChB,OAAO,CAAC,IAAI,mCACV,OAAO,CAAC,MAAM,AAAE,CAAC;CACtC","file":"pointer.js","sourcesContent":["//Aliases\nlet Container = PIXI.Container,\n autoDetectRenderer = PIXI.autoDetectRenderer;\n\n//Create a Pixi stage and renderer\nlet stage = new Container(),\n renderer = autoDetectRenderer(512, 512);\ndocument.body.appendChild(renderer.view);\n\n//Set the canvas's border style and background color\nrenderer.view.style.border = \"1px dashed black\";\nrenderer.backgroundColor = \"0xFFFFFF\";\n\n//let scale = scaleToWindow(renderer.view);\n\n//Set the initial game state\nlet state = play;\n\n//Define any variables that are used in more than one function\nlet t, pointer;\n\nsetup();\n \nfunction setup() {\n\n //Create a new instance of Tink\n t = new Tink(PIXI, renderer.view);\n\n //Create a `pointer` object\n pointer = t.makePointer();\n\n //Add a custom `press` method\n pointer.press = () => console.log(\"The pointer was pressed\");\n\n //Add a custom `release` method\n pointer.release = () => console.log(\"The pointer was released\");\n\n //Add a custom `tap` method\n pointer.tap = () => console.log(\"The pointer was tapped\");\n\n //Start the game loop\n gameLoop();\n}\n\nfunction gameLoop(){\n\n //Loop this function 60 times per second\n requestAnimationFrame(gameLoop);\n\n //Run the current state\n state();\n\n //Update Tink\n t.update();\n\n //Render the stage\n renderer.render(stage);\n}\n\nfunction play() {\n\n //Display the pointer properties in the \n //HTML

tag called `output`\n output.innerHTML\n = `Pointer properties:
\n pointer.x: ${pointer.x}
\n pointer.y: ${pointer.y}
\n pointer.isDown: ${pointer.isDown}
\n pointer.isUp: ${pointer.isUp}
\n pointer.tapped: ${pointer.tapped}`;\n}\n"]} -------------------------------------------------------------------------------- /chapter07/es6/button.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | Sprite = PIXI.Sprite, 5 | loader = PIXI.loader, 6 | resources = PIXI.loader.resources, 7 | Text = PIXI.Text; 8 | 9 | //Create a Pixi stage and renderer 10 | let stage = new Container(), 11 | renderer = autoDetectRenderer(256, 256); 12 | document.body.appendChild(renderer.view); 13 | 14 | //Set the canvas's border style and background color 15 | renderer.view.style.border = "1px dashed black"; 16 | renderer.backgroundColor = "0xFFFFFF"; 17 | 18 | //let scale = scaleToWindow(renderer.view); 19 | 20 | //load resources 21 | loader 22 | .add("images/button.json") 23 | .load(setup); 24 | 25 | //Set the initial game state 26 | let state = play; 27 | 28 | //Define any variables that are used in more than one function 29 | let t, playButton, id, stateMessage, actionMessage; 30 | 31 | function setup() { 32 | 33 | //Create a new instance of Tink 34 | t = new Tink(PIXI, renderer.view); 35 | 36 | //Get a reference to the texture atlas id's 37 | id = resources["images/button.json"].textures; 38 | 39 | //The button state textures 40 | let buttonFrames = [ 41 | id["up.png"], 42 | id["over.png"], 43 | id["down.png"] 44 | ]; 45 | 46 | //The `playButton` 47 | playButton = t.button(buttonFrames, 32, 96); 48 | 49 | //Add the button to the stage 50 | stage.addChild(playButton); 51 | 52 | //Define the button's actions 53 | playButton.over = () => console.log("over"); 54 | playButton.out = () => console.log("out"); 55 | playButton.press = () => console.log("pressed"); 56 | playButton.release = () => console.log("released"); 57 | playButton.tap = () => console.log("tapped"); 58 | 59 | //Add the `stageMessage` 60 | stateMessage = new Text( 61 | "State: ", 62 | {font: "18px Futura", fill: "black"} 63 | ); 64 | stateMessage.position.set(8, 8); 65 | stage.addChild(stateMessage); 66 | 67 | //Add the `actionMessage` 68 | actionMessage = new Text( 69 | "Action: ", 70 | {font: "18px Futura", fill: "black"} 71 | ); 72 | actionMessage.position.set(8, 32); 73 | stage.addChild(actionMessage); 74 | 75 | //Optionally create a `pointer` object 76 | //pointer = t.makePointer(); 77 | 78 | //Start the game loop 79 | gameLoop(); 80 | } 81 | 82 | function gameLoop(){ 83 | 84 | //Loop this function 60 times per second 85 | requestAnimationFrame(gameLoop); 86 | 87 | //Run the current state 88 | state(); 89 | 90 | //Update Tink 91 | t.update(); 92 | 93 | //Render the stage 94 | renderer.render(stage); 95 | } 96 | 97 | function play() { 98 | stateMessage.text = `State: ${playButton.state}`; 99 | actionMessage.text = `Action: ${playButton.action}`; 100 | } 101 | -------------------------------------------------------------------------------- /chapter07/es6/dragAndDrop.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | Graphics = PIXI.Graphics, 5 | Sprite = PIXI.Sprite, 6 | loader = PIXI.loader, 7 | resources = PIXI.loader.resources, 8 | Text = PIXI.Text; 9 | 10 | //Create a Pixi stage and renderer 11 | let stage = new Container(), 12 | renderer = autoDetectRenderer(256, 256); 13 | document.body.appendChild(renderer.view); 14 | 15 | //Set the canvas's border style and background color 16 | renderer.view.style.border = "1px dashed black"; 17 | renderer.backgroundColor = "0xFFFFFF"; 18 | 19 | //let scale = scaleToWindow(renderer.view); 20 | 21 | //load resources 22 | loader 23 | .add("images/animals.json") 24 | .load(setup); 25 | 26 | //Set the initial game state 27 | let state = play; 28 | 29 | //Define any variables that are used in more than one function 30 | let t, pointer, rectangle, circle, id, cat, tiger, 31 | hedgehog, draggableObjects; 32 | 33 | function setup() { 34 | 35 | //Create a new instance of Tink 36 | t = new Tink(PIXI, renderer.view); 37 | 38 | //Get a reference to the texture atlas id's 39 | id = resources["images/animals.json"].textures; 40 | 41 | //The cat 42 | cat = new Sprite(id["cat.png"]); 43 | cat.position.set(32, 32); 44 | 45 | //The hedgehog 46 | hedgehog = new Sprite(id["hedgehog.png"]); 47 | hedgehog.position.set(64, 64); 48 | 49 | //The tiger 50 | tiger = new Sprite(id["tiger.png"]); 51 | tiger.position.set(96, 96); 52 | 53 | //Create a container for the draggable objects and 54 | //add the sprites to it 55 | draggableObjects = new Container(); 56 | draggableObjects.addChild(cat); 57 | draggableObjects.addChild(hedgehog); 58 | draggableObjects.addChild(tiger); 59 | 60 | //Add the `draggableObjects` to the stage 61 | stage.addChild(draggableObjects); 62 | 63 | //Make the sprites draggable 64 | t.makeDraggable(cat, tiger, hedgehog); 65 | 66 | //Optionally create a `pointer` object 67 | //pointer = t.makePointer(); 68 | 69 | //Start the game loop 70 | gameLoop(); 71 | } 72 | 73 | function gameLoop(){ 74 | 75 | //Loop this function 60 times per second 76 | requestAnimationFrame(gameLoop); 77 | 78 | //Run the current state 79 | state(); 80 | 81 | //Update Tink 82 | t.update(); 83 | 84 | //Render the stage 85 | renderer.render(stage); 86 | } 87 | 88 | function play() { 89 | 90 | } 91 | -------------------------------------------------------------------------------- /chapter07/es6/pointer.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer; 4 | 5 | //Create a Pixi stage and renderer 6 | let stage = new Container(), 7 | renderer = autoDetectRenderer(512, 512); 8 | document.body.appendChild(renderer.view); 9 | 10 | //Set the canvas's border style and background color 11 | renderer.view.style.border = "1px dashed black"; 12 | renderer.backgroundColor = "0xFFFFFF"; 13 | 14 | //let scale = scaleToWindow(renderer.view); 15 | 16 | //Set the initial game state 17 | let state = play; 18 | 19 | //Define any variables that are used in more than one function 20 | let t, pointer; 21 | 22 | setup(); 23 | 24 | function setup() { 25 | 26 | //Create a new instance of Tink 27 | t = new Tink(PIXI, renderer.view); 28 | 29 | //Create a `pointer` object 30 | pointer = t.makePointer(); 31 | 32 | //Add a custom `press` method 33 | pointer.press = () => console.log("The pointer was pressed"); 34 | 35 | //Add a custom `release` method 36 | pointer.release = () => console.log("The pointer was released"); 37 | 38 | //Add a custom `tap` method 39 | pointer.tap = () => console.log("The pointer was tapped"); 40 | 41 | //Start the game loop 42 | gameLoop(); 43 | } 44 | 45 | function gameLoop(){ 46 | 47 | //Loop this function 60 times per second 48 | requestAnimationFrame(gameLoop); 49 | 50 | //Run the current state 51 | state(); 52 | 53 | //Update Tink 54 | t.update(); 55 | 56 | //Render the stage 57 | renderer.render(stage); 58 | } 59 | 60 | function play() { 61 | 62 | //Display the pointer properties in the 63 | //HTML

tag called `output` 64 | output.innerHTML 65 | = `Pointer properties:
66 | pointer.x: ${pointer.x}
67 | pointer.y: ${pointer.y}
68 | pointer.isDown: ${pointer.isDown}
69 | pointer.isUp: ${pointer.isUp}
70 | pointer.tapped: ${pointer.tapped}`; 71 | } 72 | -------------------------------------------------------------------------------- /chapter07/es6/spriteInteractivity.js: -------------------------------------------------------------------------------- 1 | //Aliases 2 | let Container = PIXI.Container, 3 | autoDetectRenderer = PIXI.autoDetectRenderer, 4 | Graphics = PIXI.Graphics, 5 | Sprite = PIXI.Sprite, 6 | Text = PIXI.Text; 7 | 8 | //Create a Pixi stage and renderer 9 | let stage = new Container(), 10 | renderer = autoDetectRenderer(256, 256); 11 | document.body.appendChild(renderer.view); 12 | 13 | //Set the canvas's border style and background color 14 | renderer.view.style.border = "1px dashed black"; 15 | renderer.backgroundColor = "0xFFFFFF"; 16 | 17 | //let scale = scaleToWindow(renderer.view); 18 | 19 | //Set the initial game state 20 | let state = play; 21 | 22 | //Define any variables that are used in more than one function 23 | let t, pointer, rectangle, circle, message; 24 | 25 | setup(); 26 | 27 | function setup() { 28 | 29 | //Create a new instance of Tink 30 | t = new Tink(PIXI, renderer.view); 31 | 32 | //Make a rectangle and circle 33 | rectangle = new Graphics(); 34 | rectangle.beginFill(0x0033CC); 35 | rectangle.drawRect(0, 0, 64, 64); 36 | rectangle.endFill(); 37 | rectangle.x = 32; 38 | rectangle.y = 64; 39 | stage.addChild(rectangle); 40 | 41 | let circleGraphic = new Graphics(); 42 | circleGraphic.beginFill(0xFF0000); 43 | circleGraphic.drawCircle(0, 0, 32); 44 | circleGraphic.endFill(); 45 | 46 | //If you want the graphic to be anti-aliased, 47 | //convert it into a bitmap texture and then use 48 | //that texture to create a new sprite 49 | let circleTexture = circleGraphic.generateTexture(); 50 | circle = new Sprite(circleTexture); 51 | circle.x = 160; 52 | circle.y = 160; 53 | stage.addChild(circle); 54 | 55 | //Add a `circular` property to the circle 56 | circle.circular = true; 57 | 58 | //Create a `pointer` object 59 | pointer = t.makePointer(); 60 | 61 | message = new Text( 62 | "Hello Pixi!", 63 | {font: "18px Futura", fill: "black"} 64 | ); 65 | message.x = 8; 66 | message.y = 8; 67 | 68 | //Add the text to the stage 69 | stage.addChild(message); 70 | 71 | //Start the game loop 72 | gameLoop(); 73 | } 74 | 75 | function gameLoop(){ 76 | 77 | //Loop this function 60 times per second 78 | requestAnimationFrame(gameLoop); 79 | 80 | //Run the current state 81 | state(); 82 | 83 | //Update Tink 84 | t.update(); 85 | 86 | //Render the stage 87 | renderer.render(stage); 88 | } 89 | 90 | function play() { 91 | 92 | if (pointer.hitTestSprite(rectangle)) { 93 | message.text = "Rectangle!"; 94 | pointer.cursor = "pointer"; 95 | } 96 | else if (pointer.hitTestSprite(circle)) { 97 | message.text = "Circle!"; 98 | pointer.cursor = "pointer"; 99 | } 100 | 101 | else { 102 | message.text = "No collision..."; 103 | pointer.cursor = "auto"; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /chapter07/images/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/0.png -------------------------------------------------------------------------------- /chapter07/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/1.png -------------------------------------------------------------------------------- /chapter07/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/2.png -------------------------------------------------------------------------------- /chapter07/images/animals.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "cat.png": 4 | { 5 | "frame": {"x":2,"y":2,"w":64,"h":64}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 9 | "sourceSize": {"w":64,"h":64}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "hedgehog.png": 13 | { 14 | "frame": {"x":68,"y":2,"w":64,"h":64}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 18 | "sourceSize": {"w":64,"h":64}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "tiger.png": 22 | { 23 | "frame": {"x":134,"y":2,"w":64,"h":64}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 27 | "sourceSize": {"w":64,"h":64}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }}, 30 | "meta": { 31 | "app": "http://www.codeandweb.com/texturepacker", 32 | "version": "1.0", 33 | "image": "animals.png", 34 | "format": "RGBA8888", 35 | "size": {"w":200,"h":68}, 36 | "scale": "1", 37 | "smartupdate": "$TexturePacker:SmartUpdate:aa42b222ddb3faeafaa3b7c9f66556ee:15b03a4eb0cd5b5d361ef8988283677a:b00d48b51f56eb7c81e25100fcce2828$" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter07/images/animals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/animals.png -------------------------------------------------------------------------------- /chapter07/images/button.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "down.png": 4 | { 5 | "frame": {"x":2,"y":2,"w":192,"h":96}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":192,"h":96}, 9 | "sourceSize": {"w":192,"h":96}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "over.png": 13 | { 14 | "frame": {"x":196,"y":2,"w":192,"h":96}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":192,"h":96}, 18 | "sourceSize": {"w":192,"h":96}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "up.png": 22 | { 23 | "frame": {"x":390,"y":2,"w":192,"h":96}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":192,"h":96}, 27 | "sourceSize": {"w":192,"h":96}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }}, 30 | "meta": { 31 | "app": "http://www.codeandweb.com/texturepacker", 32 | "version": "1.0", 33 | "image": "button.png", 34 | "format": "RGBA8888", 35 | "size": {"w":584,"h":100}, 36 | "scale": "1", 37 | "smartupdate": "$TexturePacker:SmartUpdate:11c74cd442a4b677289f3ad399b87054:879e99d58591d2495b4355ec40d3e079:c39245c3a59c1712d97d26c862b4cbc5$" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter07/images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/button.png -------------------------------------------------------------------------------- /chapter07/images/clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/clouds.png -------------------------------------------------------------------------------- /chapter07/images/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/down.png -------------------------------------------------------------------------------- /chapter07/images/finish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/finish.png -------------------------------------------------------------------------------- /chapter07/images/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/green.png -------------------------------------------------------------------------------- /chapter07/images/greenBlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/greenBlock.png -------------------------------------------------------------------------------- /chapter07/images/over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/over.png -------------------------------------------------------------------------------- /chapter07/images/pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/pink.png -------------------------------------------------------------------------------- /chapter07/images/pixiePerilousness.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "0.png": 4 | { 5 | "frame": {"x":188,"y":2,"w":48,"h":32}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 9 | "sourceSize": {"w":48,"h":32}, 10 | "pivot": {"x":0.5,"y":0.5} 11 | }, 12 | "1.png": 13 | { 14 | "frame": {"x":138,"y":2,"w":48,"h":32}, 15 | "rotated": false, 16 | "trimmed": false, 17 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 18 | "sourceSize": {"w":48,"h":32}, 19 | "pivot": {"x":0.5,"y":0.5} 20 | }, 21 | "2.png": 22 | { 23 | "frame": {"x":238,"y":2,"w":48,"h":32}, 24 | "rotated": false, 25 | "trimmed": false, 26 | "spriteSourceSize": {"x":0,"y":0,"w":48,"h":32}, 27 | "sourceSize": {"w":48,"h":32}, 28 | "pivot": {"x":0.5,"y":0.5} 29 | }, 30 | "clouds.png": 31 | { 32 | "frame": {"x":2,"y":198,"w":512,"h":512}, 33 | "rotated": false, 34 | "trimmed": false, 35 | "spriteSourceSize": {"x":0,"y":0,"w":512,"h":512}, 36 | "sourceSize": {"w":512,"h":512}, 37 | "pivot": {"x":0.5,"y":0.5} 38 | }, 39 | "finish.png": 40 | { 41 | "frame": {"x":2,"y":68,"w":377,"h":128}, 42 | "rotated": false, 43 | "trimmed": false, 44 | "spriteSourceSize": {"x":0,"y":0,"w":377,"h":128}, 45 | "sourceSize": {"w":377,"h":128}, 46 | "pivot": {"x":0.5,"y":0.5} 47 | }, 48 | "green.png": 49 | { 50 | "frame": {"x":70,"y":2,"w":32,"h":32}, 51 | "rotated": false, 52 | "trimmed": false, 53 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 54 | "sourceSize": {"w":32,"h":32}, 55 | "pivot": {"x":0.5,"y":0.5} 56 | }, 57 | "greenBlock.png": 58 | { 59 | "frame": {"x":288,"y":2,"w":64,"h":64}, 60 | "rotated": false, 61 | "trimmed": false, 62 | "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 63 | "sourceSize": {"w":64,"h":64}, 64 | "pivot": {"x":0.5,"y":0.5} 65 | }, 66 | "pink.png": 67 | { 68 | "frame": {"x":36,"y":2,"w":32,"h":32}, 69 | "rotated": false, 70 | "trimmed": false, 71 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 72 | "sourceSize": {"w":32,"h":32}, 73 | "pivot": {"x":0.5,"y":0.5} 74 | }, 75 | "violet.png": 76 | { 77 | "frame": {"x":2,"y":2,"w":32,"h":32}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 81 | "sourceSize": {"w":32,"h":32}, 82 | "pivot": {"x":0.5,"y":0.5} 83 | }, 84 | "yellow.png": 85 | { 86 | "frame": {"x":104,"y":2,"w":32,"h":32}, 87 | "rotated": false, 88 | "trimmed": false, 89 | "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32}, 90 | "sourceSize": {"w":32,"h":32}, 91 | "pivot": {"x":0.5,"y":0.5} 92 | }}, 93 | "meta": { 94 | "app": "http://www.codeandweb.com/texturepacker", 95 | "version": "1.0", 96 | "image": "pixiePerilousness.png", 97 | "format": "RGBA8888", 98 | "size": {"w":516,"h":712}, 99 | "scale": "1", 100 | "smartupdate": "$TexturePacker:SmartUpdate:f3f91be71403592d969834ad5bc7af1f:ce74fa4c4f38312bd308dde2ff0b3670:62ade53eba9d10066f0416c055f3358c$" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /chapter07/images/pixiePerilousness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/pixiePerilousness.png -------------------------------------------------------------------------------- /chapter07/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/star.png -------------------------------------------------------------------------------- /chapter07/images/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/up.png -------------------------------------------------------------------------------- /chapter07/images/violet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/violet.png -------------------------------------------------------------------------------- /chapter07/images/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/chapter07/images/yellow.png -------------------------------------------------------------------------------- /learnPixiJS.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kittykatattack/learnPixiJS/2f91d4bfeba7c6d5ab8057b2585a2cc2b78bcef3/learnPixiJS.zip --------------------------------------------------------------------------------