├── .gitignore ├── LICENSE.txt ├── README.md ├── config.js ├── dist ├── assets │ ├── basic │ │ ├── bunny.png │ │ ├── fighter.json │ │ ├── fighter.png │ │ ├── shader.frag │ │ ├── snake.png │ │ ├── strip.png │ │ └── tilingsky.jpg │ ├── circle-mask.png │ ├── demo │ │ ├── BGrotate.jpg │ │ ├── LightRotate1.png │ │ ├── LightRotate2.png │ │ ├── SceneRotate.jpg │ │ ├── bkg.jpg │ │ ├── button.png │ │ ├── buttonDown.png │ │ ├── buttonOver.png │ │ ├── button_test_BG.jpg │ │ ├── cells.png │ │ ├── desyrel.png │ │ ├── desyrel.xml │ │ ├── eggHead.png │ │ ├── flowerTop.png │ │ ├── mc.json │ │ ├── mc.png │ │ ├── monsters.json │ │ ├── monsters.png │ │ ├── panda.png │ │ ├── spinObj_01.png │ │ ├── spinObj_02.png │ │ ├── spinObj_03.png │ │ ├── spinObj_04.png │ │ ├── spinObj_05.png │ │ ├── spinObj_06.png │ │ ├── spinObj_07.png │ │ ├── spinObj_08.png │ │ ├── textDemoBG.jpg │ │ └── tinyMaggot.png │ ├── fonts │ │ └── DejaVuSans.ttf │ ├── layer │ │ ├── square_blue.png │ │ └── square_green.png │ ├── p2.jpeg │ └── spine │ │ ├── Pixie.atlas │ │ ├── Pixie.json │ │ ├── Pixie.png │ │ ├── dragon.atlas │ │ ├── dragon.json │ │ ├── dragon.png │ │ ├── dragon2.png │ │ ├── goblins.atlas │ │ ├── goblins.json │ │ ├── goblins.png │ │ ├── iP4_BGtile.jpg │ │ ├── iP4_ground.png │ │ ├── spineboy.atlas │ │ ├── spineboy.json │ │ └── spineboy.png ├── basics │ ├── basic.js │ ├── click.js │ ├── container-pivot.js │ ├── container.js │ ├── graphics.js │ ├── render-texture.js │ ├── spritesheet.js │ ├── text.js │ ├── textured-mesh.js │ └── tiling-sprite.js ├── demos │ ├── alpha-mask.js │ ├── animatedsprite-demo.js │ ├── batch.js │ ├── blendmodes.js │ ├── cacheAsBitmap.js │ ├── dragging.js │ ├── graphics-demo.js │ ├── interactivity.js │ ├── masking.js │ ├── render-texture-demo.js │ ├── text-demo.js │ ├── texture-rotate.js │ ├── texture-swap.js │ ├── tinting.js │ └── transparent-background.js ├── display │ └── z-order.js ├── layers │ ├── lighting.js │ └── z-order.js ├── pixi │ ├── assets │ │ ├── basic │ │ │ ├── bunny.png │ │ │ ├── fighter.json │ │ │ ├── fighter.png │ │ │ ├── shader.frag │ │ │ ├── snake.png │ │ │ ├── strip.png │ │ │ └── tilingsky.jpg │ │ ├── circle-mask.png │ │ ├── demo │ │ │ ├── BGrotate.jpg │ │ │ ├── LightRotate1.png │ │ │ ├── LightRotate2.png │ │ │ ├── SceneRotate.jpg │ │ │ ├── bkg.jpg │ │ │ ├── button.png │ │ │ ├── buttonDown.png │ │ │ ├── buttonOver.png │ │ │ ├── button_test_BG.jpg │ │ │ ├── cells.png │ │ │ ├── desyrel.png │ │ │ ├── desyrel.xml │ │ │ ├── eggHead.png │ │ │ ├── flowerTop.png │ │ │ ├── mc.json │ │ │ ├── mc.png │ │ │ ├── monsters.json │ │ │ ├── monsters.png │ │ │ ├── panda.png │ │ │ ├── spinObj_01.png │ │ │ ├── spinObj_02.png │ │ │ ├── spinObj_03.png │ │ │ ├── spinObj_04.png │ │ │ ├── spinObj_05.png │ │ │ ├── spinObj_06.png │ │ │ ├── spinObj_07.png │ │ │ ├── spinObj_08.png │ │ │ ├── textDemoBG.jpg │ │ │ └── tinyMaggot.png │ │ ├── fonts │ │ │ └── DejaVuSans.ttf │ │ ├── layer │ │ │ ├── square_blue.png │ │ │ └── square_green.png │ │ ├── p2.jpeg │ │ └── spine │ │ │ ├── Pixie.atlas │ │ │ ├── Pixie.json │ │ │ ├── Pixie.png │ │ │ ├── dragon.atlas │ │ │ ├── dragon.json │ │ │ ├── dragon.png │ │ │ ├── dragon2.png │ │ │ ├── goblins.atlas │ │ │ ├── goblins.json │ │ │ ├── goblins.png │ │ │ ├── iP4_BGtile.jpg │ │ │ ├── iP4_ground.png │ │ │ ├── spineboy.atlas │ │ │ ├── spineboy.json │ │ │ └── spineboy.png │ ├── pixi-display.js │ ├── pixi-layers.js │ ├── pixi-spine.js │ ├── pixi.js │ ├── pixi.js.map │ ├── pixi.min.js │ └── pixi.min.js.map └── spine │ ├── dragon.js │ ├── goblins.js │ ├── pixie.js │ └── spineboy.js ├── examples ├── assets │ ├── basic │ │ ├── bunny.png │ │ ├── fighter.png │ │ ├── strip.png │ │ └── tilingsky.jpg │ ├── bunny.png │ └── p2.jpeg └── images │ ├── cursor.png │ ├── input2.png │ ├── spinningball2.png │ └── status_bg.png ├── local-examples-url.txt ├── package.json ├── pixi-display.patch ├── pixi-layers.patch ├── pixi-spine.patch ├── projectRunBook.md ├── pxscene_pixi.patch ├── server.js └── update_assets_url.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/macos,node 3 | 4 | ### macOS ### 5 | *.DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | .com.apple.timemachine.donotpresent 24 | 25 | # Directories potentially created on remote AFP share 26 | .AppleDB 27 | .AppleDesktop 28 | Network Trash Folder 29 | Temporary Items 30 | .apdisk 31 | 32 | ### Node ### 33 | # Logs 34 | logs 35 | *.log 36 | npm-debug.log* 37 | yarn-debug.log* 38 | yarn-error.log* 39 | 40 | # Runtime data 41 | pids 42 | *.pid 43 | *.seed 44 | *.pid.lock 45 | 46 | # Directory for instrumented libs generated by jscoverage/JSCover 47 | lib-cov 48 | 49 | # Coverage directory used by tools like istanbul 50 | coverage 51 | 52 | # nyc test coverage 53 | .nyc_output 54 | 55 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 56 | .grunt 57 | 58 | # Bower dependency directory (https://bower.io/) 59 | bower_components 60 | 61 | # node-waf configuration 62 | .lock-wscript 63 | 64 | # Compiled binary addons (http://nodejs.org/api/addons.html) 65 | build/Release 66 | 67 | # Dependency directories 68 | node_modules/ 69 | jspm_packages/ 70 | 71 | # Typescript v1 declaration files 72 | typings/ 73 | 74 | # Optional npm cache directory 75 | .npm 76 | 77 | # Optional eslint cache 78 | .eslintcache 79 | 80 | # Optional REPL history 81 | .node_repl_history 82 | 83 | # Output of 'npm pack' 84 | *.tgz 85 | 86 | # Yarn Integrity file 87 | .yarn-integrity 88 | 89 | # dotenv environment variables file 90 | .env 91 | 92 | 93 | # End of https://www.gitignore.io/api/macos,node 94 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | pxPixi: Pixi.js based drawing target utilizing PxCore 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | This project is an additional drawing target to Pixi.js (pixijs.com) that adds pxscene drawing in addition to WebGL and Canvas2D. 4 | 5 | 6 | Pixi.js Patch apply 7 | ============== 8 | ### Build pixi 9 | 10 | (1) Clone the pixi project 11 | ``` 12 | git clone https://github.com/pixijs/pixi.js.git 13 | cd pixi.js 14 | git checkout bed84b9ff04cf98c536401d36841d447b74917fe 15 | ``` 16 | 17 | (2) Copy /pxscene_pixi.patch into the repository folder (pixi.js) and patch 18 | ``` 19 | git apply pxscene_pixi.patch 20 | ``` 21 | 22 | (3) Install dependencies and build pixi 23 | ``` 24 | npm i 25 | npm run dist -- --exclude deprecation 26 | ``` 27 | 28 | The pixi will be built and generated in pixi.js/dist 29 | 30 | ## Install pxscene 31 | 32 | pxscene can be downloaded from http://pxscene.org 33 | 34 | ## Local Deployment 35 | 36 | you don't need wait network if you deployment examples on local , sometimes Heroku return timeout if your network not very good. 37 | 38 | ```javascript 39 | npm install -g http-server 40 | cd pxPixi 41 | node update_assets_url.js http://127.0.0.1:8081 42 | cd dist 43 | http-server -p 8081 44 | ``` 45 | 46 | ## Deployment 47 | - pxPixi: for hosting pixi.js,assets and examples (https://github.com/topcoderinc/pxPixi) 48 | - The deployment instructions are easy, switch to just type the following command: 49 | 50 | ```shell 51 | git init 52 | git add . 53 | git commit -m "init" 54 | heroku create 55 | git push heroku master 56 | ``` 57 | 58 | After you have deployed /pxPixi to Heroku,you need use `node update_assets_url.js http://you-heroku-url.com` to update all examples ASSSETS_URL,note that use the protocol to `http://` instead of `https://`, then push again 59 | 60 | ```shell 61 | node update_assets_url.js 62 | git add . 63 | git commit -m "update assets url" 64 | git push heroku master 65 | ``` 66 | 67 | 68 | 69 | **Note**: 70 | (1) If you modified and built pixi.js, please copy pixi.js/dist/* to pxPixi/dist/pixi and update it on Heroku. 71 | (2) make sure you use the protocol to `http://` instead of `https://`. 72 | 73 | 74 | ## Heroku examples 75 | - Basic: http://agile-depths-26078.herokuapp.com/basics/basic.js 76 | - Container: http://agile-depths-26078.herokuapp.com/basics/container.js 77 | - Container Pivot: http://agile-depths-26078.herokuapp.com/basics/container-pivot.js 78 | - Spritesheet Animation: http://agile-depths-26078.herokuapp.com/basics/spritesheet.js 79 | - Click: http://agile-depths-26078.herokuapp.com/basics/click.js 80 | - Tiling Sprite: http://agile-depths-26078.herokuapp.com/basics/tiling-sprite.js 81 | - Text: http://agile-depths-26078.herokuapp.com/basics/text.js 82 | - Textured Mesh: http://agile-depths-26078.herokuapp.com/basics/textured-mesh.js 83 | - Graphics: http://agile-depths-26078.herokuapp.com/basics/graphics.js 84 | - Render Texture: http://agile-depths-26078.herokuapp.com/basics/render-texture.js 85 | - Display Z Order: http://agile-depths-26078.herokuapp.com/display/z-order.js 86 | - Layers Z Order: http://agile-depths-26078.herokuapp.com/layers/z-order.js 87 | - Layers Lighting: http://agile-depths-26078.herokuapp.com/layers/lighting.js 88 | - Spine Dragon: http://agile-depths-26078.herokuapp.com/spine/dragon.js 89 | - Spine Goblin: http://agile-depths-26078.herokuapp.com/spine/goblins.js 90 | - Spine Dragon: http://agile-depths-26078.herokuapp.com/spine/pixie.js 91 | - Spine Spineboy: http://agile-depths-26078.herokuapp.com/spine/spineboy.js 92 | 93 | Open pxscene and enter the URL of each example to the input box and press return, you will see the results. 94 | 95 | ## Plugins 96 | Some examples need extra plugins' support, and there're extra patchs for these plugins to work with pxscene. 97 | 98 | | Examples | plugin | plugin source | patch file | patch base | 99 | | ---------------------------------- | ------------ | ---------------------------------------- | ------------------ | ---------------------------------------- | 100 | | Display Z Order | pixi-display | https://github.com/pixijs/pixi-display/tree/master | pixi-display.patch | branch master and commit b0898bf208431badfd2448cf2dc965a24de39ef8 | 101 | | Layers Z Order and Layers Lighting | pixi-layers | https://github.com/pixijs/pixi-display/tree/layers | pixi-layers.patch | branch layers and commit 0f812e3e6a16c6883c278aae6f1d719f12052862 | 102 | | All Spine examples | pixi-spine | https://github.com/pixijs/pixi-spine | pixi-spine.patch | branch master and commit bc64e3e6f3784f5eda1094ddc283561eb63ab3d3 | 103 | 104 | ## Limitations 105 | 106 | (1) When hover on clickable object, the cursor cannot be changed in pxscene. 107 | (2) Layers Lighting example lack of lighting effect, because PXScene does not support filter yet. 108 | 109 | ## Remarks 110 | (1) If you use the example in Heroku, you may need to wait several seconds for the resource downloading. 111 | (2) The updated pixi.js supports both browsers and pxscene. 112 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /** 3 | * Port 4 | */ 5 | PORT: process.env.PORT || 3000, 6 | }; 7 | -------------------------------------------------------------------------------- /dist/assets/basic/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/basic/bunny.png -------------------------------------------------------------------------------- /dist/assets/basic/fighter.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rollSequence0000.png": 4 | { 5 | "frame": {"x":483,"y":692,"w":169,"h":226}, 6 | "rotated": false, 7 | "trimmed": true, 8 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 9 | "sourceSize": {"w":175,"h":240} 10 | }, 11 | "rollSequence0001.png": 12 | { 13 | "frame": {"x":468,"y":2,"w":169,"h":226}, 14 | "rotated": false, 15 | "trimmed": true, 16 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 17 | "sourceSize": {"w":175,"h":240} 18 | }, 19 | "rollSequence0002.png": 20 | { 21 | "frame": {"x":639,"y":2,"w":167,"h":226}, 22 | "rotated": false, 23 | "trimmed": true, 24 | "spriteSourceSize": {"x":3,"y":5,"w":167,"h":226}, 25 | "sourceSize": {"w":175,"h":240} 26 | }, 27 | "rollSequence0003.png": 28 | { 29 | "frame": {"x":808,"y":2,"w":165,"h":226}, 30 | "rotated": false, 31 | "trimmed": true, 32 | "spriteSourceSize": {"x":3,"y":5,"w":165,"h":226}, 33 | "sourceSize": {"w":175,"h":240} 34 | }, 35 | "rollSequence0004.png": 36 | { 37 | "frame": {"x":654,"y":688,"w":161,"h":226}, 38 | "rotated": false, 39 | "trimmed": true, 40 | "spriteSourceSize": {"x":3,"y":5,"w":161,"h":226}, 41 | "sourceSize": {"w":175,"h":240} 42 | }, 43 | "rollSequence0005.png": 44 | { 45 | "frame": {"x":817,"y":458,"w":151,"h":226}, 46 | "rotated": false, 47 | "trimmed": true, 48 | "spriteSourceSize": {"x":6,"y":5,"w":151,"h":226}, 49 | "sourceSize": {"w":175,"h":240} 50 | }, 51 | "rollSequence0006.png": 52 | { 53 | "frame": {"x":817,"y":686,"w":137,"h":226}, 54 | "rotated": false, 55 | "trimmed": true, 56 | "spriteSourceSize": {"x":11,"y":5,"w":137,"h":226}, 57 | "sourceSize": {"w":175,"h":240} 58 | }, 59 | "rollSequence0007.png": 60 | { 61 | "frame": {"x":290,"y":2,"w":113,"h":228}, 62 | "rotated": false, 63 | "trimmed": true, 64 | "spriteSourceSize": {"x":22,"y":3,"w":113,"h":228}, 65 | "sourceSize": {"w":175,"h":240} 66 | }, 67 | "rollSequence0008.png": 68 | { 69 | "frame": {"x":284,"y":692,"w":79,"h":228}, 70 | "rotated": false, 71 | "trimmed": true, 72 | "spriteSourceSize": {"x":40,"y":3,"w":79,"h":228}, 73 | "sourceSize": {"w":175,"h":240} 74 | }, 75 | "rollSequence0009.png": 76 | { 77 | "frame": {"x":405,"y":2,"w":61,"h":228}, 78 | "rotated": false, 79 | "trimmed": true, 80 | "spriteSourceSize": {"x":53,"y":3,"w":61,"h":228}, 81 | "sourceSize": {"w":175,"h":240} 82 | }, 83 | "rollSequence0010.png": 84 | { 85 | "frame": {"x":444,"y":462,"w":49,"h":228}, 86 | "rotated": false, 87 | "trimmed": true, 88 | "spriteSourceSize": {"x":64,"y":3,"w":49,"h":228}, 89 | "sourceSize": {"w":175,"h":240} 90 | }, 91 | "rollSequence0011.png": 92 | { 93 | "frame": {"x":377,"y":462,"w":65,"h":228}, 94 | "rotated": false, 95 | "trimmed": true, 96 | "spriteSourceSize": {"x":52,"y":3,"w":65,"h":228}, 97 | "sourceSize": {"w":175,"h":240} 98 | }, 99 | "rollSequence0012.png": 100 | { 101 | "frame": {"x":272,"y":462,"w":103,"h":228}, 102 | "rotated": false, 103 | "trimmed": true, 104 | "spriteSourceSize": {"x":37,"y":3,"w":103,"h":228}, 105 | "sourceSize": {"w":175,"h":240} 106 | }, 107 | "rollSequence0013.png": 108 | { 109 | "frame": {"x":143,"y":692,"w":139,"h":228}, 110 | "rotated": false, 111 | "trimmed": true, 112 | "spriteSourceSize": {"x":20,"y":3,"w":139,"h":228}, 113 | "sourceSize": {"w":175,"h":240} 114 | }, 115 | "rollSequence0014.png": 116 | { 117 | "frame": {"x":2,"y":462,"w":163,"h":228}, 118 | "rotated": false, 119 | "trimmed": true, 120 | "spriteSourceSize": {"x":7,"y":3,"w":163,"h":228}, 121 | "sourceSize": {"w":175,"h":240} 122 | }, 123 | "rollSequence0015.png": 124 | { 125 | "frame": {"x":2,"y":2,"w":171,"h":228}, 126 | "rotated": false, 127 | "trimmed": true, 128 | "spriteSourceSize": {"x":2,"y":3,"w":171,"h":228}, 129 | "sourceSize": {"w":175,"h":240} 130 | }, 131 | "rollSequence0016.png": 132 | { 133 | "frame": {"x":2,"y":232,"w":163,"h":228}, 134 | "rotated": false, 135 | "trimmed": true, 136 | "spriteSourceSize": {"x":4,"y":3,"w":163,"h":228}, 137 | "sourceSize": {"w":175,"h":240} 138 | }, 139 | "rollSequence0017.png": 140 | { 141 | "frame": {"x":2,"y":692,"w":139,"h":228}, 142 | "rotated": false, 143 | "trimmed": true, 144 | "spriteSourceSize": {"x":16,"y":3,"w":139,"h":228}, 145 | "sourceSize": {"w":175,"h":240} 146 | }, 147 | "rollSequence0018.png": 148 | { 149 | "frame": {"x":167,"y":462,"w":103,"h":228}, 150 | "rotated": false, 151 | "trimmed": true, 152 | "spriteSourceSize": {"x":35,"y":3,"w":103,"h":228}, 153 | "sourceSize": {"w":175,"h":240} 154 | }, 155 | "rollSequence0019.png": 156 | { 157 | "frame": {"x":365,"y":692,"w":65,"h":228}, 158 | "rotated": false, 159 | "trimmed": true, 160 | "spriteSourceSize": {"x":58,"y":3,"w":65,"h":228}, 161 | "sourceSize": {"w":175,"h":240} 162 | }, 163 | "rollSequence0020.png": 164 | { 165 | "frame": {"x":432,"y":692,"w":49,"h":228}, 166 | "rotated": false, 167 | "trimmed": true, 168 | "spriteSourceSize": {"x":62,"y":3,"w":49,"h":228}, 169 | "sourceSize": {"w":175,"h":240} 170 | }, 171 | "rollSequence0021.png": 172 | { 173 | "frame": {"x":389,"y":232,"w":61,"h":228}, 174 | "rotated": false, 175 | "trimmed": true, 176 | "spriteSourceSize": {"x":61,"y":3,"w":61,"h":228}, 177 | "sourceSize": {"w":175,"h":240} 178 | }, 179 | "rollSequence0022.png": 180 | { 181 | "frame": {"x":306,"y":232,"w":81,"h":228}, 182 | "rotated": false, 183 | "trimmed": true, 184 | "spriteSourceSize": {"x":55,"y":3,"w":81,"h":228}, 185 | "sourceSize": {"w":175,"h":240} 186 | }, 187 | "rollSequence0023.png": 188 | { 189 | "frame": {"x":175,"y":2,"w":113,"h":228}, 190 | "rotated": false, 191 | "trimmed": true, 192 | "spriteSourceSize": {"x":39,"y":3,"w":113,"h":228}, 193 | "sourceSize": {"w":175,"h":240} 194 | }, 195 | "rollSequence0024.png": 196 | { 197 | "frame": {"x":167,"y":232,"w":137,"h":228}, 198 | "rotated": false, 199 | "trimmed": true, 200 | "spriteSourceSize": {"x":26,"y":3,"w":137,"h":228}, 201 | "sourceSize": {"w":175,"h":240} 202 | }, 203 | "rollSequence0025.png": 204 | { 205 | "frame": {"x":664,"y":458,"w":151,"h":226}, 206 | "rotated": false, 207 | "trimmed": true, 208 | "spriteSourceSize": {"x":18,"y":5,"w":151,"h":226}, 209 | "sourceSize": {"w":175,"h":240} 210 | }, 211 | "rollSequence0026.png": 212 | { 213 | "frame": {"x":792,"y":230,"w":161,"h":226}, 214 | "rotated": false, 215 | "trimmed": true, 216 | "spriteSourceSize": {"x":11,"y":5,"w":161,"h":226}, 217 | "sourceSize": {"w":175,"h":240} 218 | }, 219 | "rollSequence0027.png": 220 | { 221 | "frame": {"x":623,"y":230,"w":167,"h":226}, 222 | "rotated": false, 223 | "trimmed": true, 224 | "spriteSourceSize": {"x":6,"y":5,"w":167,"h":226}, 225 | "sourceSize": {"w":175,"h":240} 226 | }, 227 | "rollSequence0028.png": 228 | { 229 | "frame": {"x":495,"y":460,"w":167,"h":226}, 230 | "rotated": false, 231 | "trimmed": true, 232 | "spriteSourceSize": {"x":5,"y":5,"w":167,"h":226}, 233 | "sourceSize": {"w":175,"h":240} 234 | }, 235 | "rollSequence0029.png": 236 | { 237 | "frame": {"x":452,"y":232,"w":169,"h":226}, 238 | "rotated": false, 239 | "trimmed": true, 240 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 241 | "sourceSize": {"w":175,"h":240} 242 | }}, 243 | "meta": { 244 | "app": "http://www.texturepacker.com", 245 | "version": "1.0", 246 | "image": "fighter.png", 247 | "format": "RGBA8888", 248 | "size": {"w":1024,"h":1024}, 249 | "scale": "1", 250 | "smartupdate": "$TexturePacker:SmartUpdate:2f213a6b451f9f5719773418dfe80ae8$" 251 | } 252 | } 253 | -------------------------------------------------------------------------------- /dist/assets/basic/fighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/basic/fighter.png -------------------------------------------------------------------------------- /dist/assets/basic/shader.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec2 vTextureCoord; 4 | varying vec4 vColor; 5 | 6 | uniform sampler2D uSampler; 7 | uniform float customUniform; 8 | 9 | void main(void) 10 | { 11 | vec2 uvs = vTextureCoord.xy; 12 | 13 | vec4 fg = texture2D(uSampler, vTextureCoord); 14 | 15 | 16 | fg.r = uvs.y + sin(customUniform); 17 | 18 | //fg.r = clamp(fg.r,0.0,0.9); 19 | 20 | gl_FragColor = fg; 21 | 22 | } 23 | -------------------------------------------------------------------------------- /dist/assets/basic/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/basic/snake.png -------------------------------------------------------------------------------- /dist/assets/basic/strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/basic/strip.png -------------------------------------------------------------------------------- /dist/assets/basic/tilingsky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/basic/tilingsky.jpg -------------------------------------------------------------------------------- /dist/assets/circle-mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/circle-mask.png -------------------------------------------------------------------------------- /dist/assets/demo/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/BGrotate.jpg -------------------------------------------------------------------------------- /dist/assets/demo/LightRotate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/LightRotate1.png -------------------------------------------------------------------------------- /dist/assets/demo/LightRotate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/LightRotate2.png -------------------------------------------------------------------------------- /dist/assets/demo/SceneRotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/SceneRotate.jpg -------------------------------------------------------------------------------- /dist/assets/demo/bkg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/bkg.jpg -------------------------------------------------------------------------------- /dist/assets/demo/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/button.png -------------------------------------------------------------------------------- /dist/assets/demo/buttonDown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/buttonDown.png -------------------------------------------------------------------------------- /dist/assets/demo/buttonOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/buttonOver.png -------------------------------------------------------------------------------- /dist/assets/demo/button_test_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/button_test_BG.jpg -------------------------------------------------------------------------------- /dist/assets/demo/cells.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/cells.png -------------------------------------------------------------------------------- /dist/assets/demo/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/desyrel.png -------------------------------------------------------------------------------- /dist/assets/demo/eggHead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/eggHead.png -------------------------------------------------------------------------------- /dist/assets/demo/flowerTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/flowerTop.png -------------------------------------------------------------------------------- /dist/assets/demo/mc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "Explosion_Sequence_A 1.png": 4 | { 5 | "frame": {"x":244,"y":1454,"w":240,"h":240}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 9 | "sourceSize": {"w":240,"h":240} 10 | }, 11 | "Explosion_Sequence_A 10.png": 12 | { 13 | "frame": {"x":244,"y":970,"w":240,"h":240}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 17 | "sourceSize": {"w":240,"h":240} 18 | }, 19 | "Explosion_Sequence_A 11.png": 20 | { 21 | "frame": {"x":2,"y":970,"w":240,"h":240}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 25 | "sourceSize": {"w":240,"h":240} 26 | }, 27 | "Explosion_Sequence_A 12.png": 28 | { 29 | "frame": {"x":728,"y":728,"w":240,"h":240}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 33 | "sourceSize": {"w":240,"h":240} 34 | }, 35 | "Explosion_Sequence_A 13.png": 36 | { 37 | "frame": {"x":486,"y":728,"w":240,"h":240}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 41 | "sourceSize": {"w":240,"h":240} 42 | }, 43 | "Explosion_Sequence_A 14.png": 44 | { 45 | "frame": {"x":244,"y":728,"w":240,"h":240}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 49 | "sourceSize": {"w":240,"h":240} 50 | }, 51 | "Explosion_Sequence_A 15.png": 52 | { 53 | "frame": {"x":2,"y":728,"w":240,"h":240}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 57 | "sourceSize": {"w":240,"h":240} 58 | }, 59 | "Explosion_Sequence_A 16.png": 60 | { 61 | "frame": {"x":728,"y":486,"w":240,"h":240}, 62 | "rotated": false, 63 | "trimmed": false, 64 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 65 | "sourceSize": {"w":240,"h":240} 66 | }, 67 | "Explosion_Sequence_A 17.png": 68 | { 69 | "frame": {"x":486,"y":486,"w":240,"h":240}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 73 | "sourceSize": {"w":240,"h":240} 74 | }, 75 | "Explosion_Sequence_A 18.png": 76 | { 77 | "frame": {"x":244,"y":486,"w":240,"h":240}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 81 | "sourceSize": {"w":240,"h":240} 82 | }, 83 | "Explosion_Sequence_A 19.png": 84 | { 85 | "frame": {"x":2,"y":486,"w":240,"h":240}, 86 | "rotated": false, 87 | "trimmed": false, 88 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 89 | "sourceSize": {"w":240,"h":240} 90 | }, 91 | "Explosion_Sequence_A 2.png": 92 | { 93 | "frame": {"x":728,"y":1212,"w":240,"h":240}, 94 | "rotated": false, 95 | "trimmed": false, 96 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 97 | "sourceSize": {"w":240,"h":240} 98 | }, 99 | "Explosion_Sequence_A 20.png": 100 | { 101 | "frame": {"x":728,"y":244,"w":240,"h":240}, 102 | "rotated": false, 103 | "trimmed": false, 104 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 105 | "sourceSize": {"w":240,"h":240} 106 | }, 107 | "Explosion_Sequence_A 21.png": 108 | { 109 | "frame": {"x":486,"y":244,"w":240,"h":240}, 110 | "rotated": false, 111 | "trimmed": false, 112 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 113 | "sourceSize": {"w":240,"h":240} 114 | }, 115 | "Explosion_Sequence_A 22.png": 116 | { 117 | "frame": {"x":244,"y":244,"w":240,"h":240}, 118 | "rotated": false, 119 | "trimmed": false, 120 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 121 | "sourceSize": {"w":240,"h":240} 122 | }, 123 | "Explosion_Sequence_A 23.png": 124 | { 125 | "frame": {"x":2,"y":244,"w":240,"h":240}, 126 | "rotated": false, 127 | "trimmed": false, 128 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 129 | "sourceSize": {"w":240,"h":240} 130 | }, 131 | "Explosion_Sequence_A 24.png": 132 | { 133 | "frame": {"x":728,"y":2,"w":240,"h":240}, 134 | "rotated": false, 135 | "trimmed": false, 136 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 137 | "sourceSize": {"w":240,"h":240} 138 | }, 139 | "Explosion_Sequence_A 25.png": 140 | { 141 | "frame": {"x":486,"y":2,"w":240,"h":240}, 142 | "rotated": false, 143 | "trimmed": false, 144 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 145 | "sourceSize": {"w":240,"h":240} 146 | }, 147 | "Explosion_Sequence_A 26.png": 148 | { 149 | "frame": {"x":244,"y":2,"w":240,"h":240}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 153 | "sourceSize": {"w":240,"h":240} 154 | }, 155 | "Explosion_Sequence_A 27.png": 156 | { 157 | "frame": {"x":2,"y":2,"w":240,"h":240}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 161 | "sourceSize": {"w":240,"h":240} 162 | }, 163 | "Explosion_Sequence_A 3.png": 164 | { 165 | "frame": {"x":486,"y":1212,"w":240,"h":240}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 169 | "sourceSize": {"w":240,"h":240} 170 | }, 171 | "Explosion_Sequence_A 4.png": 172 | { 173 | "frame": {"x":244,"y":1212,"w":240,"h":240}, 174 | "rotated": false, 175 | "trimmed": false, 176 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 177 | "sourceSize": {"w":240,"h":240} 178 | }, 179 | "Explosion_Sequence_A 5.png": 180 | { 181 | "frame": {"x":2,"y":1696,"w":240,"h":240}, 182 | "rotated": false, 183 | "trimmed": false, 184 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 185 | "sourceSize": {"w":240,"h":240} 186 | }, 187 | "Explosion_Sequence_A 6.png": 188 | { 189 | "frame": {"x":2,"y":1454,"w":240,"h":240}, 190 | "rotated": false, 191 | "trimmed": false, 192 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 193 | "sourceSize": {"w":240,"h":240} 194 | }, 195 | "Explosion_Sequence_A 7.png": 196 | { 197 | "frame": {"x":2,"y":1212,"w":240,"h":240}, 198 | "rotated": false, 199 | "trimmed": false, 200 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 201 | "sourceSize": {"w":240,"h":240} 202 | }, 203 | "Explosion_Sequence_A 8.png": 204 | { 205 | "frame": {"x":728,"y":970,"w":240,"h":240}, 206 | "rotated": false, 207 | "trimmed": false, 208 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 209 | "sourceSize": {"w":240,"h":240} 210 | }, 211 | "Explosion_Sequence_A 9.png": 212 | { 213 | "frame": {"x":486,"y":970,"w":240,"h":240}, 214 | "rotated": false, 215 | "trimmed": false, 216 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 217 | "sourceSize": {"w":240,"h":240} 218 | }}, 219 | "meta": { 220 | "app": "http://www.texturepacker.com", 221 | "version": "1.0", 222 | "image": "mc.png", 223 | "format": "RGBA8888", 224 | "size": {"w":1024,"h":2048}, 225 | "scale": "1", 226 | "smartupdate": "$TexturePacker:SmartUpdate:17e4a2d92ff3e27832c3f4938cec7c85$" 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /dist/assets/demo/mc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/mc.png -------------------------------------------------------------------------------- /dist/assets/demo/monsters.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "eggHead.png": 4 | { 5 | "frame": {"x":2,"y":169,"w":142,"h":157}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":142,"h":157}, 9 | "sourceSize": {"w":142,"h":157} 10 | }, 11 | "flowerTop.png": 12 | { 13 | "frame": {"x":2,"y":328,"w":119,"h":181}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":119,"h":181}, 17 | "sourceSize": {"w":119,"h":181} 18 | }, 19 | "helmlok.png": 20 | { 21 | "frame": {"x":123,"y":328,"w":123,"h":177}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":123,"h":177}, 25 | "sourceSize": {"w":123,"h":177} 26 | }, 27 | "skully.png": 28 | { 29 | "frame": {"x":2,"y":2,"w":155,"h":165}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":155,"h":165}, 33 | "sourceSize": {"w":155,"h":165} 34 | }}, 35 | "meta": { 36 | "app": "http://www.texturepacker.com", 37 | "version": "1.0", 38 | "image": "monsters.png", 39 | "format": "RGBA8888", 40 | "size": {"w":256,"h":512}, 41 | "scale": "1", 42 | "smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /dist/assets/demo/monsters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/monsters.png -------------------------------------------------------------------------------- /dist/assets/demo/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/panda.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_01.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_02.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_03.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_04.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_05.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_06.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_07.png -------------------------------------------------------------------------------- /dist/assets/demo/spinObj_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/spinObj_08.png -------------------------------------------------------------------------------- /dist/assets/demo/textDemoBG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/textDemoBG.jpg -------------------------------------------------------------------------------- /dist/assets/demo/tinyMaggot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/demo/tinyMaggot.png -------------------------------------------------------------------------------- /dist/assets/fonts/DejaVuSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/fonts/DejaVuSans.ttf -------------------------------------------------------------------------------- /dist/assets/layer/square_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/layer/square_blue.png -------------------------------------------------------------------------------- /dist/assets/layer/square_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/layer/square_green.png -------------------------------------------------------------------------------- /dist/assets/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/p2.jpeg -------------------------------------------------------------------------------- /dist/assets/spine/Pixie.atlas: -------------------------------------------------------------------------------- 1 | Pixie.png 2 | format: RGBA8888 3 | filter: Linear,Linear 4 | repeat: none 5 | L_foot 6 | rotate: false 7 | xy: 1048, 355 8 | size: 68, 51 9 | orig: 68, 51 10 | offset: 0, 0 11 | index: -1 12 | L_hand 13 | rotate: true 14 | xy: 916, 355 15 | size: 55, 64 16 | orig: 55, 64 17 | offset: 0, 0 18 | index: -1 19 | L_lower_arm 20 | rotate: false 21 | xy: 1273, 226 22 | size: 70, 31 23 | orig: 70, 31 24 | offset: 0, 0 25 | index: -1 26 | L_lower_leg 27 | rotate: false 28 | xy: 1201, 345 29 | size: 57, 65 30 | orig: 57, 65 31 | offset: 0, 0 32 | index: -1 33 | L_upper_arm 34 | rotate: true 35 | xy: 1399, 2 36 | size: 78, 74 37 | orig: 78, 74 38 | offset: 0, 0 39 | index: -1 40 | L_upper_leg 41 | rotate: false 42 | xy: 1351, 259 43 | size: 124, 71 44 | orig: 124, 71 45 | offset: 0, 0 46 | index: -1 47 | R_foot 48 | rotate: false 49 | xy: 1319, 345 50 | size: 68, 51 51 | orig: 68, 51 52 | offset: 0, 0 53 | index: -1 54 | R_hand 55 | rotate: true 56 | xy: 982, 355 57 | size: 55, 64 58 | orig: 55, 64 59 | offset: 0, 0 60 | index: -1 61 | R_lower_arm 62 | rotate: false 63 | xy: 1345, 226 64 | size: 70, 31 65 | orig: 70, 31 66 | offset: 0, 0 67 | index: -1 68 | R_lower_leg 69 | rotate: false 70 | xy: 1260, 345 71 | size: 57, 65 72 | orig: 57, 65 73 | offset: 0, 0 74 | index: -1 75 | R_upper_arm 76 | rotate: true 77 | xy: 1399, 82 78 | size: 78, 74 79 | orig: 78, 74 80 | offset: 0, 0 81 | index: -1 82 | R_upper_leg 83 | rotate: false 84 | xy: 1389, 332 85 | size: 124, 71 86 | orig: 124, 71 87 | offset: 0, 0 88 | index: -1 89 | backHair 90 | rotate: true 91 | xy: 1096, 2 92 | size: 261, 175 93 | orig: 261, 175 94 | offset: 0, 0 95 | index: -1 96 | foreWing 97 | rotate: false 98 | xy: 1096, 265 99 | size: 253, 78 100 | orig: 253, 78 101 | offset: 0, 0 102 | index: -1 103 | frontHair 104 | rotate: true 105 | xy: 617, 2 106 | size: 396, 297 107 | orig: 396, 297 108 | offset: 0, 0 109 | index: -1 110 | groinal 111 | rotate: true 112 | xy: 1515, 296 113 | size: 103, 84 114 | orig: 103, 84 115 | offset: 0, 0 116 | index: -1 117 | head 118 | rotate: false 119 | xy: 2, 2 120 | size: 613, 408 121 | orig: 613, 408 122 | offset: 0, 0 123 | index: -1 124 | jaw 125 | rotate: true 126 | xy: 1273, 2 127 | size: 222, 124 128 | orig: 222, 124 129 | offset: 0, 0 130 | index: -1 131 | midHair 132 | rotate: true 133 | xy: 916, 2 134 | size: 351, 178 135 | orig: 351, 178 136 | offset: 0, 0 137 | index: -1 138 | neck 139 | rotate: true 140 | xy: 1118, 345 141 | size: 65, 81 142 | orig: 65, 81 143 | offset: 0, 0 144 | index: -1 145 | rearWing 146 | rotate: false 147 | xy: 1477, 148 148 | size: 136, 146 149 | orig: 136, 146 150 | offset: 0, 0 151 | index: -1 152 | vest 153 | rotate: false 154 | xy: 1477, 2 155 | size: 139, 144 156 | orig: 139, 144 157 | offset: 0, 0 158 | index: -1 159 | -------------------------------------------------------------------------------- /dist/assets/spine/Pixie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/Pixie.png -------------------------------------------------------------------------------- /dist/assets/spine/dragon.atlas: -------------------------------------------------------------------------------- 1 | 2 | dragon.png 3 | format: RGBA8888 4 | filter: Linear,Linear 5 | repeat: none 6 | L_rear_thigh 7 | rotate: false 8 | xy: 895, 20 9 | size: 91, 148 10 | orig: 91, 149 11 | offset: 0, 0 12 | index: -1 13 | L_wing01 14 | rotate: false 15 | xy: 814, 672 16 | size: 191, 256 17 | orig: 191, 256 18 | offset: 0, 0 19 | index: -1 20 | L_wing02 21 | rotate: false 22 | xy: 714, 189 23 | size: 179, 269 24 | orig: 179, 269 25 | offset: 0, 0 26 | index: -1 27 | L_wing03 28 | rotate: false 29 | xy: 785, 463 30 | size: 186, 207 31 | orig: 186, 207 32 | offset: 0, 0 33 | index: -1 34 | L_wing05 35 | rotate: true 36 | xy: 2, 9 37 | size: 218, 213 38 | orig: 218, 213 39 | offset: 0, 0 40 | index: -1 41 | L_wing06 42 | rotate: false 43 | xy: 2, 229 44 | size: 192, 331 45 | orig: 192, 331 46 | offset: 0, 0 47 | index: -1 48 | R_wing01 49 | rotate: true 50 | xy: 502, 709 51 | size: 219, 310 52 | orig: 219, 310 53 | offset: 0, 0 54 | index: -1 55 | R_wing02 56 | rotate: true 57 | xy: 204, 463 58 | size: 203, 305 59 | orig: 203, 305 60 | offset: 0, 0 61 | index: -1 62 | R_wing03 63 | rotate: false 64 | xy: 511, 460 65 | size: 272, 247 66 | orig: 272, 247 67 | offset: 0, 0 68 | index: -1 69 | R_wing05 70 | rotate: false 71 | xy: 196, 232 72 | size: 251, 229 73 | orig: 251, 229 74 | offset: 0, 0 75 | index: -1 76 | R_wing06 77 | rotate: false 78 | xy: 2, 562 79 | size: 200, 366 80 | orig: 200, 366 81 | offset: 0, 0 82 | index: -1 83 | R_wing07 84 | rotate: true 85 | xy: 449, 258 86 | size: 200, 263 87 | orig: 200, 263 88 | offset: 0, 0 89 | index: -1 90 | R_wing08 91 | rotate: false 92 | xy: 467, 2 93 | size: 234, 254 94 | orig: 234, 254 95 | offset: 0, 0 96 | index: -1 97 | R_wing09 98 | rotate: false 99 | xy: 217, 26 100 | size: 248, 204 101 | orig: 248, 204 102 | offset: 0, 0 103 | index: -1 104 | back 105 | rotate: false 106 | xy: 703, 2 107 | size: 190, 185 108 | orig: 190, 185 109 | offset: 0, 0 110 | index: -1 111 | chest 112 | rotate: true 113 | xy: 895, 170 114 | size: 136, 122 115 | orig: 136, 122 116 | offset: 0, 0 117 | index: -1 118 | front_toeA 119 | rotate: false 120 | xy: 976, 972 121 | size: 29, 50 122 | orig: 29, 50 123 | offset: 0, 0 124 | index: -1 125 | head 126 | rotate: false 127 | xy: 204, 668 128 | size: 296, 260 129 | orig: 296, 260 130 | offset: 0, 0 131 | index: -1 132 | logo 133 | rotate: false 134 | xy: 2, 930 135 | size: 897, 92 136 | orig: 897, 92 137 | offset: 0, 0 138 | index: -1 139 | tail01 140 | rotate: false 141 | xy: 895, 308 142 | size: 120, 153 143 | orig: 120, 153 144 | offset: 0, 0 145 | index: -1 146 | tail03 147 | rotate: false 148 | xy: 901, 930 149 | size: 73, 92 150 | orig: 73, 92 151 | offset: 0, 0 152 | index: -1 153 | 154 | dragon2.png 155 | format: RGBA8888 156 | filter: Linear,Linear 157 | repeat: none 158 | L_front_leg 159 | rotate: true 160 | xy: 391, 141 161 | size: 84, 57 162 | orig: 84, 57 163 | offset: 0, 0 164 | index: -1 165 | L_front_thigh 166 | rotate: false 167 | xy: 446, 269 168 | size: 84, 72 169 | orig: 84, 72 170 | offset: 0, 0 171 | index: -1 172 | L_rear_leg 173 | rotate: true 174 | xy: 888, 342 175 | size: 168, 132 176 | orig: 206, 177 177 | offset: 19, 20 178 | index: -1 179 | L_wing04 180 | rotate: false 181 | xy: 256, 227 182 | size: 188, 135 183 | orig: 188, 135 184 | offset: 0, 0 185 | index: -1 186 | L_wing07 187 | rotate: false 188 | xy: 2, 109 189 | size: 159, 255 190 | orig: 159, 255 191 | offset: 0, 0 192 | index: -1 193 | L_wing08 194 | rotate: true 195 | xy: 705, 346 196 | size: 164, 181 197 | orig: 164, 181 198 | offset: 0, 0 199 | index: -1 200 | L_wing09 201 | rotate: false 202 | xy: 499, 343 203 | size: 204, 167 204 | orig: 204, 167 205 | offset: 0, 0 206 | index: -1 207 | R_front_leg 208 | rotate: false 209 | xy: 273, 34 210 | size: 101, 89 211 | orig: 101, 89 212 | offset: 0, 0 213 | index: -1 214 | R_front_thigh 215 | rotate: false 216 | xy: 163, 106 217 | size: 108, 108 218 | orig: 108, 108 219 | offset: 0, 0 220 | index: -1 221 | R_rear_leg 222 | rotate: false 223 | xy: 273, 125 224 | size: 116, 100 225 | orig: 116, 100 226 | offset: 0, 0 227 | index: -1 228 | R_rear_thigh 229 | rotate: false 230 | xy: 163, 216 231 | size: 91, 148 232 | orig: 91, 149 233 | offset: 0, 0 234 | index: -1 235 | R_wing04 236 | rotate: false 237 | xy: 2, 366 238 | size: 279, 144 239 | orig: 279, 144 240 | offset: 0, 0 241 | index: -1 242 | chin 243 | rotate: false 244 | xy: 283, 364 245 | size: 214, 146 246 | orig: 214, 146 247 | offset: 0, 0 248 | index: -1 249 | front_toeB 250 | rotate: false 251 | xy: 590, 284 252 | size: 56, 57 253 | orig: 56, 57 254 | offset: 0, 0 255 | index: -1 256 | rear-toe 257 | rotate: true 258 | xy: 2, 2 259 | size: 105, 77 260 | orig: 109, 77 261 | offset: 0, 0 262 | index: -1 263 | tail02 264 | rotate: true 265 | xy: 151, 9 266 | size: 95, 120 267 | orig: 95, 120 268 | offset: 0, 0 269 | index: -1 270 | tail04 271 | rotate: false 272 | xy: 532, 270 273 | size: 56, 71 274 | orig: 56, 71 275 | offset: 0, 0 276 | index: -1 277 | tail05 278 | rotate: false 279 | xy: 648, 282 280 | size: 52, 59 281 | orig: 52, 59 282 | offset: 0, 0 283 | index: -1 284 | tail06 285 | rotate: true 286 | xy: 81, 12 287 | size: 95, 68 288 | orig: 95, 68 289 | offset: 0, 0 290 | index: -1 291 | -------------------------------------------------------------------------------- /dist/assets/spine/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/dragon.png -------------------------------------------------------------------------------- /dist/assets/spine/dragon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/dragon2.png -------------------------------------------------------------------------------- /dist/assets/spine/goblins.atlas: -------------------------------------------------------------------------------- 1 | 2 | goblins.png 3 | size: 228,523 4 | format: RGBA8888 5 | filter: Linear,Linear 6 | repeat: none 7 | dagger 8 | rotate: false 9 | xy: 2, 43 10 | size: 26, 108 11 | orig: 26, 108 12 | offset: 0, 0 13 | index: -1 14 | goblin/eyes-closed 15 | rotate: false 16 | xy: 166, 237 17 | size: 34, 12 18 | orig: 34, 12 19 | offset: 0, 0 20 | index: -1 21 | goblin/head 22 | rotate: false 23 | xy: 26, 372 24 | size: 103, 66 25 | orig: 103, 66 26 | offset: 0, 0 27 | index: -1 28 | goblin/left-arm 29 | rotate: false 30 | xy: 166, 251 31 | size: 37, 35 32 | orig: 37, 35 33 | offset: 0, 0 34 | index: -1 35 | goblin/left-foot 36 | rotate: true 37 | xy: 195, 358 38 | size: 65, 31 39 | orig: 65, 31 40 | offset: 0, 0 41 | index: -1 42 | goblin/left-hand 43 | rotate: false 44 | xy: 49, 2 45 | size: 36, 41 46 | orig: 36, 41 47 | offset: 0, 0 48 | index: -1 49 | goblin/left-lower-leg 50 | rotate: false 51 | xy: 30, 45 52 | size: 33, 70 53 | orig: 33, 70 54 | offset: 0, 0 55 | index: -1 56 | goblin/left-shoulder 57 | rotate: true 58 | xy: 169, 288 59 | size: 29, 44 60 | orig: 29, 44 61 | offset: 0, 0 62 | index: -1 63 | goblin/left-upper-leg 64 | rotate: false 65 | xy: 134, 305 66 | size: 33, 73 67 | orig: 33, 73 68 | offset: 0, 0 69 | index: -1 70 | goblin/neck 71 | rotate: false 72 | xy: 87, 2 73 | size: 36, 41 74 | orig: 36, 41 75 | offset: 0, 0 76 | index: -1 77 | goblin/pelvis 78 | rotate: false 79 | xy: 131, 380 80 | size: 62, 43 81 | orig: 62, 43 82 | offset: 0, 0 83 | index: -1 84 | goblin/right-arm 85 | rotate: false 86 | xy: 135, 69 87 | size: 23, 50 88 | orig: 23, 50 89 | offset: 0, 0 90 | index: -1 91 | goblin/right-foot 92 | rotate: true 93 | xy: 104, 157 94 | size: 63, 33 95 | orig: 63, 33 96 | offset: 0, 0 97 | index: -1 98 | goblin/right-hand 99 | rotate: false 100 | xy: 190, 319 101 | size: 36, 37 102 | orig: 36, 37 103 | offset: 0, 0 104 | index: -1 105 | goblin/right-lower-leg 106 | rotate: false 107 | xy: 96, 294 108 | size: 36, 76 109 | orig: 36, 76 110 | offset: 0, 0 111 | index: -1 112 | goblin/right-shoulder 113 | rotate: true 114 | xy: 2, 2 115 | size: 39, 45 116 | orig: 39, 45 117 | offset: 0, 0 118 | index: -1 119 | goblin/right-upper-leg 120 | rotate: false 121 | xy: 139, 162 122 | size: 34, 63 123 | orig: 34, 63 124 | offset: 0, 0 125 | index: -1 126 | goblin/torso 127 | rotate: false 128 | xy: 131, 425 129 | size: 68, 96 130 | orig: 68, 96 131 | offset: 0, 0 132 | index: -1 133 | goblin/undie-straps 134 | rotate: true 135 | xy: 201, 466 136 | size: 55, 19 137 | orig: 55, 19 138 | offset: 0, 0 139 | index: -1 140 | goblin/undies 141 | rotate: false 142 | xy: 190, 51 143 | size: 36, 29 144 | orig: 36, 29 145 | offset: 0, 0 146 | index: -1 147 | goblingirl/eyes-closed 148 | rotate: true 149 | xy: 201, 427 150 | size: 37, 21 151 | orig: 37, 21 152 | offset: 0, 0 153 | index: -1 154 | goblingirl/head 155 | rotate: false 156 | xy: 26, 440 157 | size: 103, 81 158 | orig: 103, 81 159 | offset: 0, 0 160 | index: -1 161 | goblingirl/left-arm 162 | rotate: true 163 | xy: 175, 198 164 | size: 37, 35 165 | orig: 37, 35 166 | offset: 0, 0 167 | index: -1 168 | goblingirl/left-foot 169 | rotate: true 170 | xy: 133, 227 171 | size: 65, 31 172 | orig: 65, 31 173 | offset: 0, 0 174 | index: -1 175 | goblingirl/left-hand 176 | rotate: true 177 | xy: 168, 2 178 | size: 35, 40 179 | orig: 35, 40 180 | offset: 0, 0 181 | index: -1 182 | goblingirl/left-lower-leg 183 | rotate: false 184 | xy: 65, 45 185 | size: 33, 70 186 | orig: 33, 70 187 | offset: 0, 0 188 | index: -1 189 | goblingirl/left-shoulder 190 | rotate: true 191 | xy: 135, 39 192 | size: 28, 46 193 | orig: 28, 46 194 | offset: 0, 0 195 | index: -1 196 | goblingirl/left-upper-leg 197 | rotate: false 198 | xy: 98, 222 199 | size: 33, 70 200 | orig: 33, 70 201 | offset: 0, 0 202 | index: -1 203 | goblingirl/neck 204 | rotate: true 205 | xy: 125, 2 206 | size: 35, 41 207 | orig: 35, 41 208 | offset: 0, 0 209 | index: -1 210 | goblingirl/pelvis 211 | rotate: false 212 | xy: 30, 117 213 | size: 62, 43 214 | orig: 62, 43 215 | offset: 0, 0 216 | index: -1 217 | goblingirl/right-arm 218 | rotate: false 219 | xy: 160, 69 220 | size: 28, 50 221 | orig: 28, 50 222 | offset: 0, 0 223 | index: -1 224 | goblingirl/right-foot 225 | rotate: true 226 | xy: 100, 56 227 | size: 63, 33 228 | orig: 63, 33 229 | offset: 0, 0 230 | index: -1 231 | goblingirl/right-hand 232 | rotate: false 233 | xy: 190, 82 234 | size: 36, 37 235 | orig: 36, 37 236 | offset: 0, 0 237 | index: -1 238 | goblingirl/right-lower-leg 239 | rotate: true 240 | xy: 26, 162 241 | size: 36, 76 242 | orig: 36, 76 243 | offset: 0, 0 244 | index: -1 245 | goblingirl/right-shoulder 246 | rotate: true 247 | xy: 159, 121 248 | size: 39, 45 249 | orig: 39, 45 250 | offset: 0, 0 251 | index: -1 252 | goblingirl/right-upper-leg 253 | rotate: true 254 | xy: 94, 121 255 | size: 34, 63 256 | orig: 34, 63 257 | offset: 0, 0 258 | index: -1 259 | goblingirl/torso 260 | rotate: false 261 | xy: 26, 274 262 | size: 68, 96 263 | orig: 68, 96 264 | offset: 0, 0 265 | index: -1 266 | goblingirl/undie-straps 267 | rotate: true 268 | xy: 169, 323 269 | size: 55, 19 270 | orig: 55, 19 271 | offset: 0, 0 272 | index: -1 273 | goblingirl/undies 274 | rotate: false 275 | xy: 175, 167 276 | size: 36, 29 277 | orig: 36, 29 278 | offset: 0, 0 279 | index: -1 280 | shield 281 | rotate: false 282 | xy: 26, 200 283 | size: 70, 72 284 | orig: 70, 72 285 | offset: 0, 0 286 | index: -1 287 | spear 288 | rotate: false 289 | xy: 2, 153 290 | size: 22, 368 291 | orig: 22, 368 292 | offset: 0, 0 293 | index: -1 294 | -------------------------------------------------------------------------------- /dist/assets/spine/goblins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/goblins.png -------------------------------------------------------------------------------- /dist/assets/spine/iP4_BGtile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/iP4_BGtile.jpg -------------------------------------------------------------------------------- /dist/assets/spine/iP4_ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/iP4_ground.png -------------------------------------------------------------------------------- /dist/assets/spine/spineboy.atlas: -------------------------------------------------------------------------------- 1 | spineboy.png 2 | format: RGBA8888 3 | filter: Linear,Linear 4 | repeat: none 5 | eyes-closed 6 | rotate: false 7 | xy: 73, 509 8 | size: 34, 27 9 | orig: 34, 27 10 | offset: 0, 0 11 | index: -1 12 | eyes 13 | rotate: false 14 | xy: 75, 464 15 | size: 34, 27 16 | orig: 34, 27 17 | offset: 0, 0 18 | index: -1 19 | head 20 | rotate: false 21 | xy: 2, 2 22 | size: 121, 132 23 | orig: 121, 132 24 | offset: 0, 0 25 | index: -1 26 | left-ankle 27 | rotate: false 28 | xy: 96, 351 29 | size: 25, 32 30 | orig: 25, 32 31 | offset: 0, 0 32 | index: -1 33 | left-arm 34 | rotate: false 35 | xy: 39, 423 36 | size: 35, 29 37 | orig: 35, 29 38 | offset: 0, 0 39 | index: -1 40 | left-foot 41 | rotate: false 42 | xy: 2, 262 43 | size: 65, 30 44 | orig: 65, 30 45 | offset: 0, 0 46 | index: -1 47 | left-hand 48 | rotate: false 49 | xy: 2, 423 50 | size: 35, 38 51 | orig: 35, 38 52 | offset: 0, 0 53 | index: -1 54 | left-lower-leg 55 | rotate: false 56 | xy: 72, 202 57 | size: 49, 64 58 | orig: 49, 64 59 | offset: 0, 0 60 | index: -1 61 | left-pant-bottom 62 | rotate: false 63 | xy: 2, 363 64 | size: 44, 22 65 | orig: 44, 22 66 | offset: 0, 0 67 | index: -1 68 | left-shoulder 69 | rotate: false 70 | xy: 39, 454 71 | size: 34, 53 72 | orig: 34, 53 73 | offset: 0, 0 74 | index: -1 75 | left-upper-leg 76 | rotate: false 77 | xy: 2, 464 78 | size: 33, 67 79 | orig: 33, 67 80 | offset: 0, 0 81 | index: -1 82 | neck 83 | rotate: false 84 | xy: 37, 509 85 | size: 34, 28 86 | orig: 34, 28 87 | offset: 0, 0 88 | index: -1 89 | pelvis 90 | rotate: false 91 | xy: 2, 294 92 | size: 63, 47 93 | orig: 63, 47 94 | offset: 0, 0 95 | index: -1 96 | right-ankle 97 | rotate: false 98 | xy: 96, 385 99 | size: 25, 30 100 | orig: 25, 30 101 | offset: 0, 0 102 | index: -1 103 | right-arm 104 | rotate: false 105 | xy: 96, 417 106 | size: 21, 45 107 | orig: 21, 45 108 | offset: 0, 0 109 | index: -1 110 | right-foot-idle 111 | rotate: false 112 | xy: 69, 268 113 | size: 53, 28 114 | orig: 53, 28 115 | offset: 0, 0 116 | index: -1 117 | right-foot 118 | rotate: false 119 | xy: 2, 230 120 | size: 67, 30 121 | orig: 67, 30 122 | offset: 0, 0 123 | index: -1 124 | right-hand 125 | rotate: false 126 | xy: 2, 387 127 | size: 32, 32 128 | orig: 32, 32 129 | offset: 0, 0 130 | index: -1 131 | right-lower-leg 132 | rotate: false 133 | xy: 72, 136 134 | size: 51, 64 135 | orig: 51, 64 136 | offset: 0, 0 137 | index: -1 138 | right-pant-bottom 139 | rotate: false 140 | xy: 2, 343 141 | size: 46, 18 142 | orig: 46, 18 143 | offset: 0, 0 144 | index: -1 145 | right-shoulder 146 | rotate: false 147 | xy: 67, 298 148 | size: 52, 51 149 | orig: 52, 51 150 | offset: 0, 0 151 | index: -1 152 | right-upper-leg 153 | rotate: false 154 | xy: 50, 351 155 | size: 44, 70 156 | orig: 44, 70 157 | offset: 0, 0 158 | index: -1 159 | torso 160 | rotate: false 161 | xy: 2, 136 162 | size: 68, 92 163 | orig: 68, 92 164 | offset: 0, 0 165 | index: -1 166 | -------------------------------------------------------------------------------- /dist/assets/spine/spineboy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/assets/spine/spineboy.png -------------------------------------------------------------------------------- /dist/basics/basic.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene}); 11 | 12 | var bunny = PIXI.Sprite.fromImage(BUNNY_IMAGE_PATH); 13 | 14 | // center the sprite's anchor point 15 | bunny.anchor.set(0.5); 16 | 17 | // move the sprite to the center of the screen 18 | bunny.x = app.renderer.width / 2; 19 | bunny.y = app.renderer.height / 2; 20 | 21 | console.log(app.renderer.width); 22 | 23 | app.stage.addChild(bunny); 24 | 25 | app.ticker.add(function(delta) { 26 | // just for fun, let's rotate mr rabbit a little 27 | // delta is 1 if running at 100% performance 28 | // creates frame-independent tranformation 29 | bunny.rotation += 0.1 / delta; 30 | }); 31 | 32 | }).catch( function importFailed(err){ 33 | console.error("Import failed: ", err); 34 | }); 35 | -------------------------------------------------------------------------------- /dist/basics/click.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene}); 11 | 12 | // Scale mode for all textures, will retain pixelation 13 | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 14 | 15 | var sprite = PIXI.Sprite.fromImage(BUNNY_IMAGE_PATH); 16 | 17 | // Set the initial position 18 | sprite.anchor.set(0.5); 19 | sprite.x = app.renderer.width / 2; 20 | sprite.y = app.renderer.height / 2; 21 | 22 | // Opt-in to interactivity 23 | sprite.interactive = true; 24 | 25 | // Shows hand cursor 26 | sprite.buttonMode = true; 27 | 28 | // Pointers normalize touch and mouse 29 | sprite.on('pointerdown', onClick); 30 | 31 | // Alternatively, use the mouse & touch events: 32 | // sprite.on('click', onClick); // mouse-only 33 | // sprite.on('tap', onClick); // touch-only 34 | 35 | 36 | app.stage.addChild(sprite); 37 | 38 | function onClick () { 39 | sprite.scale.x *= 1.25; 40 | sprite.scale.y *= 1.25; 41 | } 42 | 43 | }).catch( function importFailed(err){ 44 | console.error("Import failed: ", err); 45 | }); 46 | -------------------------------------------------------------------------------- /dist/basics/container-pivot.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, view: scene}); 11 | 12 | var container = new PIXI.Container(); 13 | 14 | app.stage.addChild(container); 15 | 16 | // Create a new texture 17 | var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH); 18 | 19 | // Create a 5x5 grid of bunnies 20 | for (var i = 0; i < 25; i++) { 21 | var bunny = new PIXI.Sprite(texture); 22 | bunny.anchor.set(0.5); 23 | bunny.x = (i % 5) * 40; 24 | bunny.y = Math.floor(i / 5) * 40; 25 | container.addChild(bunny); 26 | } 27 | 28 | // move container to the center 29 | container.x = app.renderer.width / 2; 30 | container.y = app.renderer.height / 2; 31 | 32 | // Center bunny sprite in local container coordinates 33 | container.pivot.x = container.width / 2; 34 | container.pivot.y = container.height / 2; 35 | 36 | // Listen for animate update 37 | app.ticker.add(function(delta) { 38 | // rotate the container! 39 | // use delta to create frame-independent tranform 40 | container.rotation -= 0.01 / delta; 41 | }); 42 | 43 | }).catch( function importFailed(err){ 44 | console.error("Import failed: ", err); 45 | }); 46 | -------------------------------------------------------------------------------- /dist/basics/container.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, view: scene}); 11 | 12 | var container = new PIXI.Container(); 13 | 14 | app.stage.addChild(container); 15 | 16 | var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH); 17 | 18 | // Create a 5x5 grid of bunnies 19 | for (var i = 0; i < 25; i++) { 20 | var bunny = new PIXI.Sprite(texture); 21 | bunny.anchor.set(0.5); 22 | bunny.x = (i % 5) * 40; 23 | bunny.y = Math.floor(i / 5) * 40; 24 | container.addChild(bunny); 25 | } 26 | 27 | // Center on the screen 28 | container.x = (app.renderer.width - container.width) / 2; 29 | container.y = (app.renderer.height - container.height) / 2; 30 | 31 | }).catch( function importFailed(err){ 32 | console.error("Import failed: ", err); 33 | }); 34 | -------------------------------------------------------------------------------- /dist/basics/graphics.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | 4 | px.configImport({"pxFramework:": PIXI_PATH}); 5 | px.import({ scene: 'px:scene.1.js', 6 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 7 | 8 | var scene = imports.scene; 9 | var app = new PIXI.Application(800, 600, {view: scene}); 10 | 11 | var graphics = new PIXI.GraphicsV8(); 12 | 13 | // set a fill and line style 14 | graphics.beginFill(0xFF3300); 15 | graphics.lineStyle(4, 0xffd900, 1); 16 | 17 | // draw a shape 18 | graphics.moveTo(50,50); 19 | graphics.lineTo(250, 50); 20 | graphics.lineTo(100, 100); 21 | graphics.lineTo(50, 50); 22 | graphics.endFill(); 23 | 24 | // set a fill and a line style again and draw a rectangle 25 | graphics.lineStyle(2, 0x0000FF, 1); 26 | graphics.beginFill(0xFF700B, 1); 27 | graphics.drawRect(50, 250, 120, 120); 28 | 29 | // draw a rounded rectangle 30 | graphics.lineStyle(2, 0xFF00FF, 1); 31 | graphics.beginFill(0xFF00BB, 0.25); 32 | graphics.drawRoundedRect(150, 450, 300, 100, 35); 33 | graphics.endFill(); 34 | 35 | // draw a circle, set the lineStyle to zero so the circle doesn't have an outline 36 | graphics.lineStyle(0); 37 | graphics.beginFill(0xFFFF0B, 0.5); 38 | graphics.drawCircle(470, 90,60); 39 | graphics.endFill(); 40 | 41 | app.stage.addChild(graphics); 42 | 43 | }).catch( function importFailed(err){ 44 | console.error("Import failed: ", err); 45 | }); 46 | -------------------------------------------------------------------------------- /dist/basics/render-texture.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene}); 11 | 12 | var container = new PIXI.Container(); 13 | app.stage.addChild(container); 14 | 15 | var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH); 16 | 17 | for (var i = 0; i < 25; i++) { 18 | var bunny = new PIXI.Sprite(texture); 19 | bunny.x = (i % 5) * 30 + 100; 20 | bunny.y = Math.floor(i / 5) * 30 + 60; 21 | bunny.rotation = Math.random() * (Math.PI * 2) 22 | container.addChild(bunny); 23 | } 24 | 25 | var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1); 26 | var rt = new PIXI.RenderTexture(brt); 27 | 28 | var sprite = new PIXI.Sprite(rt); 29 | 30 | sprite.x = 450; 31 | sprite.y = 60; 32 | app.stage.addChild(sprite); 33 | 34 | app.ticker.add(function() { 35 | app.renderer.render(container, rt); 36 | }); 37 | 38 | }).catch( function importFailed(err) { 39 | console.error("Import failed: ", err); 40 | }); 41 | -------------------------------------------------------------------------------- /dist/basics/spritesheet.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const FIGHTER_IMAGE_PATH = ASSET_URL + '/assets/basic/fighter.json'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | PIXI.loader 13 | .initAppSceneContext(module.appSceneContext) 14 | .add(FIGHTER_IMAGE_PATH) 15 | .load(onAssetsLoaded); 16 | 17 | function onAssetsLoaded() 18 | { 19 | // create an array of textures from an image path 20 | var frames = []; 21 | 22 | for (var i = 0; i < 30; i++) { 23 | var val = i < 10 ? '0' + i : i; 24 | 25 | // magically works since the spritesheet was loaded with the pixi loader 26 | frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png')); 27 | } 28 | // create an AnimatedSprite (brings back memories from the days of Flash, right ?) 29 | var anim = new PIXI.extras.AnimatedSprite(frames); 30 | 31 | /* 32 | * An AnimatedSprite inherits all the properties of a PIXI sprite 33 | * so you can change its position, its anchor, mask it, etc 34 | */ 35 | anim.x = app.renderer.width / 2; 36 | anim.y = app.renderer.height / 2; 37 | anim.anchor.set(0.5); 38 | anim.animationSpeed = 0.5; 39 | anim.play(); 40 | 41 | app.stage.addChild(anim); 42 | 43 | // Animate the rotation 44 | app.ticker.add(function() { 45 | anim.rotation += 0.01; 46 | }); 47 | } 48 | 49 | }).catch( function importFailed(err) { 50 | console.error("Import failed: ", err); 51 | }); 52 | -------------------------------------------------------------------------------- /dist/basics/text.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | 4 | px.configImport({"pxFramework:": PIXI_PATH }); 5 | px.import({ scene: 'px:scene.1.js', 6 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 7 | 8 | var scene = imports.scene; 9 | var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb, view: scene}); 10 | 11 | // var basicText = new PIXI.Text('Basic text in pixi', new PIXI.TextStyle({fontFamily: 'DejaVuSans'})); 12 | var basicText = new PIXI.Text('Basic text in pixi'); 13 | basicText.x = 30; 14 | basicText.y = 90; 15 | 16 | app.stage.addChild(basicText); 17 | 18 | var style = new PIXI.TextStyle({ 19 | // fontFamily: 'Arial', 20 | fontFamily: 'DejaVuSans', 21 | fontSize: 36, 22 | fontStyle: 'italic', 23 | fontWeight: 'bold', 24 | fill: ['#ffffff', '#00ff99'], // gradient 25 | stroke: '#4a1850', 26 | strokeThickness: 5, 27 | dropShadow: true, 28 | dropShadowColor: '#000000', 29 | dropShadowBlur: 4, 30 | dropShadowAngle: Math.PI / 6, 31 | dropShadowDistance: 6, 32 | wordWrap: true, 33 | wordWrapWidth: 440 34 | }); 35 | 36 | var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); 37 | richText.x = 30; 38 | richText.y = 180; 39 | 40 | app.stage.addChild(richText); 41 | 42 | }).catch( function importFailed(err){ 43 | console.error("Import failed: ", err); 44 | }); 45 | -------------------------------------------------------------------------------- /dist/basics/textured-mesh.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const SNAKE_IMAGE_PATH = ASSET_URL + '/assets/basic/snake.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | var count = 0; 13 | 14 | // build a rope! 15 | var ropeLength = 918 / 20; 16 | var ropeLength = 45; 17 | 18 | var points = []; 19 | 20 | for (var i = 0; i < 25; i++) { 21 | points.push(new PIXI.Point(i * ropeLength, 0)); 22 | } 23 | 24 | var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage(SNAKE_IMAGE_PATH), points); 25 | 26 | strip.x = -40; 27 | strip.y = 300; 28 | 29 | app.stage.addChild(strip); 30 | 31 | var g = new PIXI.GraphicsV8(); 32 | g.x = strip.x; 33 | g.y = strip.y; 34 | app.stage.addChild(g); 35 | 36 | // start animating 37 | app.ticker.add(function() { 38 | count += 0.1; 39 | 40 | // make the snake 41 | for (var i = 0; i < points.length; i++) { 42 | points[i].y = Math.sin((i * 0.5) + count) * 30; 43 | points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 20; 44 | } 45 | renderPoints(); 46 | }); 47 | 48 | function renderPoints () { 49 | 50 | g.clear(); 51 | 52 | g.lineStyle(2,0xffc2c2); 53 | g.moveTo(points[0].x,points[0].y); 54 | 55 | for (var i = 1; i < points.length; i++) { 56 | g.lineTo(points[i].x,points[i].y); 57 | } 58 | 59 | for (var i = 1; i < points.length; i++) { 60 | g.beginFill(0xff0022); 61 | g.drawCircle(points[i].x,points[i].y,10); 62 | g.endFill(); 63 | } 64 | } 65 | 66 | }).catch( function importFailed(err){ 67 | console.error("Import failed: ", err); 68 | }); 69 | -------------------------------------------------------------------------------- /dist/basics/tiling-sprite.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const IMAGE_PATH = ASSET_URL + '/assets/p2.jpeg'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | // create a texture from an image path 13 | var texture = PIXI.Texture.fromImage(IMAGE_PATH); 14 | 15 | /* create a tiling sprite ... 16 | * requires a texture, a width and a height 17 | * in WebGL the image size should preferably be a power of two 18 | */ 19 | var tilingSprite = new PIXI.extras.TilingSprite( 20 | texture, 21 | app.renderer.width, 22 | app.renderer.height 23 | ); 24 | app.stage.addChild(tilingSprite); 25 | 26 | var count = 0; 27 | 28 | app.ticker.add(function() { 29 | 30 | count += 0.006; 31 | tilingSprite.tileScale.x = 2 + Math.sin(count); 32 | tilingSprite.tileScale.y = 2 + Math.cos(count); 33 | 34 | tilingSprite.tilePosition.x += 1; 35 | tilingSprite.tilePosition.y += 1; 36 | }); 37 | 38 | }).catch( function importFailed(err){ 39 | console.error("Import failed: ", err); 40 | }); 41 | -------------------------------------------------------------------------------- /dist/demos/alpha-mask.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BKG_IMAGE_PATH = ASSET_URL + '/assets/demo/bkg.jpg'; 4 | const CELLS_IMAGE_PATH = ASSET_URL + '/assets/demo/cells.png'; 5 | const FLOWER_TOP_IMAGE_PATH = ASSET_URL + '/assets/demo/flowerTop.png'; 6 | 7 | px.configImport({"pxFramework:": PIXI_PATH }); 8 | px.import({ scene: 'px:scene.1.js', 9 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 10 | 11 | var scene = imports.scene; 12 | var app = new PIXI.Application(800, 600, { view: scene}); 13 | 14 | app.stage.interactive = true; 15 | 16 | var bg = PIXI.Sprite.fromImage(BKG_IMAGE_PATH); 17 | 18 | app.stage.addChild(bg); 19 | 20 | var cells = PIXI.Sprite.fromImage(CELLS_IMAGE_PATH); 21 | cells.name = 'cells'; 22 | cells.scale.set(1.5); 23 | 24 | var mask = PIXI.Sprite.fromImage(FLOWER_TOP_IMAGE_PATH); 25 | mask.anchor.set(0.5); 26 | mask.name = 'mask'; 27 | mask.x = 310; 28 | mask.y = 190; 29 | 30 | cells.mask = mask; 31 | 32 | app.stage.addChild(mask, cells); 33 | 34 | var target = new PIXI.Point(); 35 | 36 | reset(); 37 | 38 | function reset () { 39 | target.x = Math.floor(Math.random() * 550); 40 | target.y = Math.floor(Math.random() * 300); 41 | } 42 | 43 | app.ticker.add(function() { 44 | 45 | mask.x += (target.x - mask.x) * 0.1; 46 | mask.y += (target.y - mask.y) * 0.1; 47 | 48 | if (Math.abs(mask.x - target.x) < 1) { 49 | reset(); 50 | } 51 | }); 52 | }).catch( function importFailed(err){ 53 | console.error("Import failed: ", err); 54 | }); 55 | -------------------------------------------------------------------------------- /dist/demos/animatedsprite-demo.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const MC_IMAGE_PATH = ASSET_URL + '/assets/demo/mc.json'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | app.stop(); 13 | 14 | PIXI.loader 15 | .initAppSceneContext(module.appSceneContext) 16 | .add('spritesheet', MC_IMAGE_PATH) 17 | .load(onAssetsLoaded); 18 | 19 | function onAssetsLoaded() { 20 | 21 | // create an array to store the textures 22 | var explosionTextures = [], 23 | i; 24 | 25 | for (i = 0; i < 26; i++) { 26 | var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i+1) + '.png'); 27 | explosionTextures.push(texture); 28 | } 29 | 30 | for (i = 0; i < 50; i++) { 31 | // create an explosion AnimatedSprite 32 | var explosion = new PIXI.extras.AnimatedSprite(explosionTextures); 33 | 34 | explosion.x = Math.random() * app.renderer.width; 35 | explosion.y = Math.random() * app.renderer.height; 36 | explosion.anchor.set(0.5); 37 | explosion.rotation = Math.random() * Math.PI; 38 | explosion.scale.set(0.75 + Math.random() * 0.5); 39 | explosion.gotoAndPlay(Math.random() * 27); 40 | app.stage.addChild(explosion); 41 | } 42 | 43 | // start animating 44 | app.start(); 45 | } 46 | 47 | }).catch( function importFailed(err){ 48 | console.error("Import failed: ", err); 49 | }); 50 | -------------------------------------------------------------------------------- /dist/demos/batch.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const TINY_MAGGOT_IMAGE_PATH = ASSET_URL + '/assets/demo/tinyMaggot.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, { view: scene}); 11 | 12 | var sprites = new PIXI.particles.ParticleContainer(10000, { 13 | scale: true, 14 | position: true, 15 | rotation: true, 16 | uvs: true, 17 | alpha: true 18 | }); 19 | app.stage.addChild(sprites); 20 | 21 | // create an array to store all the sprites 22 | var maggots = []; 23 | 24 | // For PXSceneRenderer, only 100 sprites available. 10000 will make it extremeley slow 25 | var totalSprites = app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; 26 | 27 | for (var i = 0; i < totalSprites; i++) { 28 | 29 | // create a new Sprite 30 | var dude = PIXI.Sprite.fromImage(TINY_MAGGOT_IMAGE_PATH); 31 | 32 | dude.tint = Math.random() * 0xE8D4CD; 33 | 34 | // set the anchor point so the texture is centerd on the sprite 35 | dude.anchor.set(0.5); 36 | 37 | // different maggots, different sizes 38 | dude.scale.set(0.8 + Math.random() * 0.3); 39 | 40 | // scatter them all 41 | dude.x = Math.random() * app.renderer.width; 42 | dude.y = Math.random() * app.renderer.height; 43 | 44 | dude.tint = Math.random() * 0x808080; 45 | 46 | // create a random direction in radians 47 | dude.direction = Math.random() * Math.PI * 2; 48 | 49 | // this number will be used to modify the direction of the sprite over time 50 | dude.turningSpeed = Math.random() - 0.8; 51 | 52 | // create a random speed between 0 - 2, and these maggots are slooww 53 | dude.speed = (2 + Math.random() * 2) * 0.2; 54 | 55 | dude.offset = Math.random() * 100; 56 | 57 | // finally we push the dude into the maggots array so it it can be easily accessed later 58 | maggots.push(dude); 59 | 60 | sprites.addChild(dude); 61 | } 62 | 63 | // create a bounding box box for the little maggots 64 | var dudeBoundsPadding = 100; 65 | var dudeBounds = new PIXI.Rectangle( 66 | -dudeBoundsPadding, 67 | -dudeBoundsPadding, 68 | app.renderer.width + dudeBoundsPadding * 2, 69 | app.renderer.height + dudeBoundsPadding * 2 70 | ); 71 | 72 | var tick = 0; 73 | 74 | app.ticker.add(function() { 75 | 76 | // iterate through the sprites and update their position 77 | for (var i = 0; i < maggots.length; i++) { 78 | 79 | var dude = maggots[i]; 80 | dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05; 81 | dude.direction += dude.turningSpeed * 0.01; 82 | dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); 83 | dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); 84 | dude.rotation = -dude.direction + Math.PI; 85 | 86 | // wrap the maggots 87 | if (dude.x < dudeBounds.x) { 88 | dude.x += dudeBounds.width; 89 | } 90 | else if (dude.x > dudeBounds.x + dudeBounds.width) { 91 | dude.x -= dudeBounds.width; 92 | } 93 | 94 | if (dude.y < dudeBounds.y) { 95 | dude.y += dudeBounds.height; 96 | } 97 | else if (dude.y > dudeBounds.y + dudeBounds.height) { 98 | dude.y -= dudeBounds.height; 99 | } 100 | } 101 | 102 | // increment the ticker 103 | tick += 0.1; 104 | }); 105 | 106 | }).catch( function importFailed(err){ 107 | console.error("Import failed: ", err); 108 | }); 109 | -------------------------------------------------------------------------------- /dist/demos/blendmodes.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BG_ROTATE_IMAGE_PATH = ASSET_URL + '/assets/demo/BGrotate.jpg'; 4 | const FLOWER_TOP_IMAGE_PATH = ASSET_URL + '/assets/demo/flowerTop.png'; 5 | 6 | px.configImport({"pxFramework:": PIXI_PATH}); 7 | px.import({ scene: 'px:scene.1.js', 8 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 9 | 10 | var scene = imports.scene; 11 | var app = new PIXI.Application(800, 600, { view: scene}); 12 | 13 | // create a new background sprite 14 | var background = new PIXI.Sprite.fromImage(BG_ROTATE_IMAGE_PATH); 15 | background.width = app.renderer.width; 16 | background.height = app.renderer.height; 17 | app.stage.addChild(background); 18 | 19 | // create an array to store a reference to the dudes 20 | var dudeArray = []; 21 | 22 | var totaldudes = 20; 23 | 24 | for (var i = 0; i < totaldudes; i++) { 25 | 26 | // create a new Sprite that uses the image name that we just generated as its source 27 | var dude = PIXI.Sprite.fromImage(FLOWER_TOP_IMAGE_PATH); 28 | 29 | dude.anchor.set(0.5); 30 | 31 | // set a random scale for the dude 32 | dude.scale.set(0.8 + Math.random() * 0.3); 33 | 34 | // finally let's set the dude to be at a random position... 35 | dude.x = Math.floor(Math.random() * app.renderer.width); 36 | dude.y = Math.floor(Math.random() * app.renderer.height); 37 | 38 | // The important bit of this example, this is how you change the default blend mode of the sprite 39 | dude.blendMode = PIXI.BLEND_MODES.ADD; 40 | 41 | // create some extra properties that will control movement 42 | dude.direction = Math.random() * Math.PI * 2; 43 | 44 | // this number will be used to modify the direction of the dude over time 45 | dude.turningSpeed = Math.random() - 0.8; 46 | 47 | // create a random speed for the dude between 0 - 2 48 | dude.speed = 2 + Math.random() * 2; 49 | 50 | // finally we push the dude into the dudeArray so it it can be easily accessed later 51 | dudeArray.push(dude); 52 | 53 | app.stage.addChild(dude); 54 | } 55 | 56 | // create a bounding box for the little dudes 57 | var dudeBoundsPadding = 100; 58 | 59 | var dudeBounds = new PIXI.Rectangle( 60 | -dudeBoundsPadding, 61 | -dudeBoundsPadding, 62 | app.renderer.width + dudeBoundsPadding * 2, 63 | app.renderer.height + dudeBoundsPadding * 2 64 | ); 65 | 66 | app.ticker.add(function() { 67 | 68 | // iterate through the dudes and update the positions 69 | for (var i = 0; i < dudeArray.length; i++) { 70 | 71 | var dude = dudeArray[i]; 72 | dude.direction += dude.turningSpeed * 0.01; 73 | dude.x += Math.sin(dude.direction) * dude.speed; 74 | dude.y += Math.cos(dude.direction) * dude.speed; 75 | dude.rotation = -dude.direction - Math.PI / 2; 76 | 77 | // wrap the dudes by testing their bounds... 78 | if (dude.x < dudeBounds.x) { 79 | dude.x += dudeBounds.width; 80 | } 81 | else if (dude.x > dudeBounds.x + dudeBounds.width) { 82 | dude.x -= dudeBounds.width; 83 | } 84 | 85 | if (dude.y < dudeBounds.y) { 86 | dude.y += dudeBounds.height; 87 | } 88 | else if (dude.y > dudeBounds.y + dudeBounds.height) { 89 | dude.y -= dudeBounds.height; 90 | } 91 | } 92 | }); 93 | 94 | }).catch( function importFailed(err){ 95 | console.error("Import failed: ", err); 96 | }); 97 | -------------------------------------------------------------------------------- /dist/demos/cacheAsBitmap.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const MONSTERS_IMAGE_PATH = ASSET_URL + '/assets/demo/monsters.json'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, { view: scene }); 11 | 12 | 13 | app.stop(); 14 | 15 | // load resources 16 | PIXI.loader 17 | .initAppSceneContext(module.appSceneContext) 18 | .add('spritesheet', MONSTERS_IMAGE_PATH) 19 | .load(onAssetsLoaded); 20 | 21 | // holder to store aliens 22 | var aliens = []; 23 | var alienFrames = [ 24 | 'eggHead.png', 25 | 'flowerTop.png', 26 | 'helmlok.png', 27 | 'skully.png' 28 | ]; 29 | 30 | var count = 0; 31 | 32 | // create an empty container 33 | var alienContainer = new PIXI.Container(); 34 | alienContainer.x = 400; 35 | alienContainer.y = 300; 36 | 37 | // make the stage interactive 38 | app.stage.interactive = true; 39 | app.stage.addChild(alienContainer); 40 | 41 | function onAssetsLoaded() { 42 | // add a bunch of aliens with textures from image paths 43 | for (var i = 0; i < 100; i++) { 44 | 45 | var frameName = alienFrames[i % 4]; 46 | 47 | // create an alien using the frame name.. 48 | var alien = PIXI.Sprite.fromFrame(frameName); 49 | alien.tint = Math.random() * 0xFFFFFF; 50 | 51 | /* 52 | * fun fact for the day :) 53 | * another way of doing the above would be 54 | * var texture = PIXI.Texture.fromFrame(frameName); 55 | * var alien = new PIXI.Sprite(texture); 56 | */ 57 | alien.x = Math.random() * 800 - 400; 58 | alien.y = Math.random() * 600 - 300; 59 | alien.anchor.x = 0.5; 60 | alien.anchor.y = 0.5; 61 | aliens.push(alien); 62 | alienContainer.addChild(alien); 63 | } 64 | app.start(); 65 | } 66 | 67 | // Combines both mouse click + touch tap 68 | app.stage.on('pointertap', onClick); 69 | 70 | function onClick() { 71 | alienContainer.cacheAsBitmap = !alienContainer.cacheAsBitmap; 72 | } 73 | 74 | app.ticker.add(function() { 75 | 76 | // let's rotate the aliens a little bit 77 | for (var i = 0; i < 100; i++) { 78 | var alien = aliens[i]; 79 | alien.rotation += 0.1; 80 | } 81 | 82 | count += 0.01; 83 | 84 | alienContainer.scale.x = Math.sin(count); 85 | alienContainer.scale.y = Math.sin(count); 86 | alienContainer.rotation += 0.01; 87 | }); 88 | }).catch( function importFailed(err){ 89 | console.error("Import failed: ", err); 90 | }); 91 | -------------------------------------------------------------------------------- /dist/demos/dragging.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, { backgroundColor : 0x1099bb, view: scene}); 11 | 12 | // create a texture from an image path 13 | var texture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH); 14 | 15 | // Scale mode for pixelation 16 | texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 17 | 18 | for (var i = 0; i < 10; i++) { 19 | createBunny( 20 | Math.floor(Math.random() * app.renderer.width), 21 | Math.floor(Math.random() * app.renderer.height) 22 | ); 23 | } 24 | 25 | function createBunny(x, y) { 26 | 27 | // create our little bunny friend.. 28 | var bunny = new PIXI.Sprite(texture); 29 | 30 | // enable the bunny to be interactive... this will allow it to respond to mouse and touch events 31 | bunny.interactive = true; 32 | 33 | // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse 34 | bunny.buttonMode = true; 35 | 36 | // center the bunny's anchor point 37 | bunny.anchor.set(0.5); 38 | 39 | // make it a bit bigger, so it's easier to grab 40 | bunny.scale.set(3); 41 | 42 | // setup events for mouse + touch using 43 | // the pointer events 44 | bunny 45 | .on('pointerdown', onDragStart) 46 | .on('pointerup', onDragEnd) 47 | .on('pointerupoutside', onDragEnd) 48 | .on('pointermove', onDragMove); 49 | 50 | // For mouse-only events 51 | // .on('mousedown', onDragStart) 52 | // .on('mouseup', onDragEnd) 53 | // .on('mouseupoutside', onDragEnd) 54 | // .on('mousemove', onDragMove); 55 | 56 | // For touch-only events 57 | // .on('touchstart', onDragStart) 58 | // .on('touchend', onDragEnd) 59 | // .on('touchendoutside', onDragEnd) 60 | // .on('touchmove', onDragMove); 61 | 62 | // move the sprite to its designated position 63 | bunny.x = x; 64 | bunny.y = y; 65 | 66 | // add it to the stage 67 | app.stage.addChild(bunny); 68 | } 69 | 70 | function onDragStart(event) { 71 | // store a reference to the data 72 | // the reason for this is because of multitouch 73 | // we want to track the movement of this particular touch 74 | this.data = event.data; 75 | this.alpha = 0.5; 76 | this.dragging = true; 77 | } 78 | 79 | function onDragEnd() { 80 | this.alpha = 1; 81 | this.dragging = false; 82 | // set the interaction data to null 83 | this.data = null; 84 | } 85 | 86 | function onDragMove() { 87 | if (this.dragging) { 88 | var newPosition = this.data.getLocalPosition(this.parent); 89 | this.x = newPosition.x; 90 | this.y = newPosition.y; 91 | } 92 | } 93 | }).catch( function importFailed(err){ 94 | console.error("Import failed: ", err); 95 | }); 96 | -------------------------------------------------------------------------------- /dist/demos/graphics-demo.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | 4 | px.configImport({"pxFramework:": PIXI_PATH}); 5 | px.import({ scene: 'px:scene.1.js', 6 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 7 | 8 | var scene = imports.scene; 9 | var app = new PIXI.Application(800, 600, {view: scene}); 10 | 11 | var graphics = new PIXI.GraphicsV8(); 12 | 13 | // set a fill and line style 14 | graphics.beginFill(0xFF3300); 15 | graphics.lineStyle(10, 0xffd900, 1); 16 | 17 | // draw a shape 18 | graphics.moveTo(50,50); 19 | graphics.lineTo(250, 50); 20 | graphics.lineTo(100, 100); 21 | graphics.lineTo(250, 220); 22 | graphics.lineTo(50, 220); 23 | graphics.lineTo(50, 50); 24 | graphics.endFill(); 25 | 26 | // set a fill and line style again 27 | graphics.lineStyle(10, 0xFF0000, 0.4); 28 | graphics.beginFill(0xFF700B, 1); 29 | 30 | // draw a second shape 31 | graphics.moveTo(210,300); 32 | graphics.lineTo(450,320); 33 | graphics.lineTo(570,350); 34 | graphics.quadraticCurveTo(600, 0, 480,100); 35 | graphics.lineTo(330,120); 36 | graphics.lineTo(410,200); 37 | graphics.lineTo(210,300); 38 | graphics.endFill(); 39 | 40 | // draw a rectangle 41 | graphics.lineStyle(2, 0x0000FF, 1); 42 | graphics.drawRect(50, 250, 100, 100); 43 | 44 | // draw a circle 45 | graphics.lineStyle(0); 46 | graphics.beginFill(0xFFFF0B, 0.5); 47 | graphics.drawCircle(470, 200,100); 48 | graphics.endFill(); 49 | 50 | graphics.lineStyle(20, 0x33FF00); 51 | graphics.moveTo(30,30); 52 | graphics.lineTo(600, 300); 53 | 54 | 55 | app.stage.addChild(graphics); 56 | 57 | // let's create a moving shape 58 | var thing = new PIXI.GraphicsV8(); 59 | app.stage.addChild(thing); 60 | thing.x = 800/2; 61 | thing.y = 600/2; 62 | 63 | var count = 0; 64 | 65 | // Just click on the stage to draw random lines 66 | scene.on('onMouseDown',function(e){ 67 | onClick(); 68 | }); 69 | 70 | function onClick() { 71 | graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1); 72 | graphics.moveTo(Math.random() * 800, Math.random() * 600); 73 | graphics.bezierCurveTo( 74 | Math.random() * 800, Math.random() * 600, 75 | Math.random() * 800, Math.random() * 600, 76 | Math.random() * 800, Math.random() * 600 77 | ); 78 | } 79 | 80 | app.ticker.add(function() { 81 | 82 | count += 0.1; 83 | 84 | thing.clear(); 85 | thing.lineStyle(10, 0xff0000, 1); 86 | thing.beginFill(0xffFF00, 0.5); 87 | 88 | thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); 89 | thing.lineTo( 120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20); 90 | thing.lineTo( 120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20); 91 | thing.lineTo( -120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20); 92 | thing.lineTo( -120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); 93 | 94 | thing.rotation = count * 0.1; 95 | }); 96 | 97 | }).catch( function importFailed(err){ 98 | console.error("Import failed: ", err); 99 | }); 100 | -------------------------------------------------------------------------------- /dist/demos/interactivity.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUTTON_TEST_BG_IMAGE_PATH = ASSET_URL + '/assets/demo/button_test_BG.jpg'; 4 | const BUTTON_IMAGE_PATH = ASSET_URL + '/assets/demo/button.png'; 5 | const BUTTON_DOWN_IMAGE_PATH = ASSET_URL + '/assets/demo/buttonDown.png'; 6 | const BUTTON_OVER_IMAGE_PATH = ASSET_URL + '/assets/demo/buttonOver.png'; 7 | 8 | px.configImport({"pxFramework:": PIXI_PATH}); 9 | px.import({ scene: 'px:scene.1.js', 10 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 11 | 12 | var scene = imports.scene; 13 | var app = new PIXI.Application(800, 600, {view: scene}); 14 | 15 | // create a background... 16 | var background = PIXI.Sprite.fromImage(BUTTON_TEST_BG_IMAGE_PATH); 17 | background.width = app.renderer.width; 18 | background.height = app.renderer.height; 19 | 20 | // add background to stage... 21 | app.stage.addChild(background); 22 | 23 | // create some textures from an image path 24 | var textureButton = PIXI.Texture.fromImage(BUTTON_IMAGE_PATH); 25 | var textureButtonDown = PIXI.Texture.fromImage(BUTTON_DOWN_IMAGE_PATH); 26 | var textureButtonOver = PIXI.Texture.fromImage(BUTTON_OVER_IMAGE_PATH); 27 | 28 | var buttons = []; 29 | 30 | var buttonPositions = [ 31 | 175, 75, 32 | 655, 75, 33 | 410, 325, 34 | 150, 465, 35 | 685, 445 36 | ]; 37 | 38 | for (var i = 0; i < 5; i++) { 39 | 40 | var button = new PIXI.Sprite(textureButton); 41 | button.buttonMode = true; 42 | 43 | button.anchor.set(0.5); 44 | button.x = buttonPositions[i*2]; 45 | button.y = buttonPositions[i*2 + 1]; 46 | 47 | // make the button interactive... 48 | button.interactive = true; 49 | button.buttonMode = true; 50 | 51 | button 52 | // Mouse & touch events are normalized into 53 | // the pointer* events for handling different 54 | // button events. 55 | .on('pointerdown', onButtonDown) 56 | .on('pointerup', onButtonUp) 57 | .on('pointerupoutside', onButtonUp) 58 | .on('pointerover', onButtonOver) 59 | .on('pointerout', onButtonOut); 60 | 61 | // Use mouse-only events 62 | // .on('mousedown', onButtonDown) 63 | // .on('mouseup', onButtonUp) 64 | // .on('mouseupoutside', onButtonUp) 65 | // .on('mouseover', onButtonOver) 66 | // .on('mouseout', onButtonOut) 67 | 68 | // Use touch-only events 69 | // .on('touchstart', onButtonDown) 70 | // .on('touchend', onButtonUp) 71 | // .on('touchendoutside', onButtonUp) 72 | 73 | // add it to the stage 74 | app.stage.addChild(button); 75 | 76 | // add button to array 77 | buttons.push(button); 78 | } 79 | 80 | // set some silly values... 81 | buttons[0].scale.set(1.2); 82 | buttons[2].rotation = Math.PI / 10; 83 | buttons[3].scale.set(0.8); 84 | buttons[4].scale.set(0.8,1.2); 85 | buttons[4].rotation = Math.PI; 86 | 87 | function onButtonDown() { 88 | this.isdown = true; 89 | this.texture = textureButtonDown; 90 | this.alpha = 1; 91 | } 92 | 93 | function onButtonUp() { 94 | this.isdown = false; 95 | if (this.isOver) { 96 | this.texture = textureButtonOver; 97 | } 98 | else { 99 | this.texture = textureButton; 100 | } 101 | } 102 | 103 | function onButtonOver() { 104 | this.isOver = true; 105 | if (this.isdown) { 106 | return; 107 | } 108 | this.texture = textureButtonOver; 109 | } 110 | 111 | function onButtonOut() { 112 | this.isOver = false; 113 | if (this.isdown) { 114 | return; 115 | } 116 | this.texture = textureButton; 117 | } 118 | 119 | }).catch( function importFailed(err){ 120 | console.error("Import failed: ", err); 121 | }); 122 | -------------------------------------------------------------------------------- /dist/demos/masking.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BG_ROTATE_IMAGE_PATH = ASSET_URL + '/assets/demo/BGrotate.jpg'; 4 | const SCENE_ROTATE_IMAGE_PATH = ASSET_URL + '/assets/demo/SceneRotate.jpg'; 5 | const LIGHT_ROTATE1_IMAGE_PATH = ASSET_URL + '/assets/demo/LightRotate1.png'; 6 | const LIGHT_ROTATE2_IMAGE_PATH = ASSET_URL + '/assets/demo/LightRotate2.png'; 7 | const PANDA_IMAGE_PATH = ASSET_URL + '/assets/demo/panda.png'; 8 | 9 | px.configImport({"pxFramework:": PIXI_PATH}); 10 | px.import({ scene: 'px:scene.1.js', 11 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 12 | 13 | var scene = imports.scene; 14 | var app = new PIXI.Application(800, 600, { backgroundColor : 0x1099bb, view: scene}); 15 | 16 | app.stage.interactive = true; 17 | 18 | var bg = PIXI.Sprite.fromImage(BG_ROTATE_IMAGE_PATH); 19 | 20 | bg.anchor.set(0.5); 21 | 22 | bg.x = app.renderer.width / 2; 23 | bg.y = app.renderer.height / 2; 24 | 25 | app.stage.addChild(bg); 26 | 27 | var container = new PIXI.Container(); 28 | container.x = app.renderer.width / 2; 29 | container.y = app.renderer.height / 2; 30 | 31 | // add a bunch of sprites 32 | var bgFront = PIXI.Sprite.fromImage(SCENE_ROTATE_IMAGE_PATH); 33 | bgFront.anchor.set(0.5); 34 | 35 | var light2 = PIXI.Sprite.fromImage(LIGHT_ROTATE2_IMAGE_PATH); 36 | light2.anchor.set(0.5); 37 | 38 | var light1 = PIXI.Sprite.fromImage(LIGHT_ROTATE1_IMAGE_PATH); 39 | light1.anchor.set(0.5); 40 | 41 | var panda = PIXI.Sprite.fromImage(PANDA_IMAGE_PATH); 42 | panda.anchor.set(0.5); 43 | 44 | container.addChild(bgFront, light2, light1, panda); 45 | 46 | app.stage.addChild(container); 47 | 48 | // let's create a moving shape 49 | var thing = new PIXI.GraphicsV8(); 50 | app.stage.addChild(thing); 51 | thing.x = app.renderer.width / 2; 52 | thing.y = app.renderer.height / 2; 53 | thing.lineStyle(0); 54 | 55 | container.mask = thing; 56 | 57 | var count = 0; 58 | 59 | app.stage.on('pointertap', function() { 60 | if (!container.mask) { 61 | container.mask = thing; 62 | } 63 | else { 64 | container.mask = null; 65 | } 66 | }); 67 | 68 | var help = new PIXI.Text('Click or tap to turn masking on / off.', { 69 | fontFamily: 'Arial', 70 | fontSize: 12, 71 | fontWeight:'bold', 72 | fill: 'white' 73 | }); 74 | help.y = app.renderer.height - 26; 75 | help.x = 10; 76 | app.stage.addChild(help); 77 | 78 | app.ticker.add(function() { 79 | bg.rotation += 0.01; 80 | bgFront.rotation -= 0.01; 81 | 82 | light1.rotation += 0.02; 83 | light2.rotation += 0.01; 84 | 85 | panda.scale.x = 1 + Math.sin(count) * 0.04; 86 | panda.scale.y = 1 + Math.cos(count) * 0.04; 87 | 88 | count += 0.1; 89 | 90 | thing.clear(); 91 | 92 | thing.beginFill(0x8bc5ff, 0.4); 93 | thing.drawRect(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20, 120, 120); 94 | // thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); 95 | // thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20); 96 | // thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20); 97 | // thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20); 98 | thing.rotation = count * 0.1; 99 | }); 100 | 101 | }).catch( function importFailed(err){ 102 | console.error("Import failed: ", err); 103 | }); 104 | -------------------------------------------------------------------------------- /dist/demos/render-texture-demo.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BASE_IMAGE_PATH = ASSET_URL + '/assets/demo/'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | // create two render textures... these dynamic textures will be used to draw the scene into itself 13 | var renderTexture = PIXI.RenderTexture.create( 14 | app.renderer.width, 15 | app.renderer.height 16 | ); 17 | 18 | var renderTexture2 = PIXI.RenderTexture.create( 19 | app.renderer.width, 20 | app.renderer.height 21 | ); 22 | 23 | var currentTexture = renderTexture; 24 | 25 | 26 | // create a new sprite that uses the render texture we created above 27 | var outputSprite = new PIXI.Sprite(currentTexture); 28 | 29 | // align the sprite 30 | outputSprite.x = 400; 31 | outputSprite.y = 300; 32 | outputSprite.anchor.set(0.5); 33 | 34 | // add to stage 35 | app.stage.addChild(outputSprite); 36 | 37 | var stuffContainer = new PIXI.Container(); 38 | 39 | stuffContainer.x = 400; 40 | stuffContainer.y = 300; 41 | 42 | app.stage.addChild(stuffContainer); 43 | // create an array of image ids.. 44 | var fruits = [ 45 | BASE_IMAGE_PATH + 'spinObj_01.png', 46 | BASE_IMAGE_PATH + 'spinObj_02.png', 47 | BASE_IMAGE_PATH + 'spinObj_03.png', 48 | BASE_IMAGE_PATH + 'spinObj_04.png', 49 | BASE_IMAGE_PATH + 'spinObj_05.png', 50 | BASE_IMAGE_PATH + 'spinObj_06.png', 51 | BASE_IMAGE_PATH + 'spinObj_07.png', 52 | BASE_IMAGE_PATH + 'spinObj_08.png' 53 | ]; 54 | 55 | // create an array of items 56 | var items = []; 57 | 58 | // now create some items and randomly position them in the stuff container 59 | for (var i = 0; i < 20; i++) { 60 | var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); 61 | item.x = Math.random() * 400 - 200; 62 | item.y = Math.random() * 400 - 200; 63 | item.anchor.set(0.5); 64 | stuffContainer.addChild(item); 65 | items.push(item); 66 | } 67 | 68 | var count = 0; 69 | app.ticker.add(function() { 70 | for (var i = 0; i < items.length; i++) { 71 | // rotate each item 72 | var item = items[i]; 73 | item.rotation += 0.1; 74 | } 75 | 76 | count += 0.01; 77 | 78 | // swap the buffers ... 79 | var temp = renderTexture; 80 | renderTexture = renderTexture2; 81 | renderTexture2 = temp; 82 | 83 | // set the new texture 84 | outputSprite.texture = renderTexture; 85 | 86 | // twist this up! 87 | stuffContainer.rotation -= 0.01; 88 | outputSprite.scale.set(1 + Math.sin(count) * 0.2); 89 | 90 | // render the stage to the texture 91 | // the 'true' clears the texture before the content is rendered 92 | app.renderer.render(app.stage, renderTexture2, false); 93 | }); 94 | 95 | }).catch( function importFailed(err){ 96 | console.error("Import failed: ", err); 97 | }); 98 | -------------------------------------------------------------------------------- /dist/demos/text-demo.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const TEXT_DEMO_BG_IMAGE_PATH = ASSET_URL + '/assets/demo/textDemoBG.jpg'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | // Webfont is not supported. 13 | // // // Load them google fonts before starting...! 14 | // window.WebFontConfig = { 15 | // google: { 16 | // families: ['Snippet', 'Arvo:700italic', 'Podkova:700'] 17 | // }, 18 | // 19 | // active: function() { 20 | // // do something 21 | // init(); 22 | // } 23 | // }; 24 | // 25 | // // include the web-font loader script 26 | // /* jshint ignore:start */ 27 | // (function() { 28 | // var wf = document.createElement('script'); 29 | // wf.src = ('https:' === document.location.protocol ? 'https' : 'http') + 30 | // '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 31 | // wf.type = 'text/javascript'; 32 | // wf.async = 'true'; 33 | // var s = document.getElementsByTagName('script')[0]; 34 | // s.parentNode.insertBefore(wf, s); 35 | // })(); 36 | // /* jshint ignore:end */ 37 | 38 | 39 | init(); 40 | 41 | function init() 42 | { 43 | // Bitmap is not supported yet. 44 | // PIXI.loader 45 | // .add('desyrel', 'required/assets/desyrel.xml') 46 | // .load(onAssetsLoaded); 47 | 48 | // function onAssetsLoaded() { 49 | // var bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' }); 50 | 51 | // bitmapFontText.x = app.renderer.width - bitmapFontText.textWidth - 20; 52 | // bitmapFontText.y = 20; 53 | 54 | // app.stage.addChild(bitmapFontText); 55 | // } 56 | 57 | // add a shiny background... 58 | var background = PIXI.Sprite.fromImage(TEXT_DEMO_BG_IMAGE_PATH); 59 | background.width = app.renderer.width; 60 | background.height = app.renderer.height; 61 | app.stage.addChild(background); 62 | 63 | // create some white text using the Snippet webfont 64 | var textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { 65 | fontFamily: 'Snippet', 66 | fontSize: 35, 67 | fill: 'white', 68 | align: 'left' 69 | }); 70 | textSample.position.set(20); 71 | 72 | // create a text object with a nice stroke 73 | var spinningText = new PIXI.Text('I\'m fun!', { 74 | fontWeight: 'bold', 75 | fontSize: 60, 76 | fontFamily: 'Arial', 77 | fill: '#cc00ff', 78 | align: 'center', 79 | stroke: '#FFFFFF', 80 | strokeThickness: 6 81 | }); 82 | 83 | // setting the anchor point to 0.5 will center align the text... great for spinning! 84 | spinningText.anchor.set(0.5); 85 | spinningText.x = app.renderer.width / 2; 86 | spinningText.y = app.renderer.height / 2; 87 | 88 | // create a text object that will be updated... 89 | var countingText = new PIXI.Text('COUNT 4EVAR: 0 ', { 90 | fontWeight: 'bold', 91 | fontStyle: 'italic', 92 | fontSize: 60, 93 | fontFamily: 'Arvo', 94 | fill: '#3e1707', 95 | align: 'center', 96 | stroke: '#a4410e', 97 | strokeThickness: 7 98 | }); 99 | 100 | countingText.x = app.renderer.width / 2; 101 | countingText.y = 500; 102 | countingText.anchor.x = 0.5; 103 | 104 | app.stage.addChild(textSample, spinningText, countingText); 105 | 106 | var count = 0; 107 | 108 | app.ticker.add(function() { 109 | 110 | count += 0.05; 111 | // update the text with a new string 112 | 113 | countingText.text = 'COUNT 4EVAR: ' + Math.floor(count); 114 | // let's spin the spinning text 115 | spinningText.rotation += 0.03; 116 | }); 117 | } 118 | }).catch( function importFailed(err){ 119 | console.error("Import failed: ", err); 120 | }); 121 | -------------------------------------------------------------------------------- /dist/demos/texture-rotate.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const FLOWER_TOP_IMAGE_PATH = ASSET_URL + '/assets/demo/flowerTop.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH }); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, { view: scene}); 11 | 12 | // create a new background sprite 13 | var background = new PIXI.Sprite.fromImage(FLOWER_TOP_IMAGE_PATH); 14 | 15 | //load imageResource and get size to texture 16 | var texture = null; 17 | scene.create({ 18 | t: 'imageResource', 19 | url: FLOWER_TOP_IMAGE_PATH, 20 | }).ready.then((imgResource) =>{ 21 | texture = PIXI.Texture.fromImage(FLOWER_TOP_IMAGE_PATH); 22 | texture.baseTexture.source = {width:imgResource.w, height:imgResource.h, src:FLOWER_TOP_IMAGE_PATH}; 23 | texture.baseTexture._sourceLoaded(); 24 | texture.baseTexture.emit('loaded',texture.baseTexture); 25 | init(); 26 | }); 27 | 28 | function init() { 29 | // create rotated textures 30 | var textures = [texture]; 31 | var D8 = PIXI.GroupD8; 32 | for (var rotate = 1; rotate < 16; rotate++) { 33 | var h = D8.isSwapWidthHeight(rotate) ? texture.frame.width : texture.frame.height; 34 | var w = D8.isSwapWidthHeight(rotate) ? texture.frame.height : texture.frame.width; 35 | var frame = texture.frame; 36 | var crop = new PIXI.Rectangle(texture.frame.x, texture.frame.y, w, h); 37 | var trim = crop; 38 | if (rotate%2==0) { 39 | var rotatedTexture = new PIXI.Texture(texture.baseTexture, frame, crop, trim, rotate); 40 | } else { 41 | //HACK to avoid exception 42 | //PIXI doesnt like diamond-shaped UVs, because they are different in canvas and webgl 43 | var rotatedTexture = new PIXI.Texture(texture.baseTexture, frame, crop, trim, rotate - 1); 44 | rotatedTexture.rotate++; 45 | } 46 | textures.push(rotatedTexture); 47 | } 48 | 49 | var offsetX = app.renderer.width / 16 | 0; 50 | var offsetY = app.renderer.height / 8 | 0; 51 | var gridW = app.renderer.width / 4 | 0; 52 | var gridH = app.renderer.height / 5 | 0; 53 | 54 | //normal rotations and mirrors 55 | for (var i = 0; i < 16; i++) { 56 | // create a new Sprite using rotated texture 57 | var dude = new PIXI.Sprite(textures[i < 8 ? i*2 : (i-8)*2+1]); 58 | dude.scale.x = 0.5; 59 | dude.scale.y = 0.5; 60 | // show it in grid 61 | dude.x = offsetX + gridW * (i % 4); 62 | dude.y = offsetY + gridH * (i / 4 | 0); 63 | app.stage.addChild(dude); 64 | var text = new PIXI.Text("rotate = "+dude.texture.rotate, { fontFamily: 'Arial' /*'Courier New'*/, fontSize:'12px', fill: 'white', align: 'left' }); 65 | text.x = dude.x; 66 | text.y = dude.y - 20; 67 | app.stage.addChild(text); 68 | } 69 | } 70 | 71 | }).catch( function importFailed(err){ 72 | console.error("Import failed: ", err); 73 | }); 74 | -------------------------------------------------------------------------------- /dist/demos/texture-swap.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const FLOWER_TOP_IMAGE_PATH = ASSET_URL + '/assets/demo/flowerTop.png'; 4 | const EGG_HEAD_IMAGE_PATH = ASSET_URL + '/assets/demo/eggHead.png'; 5 | 6 | px.configImport({"pxFramework:": PIXI_PATH}); 7 | px.import({ scene: 'px:scene.1.js', 8 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 9 | 10 | var scene = imports.scene; 11 | var app = new PIXI.Application(800, 600, {view: scene}); 12 | 13 | var bol = false; 14 | 15 | // create a texture from an image path 16 | var texture = PIXI.Texture.fromImage(FLOWER_TOP_IMAGE_PATH); 17 | 18 | // create a second texture 19 | var secondTexture = PIXI.Texture.fromImage(EGG_HEAD_IMAGE_PATH); 20 | 21 | // create a new Sprite using the texture 22 | var dude = new PIXI.Sprite(texture); 23 | 24 | // center the sprites anchor point 25 | dude.anchor.set(0.5); 26 | 27 | // move the sprite to the center of the screen 28 | dude.x = app.renderer.width / 2; 29 | dude.y = app.renderer.height / 2; 30 | 31 | app.stage.addChild(dude); 32 | 33 | // make the sprite interactive 34 | dude.interactive = true; 35 | dude.buttonMode = true; 36 | 37 | dude.on('pointertap', function() { 38 | bol = !bol; 39 | if (bol) { 40 | dude.texture = secondTexture; 41 | } 42 | else { 43 | dude.texture = texture; 44 | } 45 | }); 46 | 47 | app.ticker.add(function() { 48 | // just for fun, let's rotate mr rabbit a little 49 | dude.rotation += 0.1; 50 | }); 51 | 52 | }).catch( function importFailed(err){ 53 | console.error("Import failed: ", err); 54 | }); 55 | -------------------------------------------------------------------------------- /dist/demos/tinting.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const EGG_HEAD_IMAGE_PATH = ASSET_URL + '/assets/demo/eggHead.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.min.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, {view: scene}); 11 | 12 | // holder to store the aliens 13 | var aliens = []; 14 | 15 | var totalDudes = 20; 16 | 17 | for (var i = 0; i < totalDudes; i++) { 18 | 19 | // create a new Sprite that uses the image name that we just generated as its source 20 | var dude = PIXI.Sprite.fromImage(EGG_HEAD_IMAGE_PATH); 21 | 22 | // set the anchor point so the texture is centerd on the sprite 23 | dude.anchor.set(0.5); 24 | 25 | // set a random scale for the dude - no point them all being the same size! 26 | dude.scale.set(0.8 + Math.random() * 0.3); 27 | 28 | // finally lets set the dude to be at a random position.. 29 | dude.x = Math.random() * app.renderer.width; 30 | dude.y = Math.random() * app.renderer.height; 31 | 32 | dude.tint = Math.random() * 0xFFFFFF; 33 | 34 | // create some extra properties that will control movement : 35 | // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees 36 | dude.direction = Math.random() * Math.PI * 2; 37 | 38 | // this number will be used to modify the direction of the dude over time 39 | dude.turningSpeed = Math.random() - 0.8; 40 | 41 | // create a random speed for the dude between 0 - 2 42 | dude.speed = 2 + Math.random() * 2; 43 | 44 | // finally we push the dude into the aliens array so it it can be easily accessed later 45 | aliens.push(dude); 46 | 47 | app.stage.addChild(dude); 48 | } 49 | 50 | // create a bounding box for the little dudes 51 | var dudeBoundsPadding = 100; 52 | var dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, 53 | -dudeBoundsPadding, 54 | app.renderer.width + dudeBoundsPadding * 2, 55 | app.renderer.height + dudeBoundsPadding * 2); 56 | 57 | app.ticker.add(function() { 58 | 59 | // iterate through the dudes and update their position 60 | for (var i = 0; i < aliens.length; i++) { 61 | 62 | var dude = aliens[i]; 63 | dude.direction += dude.turningSpeed * 0.01; 64 | dude.x += Math.sin(dude.direction) * dude.speed; 65 | dude.y += Math.cos(dude.direction) * dude.speed; 66 | dude.rotation = -dude.direction - Math.PI / 2; 67 | 68 | // wrap the dudes by testing their bounds... 69 | if (dude.x < dudeBounds.x) { 70 | dude.x += dudeBounds.width; 71 | } 72 | else if (dude.x > dudeBounds.x + dudeBounds.width) { 73 | dude.x -= dudeBounds.width; 74 | } 75 | 76 | if (dude.y < dudeBounds.y) { 77 | dude.y += dudeBounds.height; 78 | } 79 | else if (dude.y > dudeBounds.y + dudeBounds.height) { 80 | dude.y -= dudeBounds.height; 81 | } 82 | } 83 | }); 84 | 85 | }).catch( function importFailed(err){ 86 | console.error("Import failed: ", err); 87 | }); 88 | -------------------------------------------------------------------------------- /dist/demos/transparent-background.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 4 | 5 | px.configImport({"pxFramework:": PIXI_PATH}); 6 | px.import({ scene: 'px:scene.1.js', 7 | pixi: 'pxFramework:pixi.js' }).then( function ready(imports) { 8 | 9 | var scene = imports.scene; 10 | var app = new PIXI.Application(800, 600, { transparent: true, view: scene}); 11 | 12 | // create a new Sprite from an image path. 13 | var bunny = PIXI.Sprite.fromImage(BUNNY_IMAGE_PATH); 14 | 15 | // center the sprite's anchor point 16 | bunny.anchor.set(0.5); 17 | 18 | // move the sprite to the center of the screen 19 | bunny.x = app.renderer.width / 2; 20 | bunny.y = app.renderer.height / 2; 21 | 22 | app.stage.addChild(bunny); 23 | 24 | app.ticker.add(function() { 25 | 26 | // just for fun, let's rotate mr rabbit a little 27 | bunny.rotation += 0.1; 28 | }); 29 | 30 | }).catch( function importFailed(err){ 31 | console.error("Import failed: ", err); 32 | }); 33 | -------------------------------------------------------------------------------- /dist/display/z-order.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const GREEN_IMAGE_PATH = ASSET_URL + '/assets/layer/square_green.png'; 4 | const BLUE_IMAGE_PATH = ASSET_URL + '/assets/layer/square_blue.png'; 5 | 6 | px.configImport({ "pxFramework:": PIXI_PATH }); 7 | px.import({ 8 | scene: 'px:scene.1.js', 9 | pixi: 'pxFramework:pixi.min.js', 10 | }).then(function(imports){ 11 | return px.import({ 12 | pixiDisplay: 'pxFramework:pixi-display.js' 13 | }).then(function(){ 14 | return imports.scene; 15 | }) 16 | }).then(function(scene) { 17 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb, view: scene }); 18 | 19 | //specify display list component 20 | app.stage.displayList = new PIXI.DisplayList(); 21 | 22 | // z-index = 0, sorting = true; 23 | var greenLayer = new PIXI.DisplayGroup(0, true); 24 | greenLayer.on('add', function (sprite) { 25 | //green bunnies go down 26 | sprite.zOrder = -sprite.y; 27 | }); 28 | 29 | // z-index = 1, sorting = true, we can provide zOrder function directly in constructor 30 | var blueLayer = new PIXI.DisplayGroup(1, function (sprite) { 31 | //blue bunnies go up 32 | sprite.zOrder = +sprite.y; 33 | }); 34 | 35 | // Drag is the best layer, dragged element is above everything else 36 | var dragLayer = new PIXI.DisplayGroup(2, false); 37 | 38 | // Shadows are the lowest 39 | var shadowLayer = new PIXI.DisplayGroup(-1, false); 40 | 41 | 42 | var blurFilter = new PIXI.filters.BlurFilter(); 43 | blurFilter.blur = 0.5; 44 | 45 | // create a texture from an image path 46 | var texture_green = PIXI.Texture.fromImage(GREEN_IMAGE_PATH); 47 | var texture_blue = PIXI.Texture.fromImage(BLUE_IMAGE_PATH); 48 | 49 | var bunniesOdd = new PIXI.Container(); 50 | var bunniesEven = new PIXI.Container(); 51 | var bunniesBlue = new PIXI.Container(); 52 | app.stage.addChild(bunniesOdd); 53 | app.stage.addChild(bunniesEven); 54 | app.stage.addChild(bunniesBlue); 55 | 56 | var ind = []; 57 | for (var i = 0; i < 15; i++) { 58 | var bunny = new PIXI.Sprite(texture_green); 59 | bunny.width = 50; 60 | bunny.height = 50; 61 | bunny.position.set(100 + 20 * i, 100 + 20 * i); 62 | bunny.anchor.set(0.5); 63 | // that thing is required 64 | bunny.displayGroup = greenLayer; 65 | if (i % 2 == 0) { 66 | bunniesEven.addChild(bunny); 67 | } else { 68 | bunniesOdd.addChild(bunny); 69 | } 70 | subscribe(bunny); 71 | } 72 | 73 | for (var i = 9; i >= 0; i--) { 74 | var bunny = new PIXI.Sprite(texture_blue); 75 | bunny.width = 50; 76 | bunny.height = 50; 77 | bunny.position.set(400 + 20 * i, 400 - 20 * i); 78 | bunny.anchor.set(0.5); 79 | // that thing is required 80 | bunny.displayGroup = blueLayer; 81 | bunniesBlue.addChild(bunny); 82 | subscribe(bunny); 83 | } 84 | 85 | function subscribe(obj) { 86 | obj.interactive = true; 87 | obj 88 | .on('pointerdown', onDragStart) 89 | .on('pointerup', onDragEnd) 90 | .on('pointerupoutside', onDragEnd) 91 | .on('pointermove', onDragMove); 92 | } 93 | 94 | 95 | function onDragStart(event) { 96 | // store a reference to the data 97 | // the reason for this is because of multitouch 98 | // we want to track the movement of this particular touch 99 | this.data = event.data; 100 | this.alpha = 0.5; 101 | this.dragging = true; 102 | this.oldGroup = this.displayGroup; 103 | this.displayGroup = dragLayer; 104 | forceCreate(); 105 | } 106 | 107 | function onDragEnd() { 108 | if(this.dragging){ 109 | this.displayGroup = this.oldGroup; 110 | forceCreate(); 111 | this.alpha = 1; 112 | this.dragging = false; 113 | // set the interaction data to null 114 | this.data = null; 115 | } 116 | } 117 | 118 | function onDragMove() { 119 | if (this.dragging) { 120 | var newPosition = this.data.getLocalPosition(this.parent); 121 | this.x = newPosition.x; 122 | this.y = newPosition.y; 123 | } 124 | } 125 | 126 | function forceCreate(){ 127 | for(var i = 0; i < greenLayer.computedChildren.length; ++i){ 128 | greenLayer.computedChildren[i].forceCreate(); 129 | } 130 | for(var i = 0; i < blueLayer.computedChildren.length; ++i){ 131 | blueLayer.computedChildren[i].forceCreate(); 132 | } 133 | for(var i = 0; i < dragLayer.computedChildren.length; ++i){ 134 | dragLayer.computedChildren[i].forceCreate(); 135 | } 136 | } 137 | }).catch(function importFailed(err) { 138 | console.error("Import failed: ", err); 139 | }); 140 | -------------------------------------------------------------------------------- /dist/layers/lighting.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const BG_IMAGE_PATH = ASSET_URL + '/assets/p2.jpeg'; 4 | const BUNNY_IMAGE_PATH = ASSET_URL + '/assets/basic/bunny.png'; 5 | 6 | px.configImport({ "pxFramework:": PIXI_PATH }); 7 | px.import({ 8 | scene: 'px:scene.1.js', 9 | pixi: 'pxFramework:pixi.min.js', 10 | }).then(function(imports) { 11 | return px.import({ 12 | pixiDisplay: 'pxFramework:pixi-layers.js' 13 | }).then(function() { 14 | return imports.scene; 15 | }) 16 | }).then(function(scene) { 17 | var WIDTH = 800, HEIGHT = 600, PAD = 80; 18 | 19 | var app = new PIXI.Application(WIDTH, HEIGHT, {view: scene }); 20 | 21 | //create the stage instead of container 22 | app.stage = new PIXI.display.Stage(); 23 | 24 | var background = new PIXI.extras.TilingSprite( 25 | PIXI.Texture.fromImage(BG_IMAGE_PATH), 26 | WIDTH, 27 | HEIGHT); 28 | app.stage.addChild(background); 29 | 30 | //make container for bunnies 31 | var bunnyWorld = new PIXI.Container(); 32 | app.stage.addChild(bunnyWorld); 33 | 34 | var lighting = new PIXI.display.Layer(); 35 | lighting.on('display', function(element) { 36 | element.blendMode = PIXI.BLEND_MODES.ADD 37 | }); 38 | lighting.filters = [new PIXI.filters.VoidFilter()]; 39 | lighting.filters[0].blendMode = PIXI.BLEND_MODES.MULTIPLY; 40 | 41 | lighting.filterArea = new PIXI.Rectangle(0, 0, WIDTH, HEIGHT); 42 | // lighting.filterArea = new PIXI.Rectangle(100, 100, 600, 400); //<-- try uncomment it 43 | 44 | app.stage.addChild(lighting); 45 | 46 | var ambient = new PIXI.GraphicsV8(); 47 | ambient.beginFill(0x808080, 1); 48 | ambient.blendMode = PIXI.BLEND_MODES.MULTIPLY; // pxscene not support filters and layer, add blendMode manully 49 | ambient.drawRect(0, 0, WIDTH, HEIGHT); 50 | ambient.endFill(); 51 | lighting.addChild(ambient); //<-- try comment it 52 | 53 | var bunnyTexture = PIXI.Texture.fromImage(BUNNY_IMAGE_PATH); 54 | 55 | function updateBunny(bunny) { 56 | bunny.x += bunny.vx; 57 | bunny.y += bunny.vy; 58 | if (bunny.x > WIDTH + PAD) { 59 | bunny.x -= WIDTH + 2 * PAD; 60 | } 61 | if (bunny.x < -PAD) { 62 | bunny.x += WIDTH + 2 * PAD; 63 | } 64 | if (bunny.y > HEIGHT + PAD) { 65 | bunny.y -= HEIGHT + 2 * PAD; 66 | } 67 | if (bunny.y < -PAD) { 68 | bunny.y += HEIGHT + 2 * PAD; 69 | } 70 | } 71 | 72 | function createBunny() { 73 | var container = new PIXI.Container(); 74 | 75 | var bunny = new PIXI.Sprite(bunnyTexture); 76 | bunny.update = updateBunny; 77 | bunny.anchor.set(0.5, 0.5); 78 | 79 | 80 | var angle = Math.random() * Math.PI * 2; 81 | var speed = 200.0; //px per second 82 | container.vx = Math.cos(angle) * speed / 60.0; 83 | container.vy = Math.sin(angle) * speed / 60.0; 84 | container.position.set(Math.random() * WIDTH, Math.random() * HEIGHT); 85 | 86 | var lightbulb = new PIXI.GraphicsV8(); 87 | var rr = Math.random() * 0x80 | 0; 88 | var rg = Math.random() * 0x80 | 0; 89 | var rb = Math.random() * 0x80 | 0; 90 | var rad = 50 + Math.random() * 20; 91 | 92 | lightbulb.lineStyle(0); 93 | lightbulb.beginFill((rr << 16) + (rg << 8) + rb, 1.0); 94 | lightbulb.drawCircle(0, 0, rad); 95 | lightbulb.endFill(); 96 | lightbulb.blendMode = PIXI.BLEND_MODES.ADD; // pxscene not support filters and layer, add blendMode manully 97 | // lightbulb.parentLayer = lighting; //<-- try comment it 98 | 99 | container.addChild(lightbulb); 100 | 101 | container.addChild(bunny); 102 | 103 | return container; 104 | } 105 | 106 | for (var i = 0; i < 40; i++) { 107 | bunnyWorld.addChild(createBunny()); 108 | } 109 | 110 | app.ticker.add(function() { 111 | bunnyWorld.children.forEach(updateBunny); 112 | lighting.renderedObject.moveToFront(); 113 | bunnyWorld.renderedObject.moveToFront(); 114 | }); 115 | 116 | }).catch(function importFailed(err) { 117 | console.error("Import failed: ", err); 118 | }); 119 | -------------------------------------------------------------------------------- /dist/layers/z-order.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const GREEN_IMAGE_PATH = ASSET_URL + '/assets/layer/square_green.png'; 4 | const BLUE_IMAGE_PATH = ASSET_URL + '/assets/layer/square_blue.png'; 5 | 6 | px.configImport({ "pxFramework:": PIXI_PATH }); 7 | px.import({ 8 | scene: 'px:scene.1.js', 9 | pixi: 'pxFramework:pixi.min.js', 10 | }).then(function(imports){ 11 | return px.import({ 12 | pixiDisplay: 'pxFramework:pixi-layers.js' 13 | }).then(function(){ 14 | return imports.scene; 15 | }) 16 | }).then(function(scene) { 17 | var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb, view: scene }); 18 | 19 | var greenGroup = new PIXI.display.Group(0, true); 20 | greenGroup.on('sort', function (sprite) { 21 | //green bunnies go down 22 | sprite.zOrder = -sprite.y; 23 | }); 24 | 25 | // z-index = 1, sorting = true, we can provide zOrder function directly in constructor 26 | var blueGroup = new PIXI.display.Group(1, function (sprite) { 27 | //blue bunnies go up 28 | sprite.zOrder = +sprite.y; 29 | }); 30 | 31 | // Drag is the best layer, dragged element is above everything else 32 | var dragGroup = new PIXI.display.Group(2, false); 33 | 34 | //specify display list component 35 | app.stage = new PIXI.display.Stage(); 36 | app.stage.group.enableSort = true; 37 | //sorry, group cant exist without layer yet :( 38 | app.stage.addChild(new PIXI.display.Layer(greenGroup)); 39 | app.stage.addChild(new PIXI.display.Layer(blueGroup)); 40 | app.stage.addChild(new PIXI.display.Layer(dragGroup)); 41 | 42 | // create a texture from an image path 43 | var texture_green = PIXI.Texture.fromImage(GREEN_IMAGE_PATH); 44 | var texture_blue = PIXI.Texture.fromImage(BLUE_IMAGE_PATH); 45 | 46 | var bunniesOdd = new PIXI.Container(); 47 | var bunniesEven = new PIXI.Container(); 48 | var bunniesBlue = new PIXI.Container(); 49 | bunniesOdd.noRender = true; 50 | bunniesEven.noRender = true; 51 | bunniesBlue.noRender = true; 52 | app.stage.addChild(bunniesOdd); 53 | app.stage.addChild(bunniesEven); 54 | app.stage.addChild(bunniesBlue); 55 | 56 | var ind = []; 57 | for (var i = 0; i < 15; i++) { 58 | var bunny = new PIXI.Sprite(texture_green); 59 | bunny.width = 50; 60 | bunny.height = 50; 61 | bunny.position.set(100 + 20 * i, 100 + 20 * i); 62 | bunny.anchor.set(0.5); 63 | // that thing is required 64 | bunny.parentGroup = greenGroup; 65 | if (i % 2 == 0) { 66 | bunniesEven.addChild(bunny); 67 | } else { 68 | bunniesOdd.addChild(bunny); 69 | } 70 | subscribe(bunny); 71 | } 72 | 73 | for (var i = 9; i >= 0; i--) { 74 | var bunny = new PIXI.Sprite(texture_blue); 75 | bunny.width = 50; 76 | bunny.height = 50; 77 | bunny.position.set(400 + 20 * i, 400 - 20 * i); 78 | bunny.anchor.set(0.5); 79 | // that thing is required 80 | bunny.parentGroup = blueGroup; 81 | bunniesBlue.addChild(bunny); 82 | subscribe(bunny); 83 | } 84 | 85 | function subscribe(obj) { 86 | obj.interactive = true; 87 | obj 88 | .on('pointerdown', onDragStart) 89 | .on('pointerup', onDragEnd) 90 | .on('pointerupoutside', onDragEnd) 91 | .on('pointermove', onDragMove); 92 | } 93 | 94 | 95 | function onDragStart(event) { 96 | this.data = event.data; 97 | this.dragging = true; 98 | this.oldGroup = this.parentGroup; 99 | this.parentGroup = dragGroup; 100 | forceCreate(); 101 | } 102 | 103 | function onDragEnd() { 104 | if(this.dragging){ 105 | forceCreate(); 106 | this.parentGroup = this.oldGroup; 107 | this.dragging = false; 108 | // set the interaction data to null 109 | this.data = null; 110 | } 111 | } 112 | 113 | function onDragMove() { 114 | if (this.dragging) { 115 | var newPosition = this.data.getLocalPosition(this.parent); 116 | this.x = newPosition.x; 117 | this.y = newPosition.y; 118 | } 119 | } 120 | 121 | function forceCreate(){ 122 | for(var i = 0; i < greenGroup._activeLayer._sortedChildren.length; ++i){ 123 | greenGroup._activeLayer._sortedChildren[i].forceCreate(); 124 | } 125 | for(var i = 0; i < blueGroup._activeLayer._sortedChildren.length; ++i){ 126 | blueGroup._activeLayer._sortedChildren[i].forceCreate(); 127 | } 128 | for(var i = 0; i < dragGroup._activeLayer._sortedChildren.length; ++i){ 129 | dragGroup._activeLayer._sortedChildren[i].forceCreate(); 130 | } 131 | } 132 | 133 | }).catch(function importFailed(err) { 134 | console.error("Import failed: ", err); 135 | }); 136 | -------------------------------------------------------------------------------- /dist/pixi/assets/basic/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/basic/bunny.png -------------------------------------------------------------------------------- /dist/pixi/assets/basic/fighter.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "rollSequence0000.png": 4 | { 5 | "frame": {"x":483,"y":692,"w":169,"h":226}, 6 | "rotated": false, 7 | "trimmed": true, 8 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 9 | "sourceSize": {"w":175,"h":240} 10 | }, 11 | "rollSequence0001.png": 12 | { 13 | "frame": {"x":468,"y":2,"w":169,"h":226}, 14 | "rotated": false, 15 | "trimmed": true, 16 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 17 | "sourceSize": {"w":175,"h":240} 18 | }, 19 | "rollSequence0002.png": 20 | { 21 | "frame": {"x":639,"y":2,"w":167,"h":226}, 22 | "rotated": false, 23 | "trimmed": true, 24 | "spriteSourceSize": {"x":3,"y":5,"w":167,"h":226}, 25 | "sourceSize": {"w":175,"h":240} 26 | }, 27 | "rollSequence0003.png": 28 | { 29 | "frame": {"x":808,"y":2,"w":165,"h":226}, 30 | "rotated": false, 31 | "trimmed": true, 32 | "spriteSourceSize": {"x":3,"y":5,"w":165,"h":226}, 33 | "sourceSize": {"w":175,"h":240} 34 | }, 35 | "rollSequence0004.png": 36 | { 37 | "frame": {"x":654,"y":688,"w":161,"h":226}, 38 | "rotated": false, 39 | "trimmed": true, 40 | "spriteSourceSize": {"x":3,"y":5,"w":161,"h":226}, 41 | "sourceSize": {"w":175,"h":240} 42 | }, 43 | "rollSequence0005.png": 44 | { 45 | "frame": {"x":817,"y":458,"w":151,"h":226}, 46 | "rotated": false, 47 | "trimmed": true, 48 | "spriteSourceSize": {"x":6,"y":5,"w":151,"h":226}, 49 | "sourceSize": {"w":175,"h":240} 50 | }, 51 | "rollSequence0006.png": 52 | { 53 | "frame": {"x":817,"y":686,"w":137,"h":226}, 54 | "rotated": false, 55 | "trimmed": true, 56 | "spriteSourceSize": {"x":11,"y":5,"w":137,"h":226}, 57 | "sourceSize": {"w":175,"h":240} 58 | }, 59 | "rollSequence0007.png": 60 | { 61 | "frame": {"x":290,"y":2,"w":113,"h":228}, 62 | "rotated": false, 63 | "trimmed": true, 64 | "spriteSourceSize": {"x":22,"y":3,"w":113,"h":228}, 65 | "sourceSize": {"w":175,"h":240} 66 | }, 67 | "rollSequence0008.png": 68 | { 69 | "frame": {"x":284,"y":692,"w":79,"h":228}, 70 | "rotated": false, 71 | "trimmed": true, 72 | "spriteSourceSize": {"x":40,"y":3,"w":79,"h":228}, 73 | "sourceSize": {"w":175,"h":240} 74 | }, 75 | "rollSequence0009.png": 76 | { 77 | "frame": {"x":405,"y":2,"w":61,"h":228}, 78 | "rotated": false, 79 | "trimmed": true, 80 | "spriteSourceSize": {"x":53,"y":3,"w":61,"h":228}, 81 | "sourceSize": {"w":175,"h":240} 82 | }, 83 | "rollSequence0010.png": 84 | { 85 | "frame": {"x":444,"y":462,"w":49,"h":228}, 86 | "rotated": false, 87 | "trimmed": true, 88 | "spriteSourceSize": {"x":64,"y":3,"w":49,"h":228}, 89 | "sourceSize": {"w":175,"h":240} 90 | }, 91 | "rollSequence0011.png": 92 | { 93 | "frame": {"x":377,"y":462,"w":65,"h":228}, 94 | "rotated": false, 95 | "trimmed": true, 96 | "spriteSourceSize": {"x":52,"y":3,"w":65,"h":228}, 97 | "sourceSize": {"w":175,"h":240} 98 | }, 99 | "rollSequence0012.png": 100 | { 101 | "frame": {"x":272,"y":462,"w":103,"h":228}, 102 | "rotated": false, 103 | "trimmed": true, 104 | "spriteSourceSize": {"x":37,"y":3,"w":103,"h":228}, 105 | "sourceSize": {"w":175,"h":240} 106 | }, 107 | "rollSequence0013.png": 108 | { 109 | "frame": {"x":143,"y":692,"w":139,"h":228}, 110 | "rotated": false, 111 | "trimmed": true, 112 | "spriteSourceSize": {"x":20,"y":3,"w":139,"h":228}, 113 | "sourceSize": {"w":175,"h":240} 114 | }, 115 | "rollSequence0014.png": 116 | { 117 | "frame": {"x":2,"y":462,"w":163,"h":228}, 118 | "rotated": false, 119 | "trimmed": true, 120 | "spriteSourceSize": {"x":7,"y":3,"w":163,"h":228}, 121 | "sourceSize": {"w":175,"h":240} 122 | }, 123 | "rollSequence0015.png": 124 | { 125 | "frame": {"x":2,"y":2,"w":171,"h":228}, 126 | "rotated": false, 127 | "trimmed": true, 128 | "spriteSourceSize": {"x":2,"y":3,"w":171,"h":228}, 129 | "sourceSize": {"w":175,"h":240} 130 | }, 131 | "rollSequence0016.png": 132 | { 133 | "frame": {"x":2,"y":232,"w":163,"h":228}, 134 | "rotated": false, 135 | "trimmed": true, 136 | "spriteSourceSize": {"x":4,"y":3,"w":163,"h":228}, 137 | "sourceSize": {"w":175,"h":240} 138 | }, 139 | "rollSequence0017.png": 140 | { 141 | "frame": {"x":2,"y":692,"w":139,"h":228}, 142 | "rotated": false, 143 | "trimmed": true, 144 | "spriteSourceSize": {"x":16,"y":3,"w":139,"h":228}, 145 | "sourceSize": {"w":175,"h":240} 146 | }, 147 | "rollSequence0018.png": 148 | { 149 | "frame": {"x":167,"y":462,"w":103,"h":228}, 150 | "rotated": false, 151 | "trimmed": true, 152 | "spriteSourceSize": {"x":35,"y":3,"w":103,"h":228}, 153 | "sourceSize": {"w":175,"h":240} 154 | }, 155 | "rollSequence0019.png": 156 | { 157 | "frame": {"x":365,"y":692,"w":65,"h":228}, 158 | "rotated": false, 159 | "trimmed": true, 160 | "spriteSourceSize": {"x":58,"y":3,"w":65,"h":228}, 161 | "sourceSize": {"w":175,"h":240} 162 | }, 163 | "rollSequence0020.png": 164 | { 165 | "frame": {"x":432,"y":692,"w":49,"h":228}, 166 | "rotated": false, 167 | "trimmed": true, 168 | "spriteSourceSize": {"x":62,"y":3,"w":49,"h":228}, 169 | "sourceSize": {"w":175,"h":240} 170 | }, 171 | "rollSequence0021.png": 172 | { 173 | "frame": {"x":389,"y":232,"w":61,"h":228}, 174 | "rotated": false, 175 | "trimmed": true, 176 | "spriteSourceSize": {"x":61,"y":3,"w":61,"h":228}, 177 | "sourceSize": {"w":175,"h":240} 178 | }, 179 | "rollSequence0022.png": 180 | { 181 | "frame": {"x":306,"y":232,"w":81,"h":228}, 182 | "rotated": false, 183 | "trimmed": true, 184 | "spriteSourceSize": {"x":55,"y":3,"w":81,"h":228}, 185 | "sourceSize": {"w":175,"h":240} 186 | }, 187 | "rollSequence0023.png": 188 | { 189 | "frame": {"x":175,"y":2,"w":113,"h":228}, 190 | "rotated": false, 191 | "trimmed": true, 192 | "spriteSourceSize": {"x":39,"y":3,"w":113,"h":228}, 193 | "sourceSize": {"w":175,"h":240} 194 | }, 195 | "rollSequence0024.png": 196 | { 197 | "frame": {"x":167,"y":232,"w":137,"h":228}, 198 | "rotated": false, 199 | "trimmed": true, 200 | "spriteSourceSize": {"x":26,"y":3,"w":137,"h":228}, 201 | "sourceSize": {"w":175,"h":240} 202 | }, 203 | "rollSequence0025.png": 204 | { 205 | "frame": {"x":664,"y":458,"w":151,"h":226}, 206 | "rotated": false, 207 | "trimmed": true, 208 | "spriteSourceSize": {"x":18,"y":5,"w":151,"h":226}, 209 | "sourceSize": {"w":175,"h":240} 210 | }, 211 | "rollSequence0026.png": 212 | { 213 | "frame": {"x":792,"y":230,"w":161,"h":226}, 214 | "rotated": false, 215 | "trimmed": true, 216 | "spriteSourceSize": {"x":11,"y":5,"w":161,"h":226}, 217 | "sourceSize": {"w":175,"h":240} 218 | }, 219 | "rollSequence0027.png": 220 | { 221 | "frame": {"x":623,"y":230,"w":167,"h":226}, 222 | "rotated": false, 223 | "trimmed": true, 224 | "spriteSourceSize": {"x":6,"y":5,"w":167,"h":226}, 225 | "sourceSize": {"w":175,"h":240} 226 | }, 227 | "rollSequence0028.png": 228 | { 229 | "frame": {"x":495,"y":460,"w":167,"h":226}, 230 | "rotated": false, 231 | "trimmed": true, 232 | "spriteSourceSize": {"x":5,"y":5,"w":167,"h":226}, 233 | "sourceSize": {"w":175,"h":240} 234 | }, 235 | "rollSequence0029.png": 236 | { 237 | "frame": {"x":452,"y":232,"w":169,"h":226}, 238 | "rotated": false, 239 | "trimmed": true, 240 | "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226}, 241 | "sourceSize": {"w":175,"h":240} 242 | }}, 243 | "meta": { 244 | "app": "http://www.texturepacker.com", 245 | "version": "1.0", 246 | "image": "fighter.png", 247 | "format": "RGBA8888", 248 | "size": {"w":1024,"h":1024}, 249 | "scale": "1", 250 | "smartupdate": "$TexturePacker:SmartUpdate:2f213a6b451f9f5719773418dfe80ae8$" 251 | } 252 | } 253 | -------------------------------------------------------------------------------- /dist/pixi/assets/basic/fighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/basic/fighter.png -------------------------------------------------------------------------------- /dist/pixi/assets/basic/shader.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec2 vTextureCoord; 4 | varying vec4 vColor; 5 | 6 | uniform sampler2D uSampler; 7 | uniform float customUniform; 8 | 9 | void main(void) 10 | { 11 | vec2 uvs = vTextureCoord.xy; 12 | 13 | vec4 fg = texture2D(uSampler, vTextureCoord); 14 | 15 | 16 | fg.r = uvs.y + sin(customUniform); 17 | 18 | //fg.r = clamp(fg.r,0.0,0.9); 19 | 20 | gl_FragColor = fg; 21 | 22 | } 23 | -------------------------------------------------------------------------------- /dist/pixi/assets/basic/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/basic/snake.png -------------------------------------------------------------------------------- /dist/pixi/assets/basic/strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/basic/strip.png -------------------------------------------------------------------------------- /dist/pixi/assets/basic/tilingsky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/basic/tilingsky.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/circle-mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/circle-mask.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/BGrotate.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/demo/LightRotate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/LightRotate1.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/LightRotate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/LightRotate2.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/SceneRotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/SceneRotate.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/demo/bkg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/bkg.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/demo/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/button.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/buttonDown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/buttonDown.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/buttonOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/buttonOver.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/button_test_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/button_test_BG.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/demo/cells.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/cells.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/desyrel.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/eggHead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/eggHead.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/flowerTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/flowerTop.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/mc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "Explosion_Sequence_A 1.png": 4 | { 5 | "frame": {"x":244,"y":1454,"w":240,"h":240}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 9 | "sourceSize": {"w":240,"h":240} 10 | }, 11 | "Explosion_Sequence_A 10.png": 12 | { 13 | "frame": {"x":244,"y":970,"w":240,"h":240}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 17 | "sourceSize": {"w":240,"h":240} 18 | }, 19 | "Explosion_Sequence_A 11.png": 20 | { 21 | "frame": {"x":2,"y":970,"w":240,"h":240}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 25 | "sourceSize": {"w":240,"h":240} 26 | }, 27 | "Explosion_Sequence_A 12.png": 28 | { 29 | "frame": {"x":728,"y":728,"w":240,"h":240}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 33 | "sourceSize": {"w":240,"h":240} 34 | }, 35 | "Explosion_Sequence_A 13.png": 36 | { 37 | "frame": {"x":486,"y":728,"w":240,"h":240}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 41 | "sourceSize": {"w":240,"h":240} 42 | }, 43 | "Explosion_Sequence_A 14.png": 44 | { 45 | "frame": {"x":244,"y":728,"w":240,"h":240}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 49 | "sourceSize": {"w":240,"h":240} 50 | }, 51 | "Explosion_Sequence_A 15.png": 52 | { 53 | "frame": {"x":2,"y":728,"w":240,"h":240}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 57 | "sourceSize": {"w":240,"h":240} 58 | }, 59 | "Explosion_Sequence_A 16.png": 60 | { 61 | "frame": {"x":728,"y":486,"w":240,"h":240}, 62 | "rotated": false, 63 | "trimmed": false, 64 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 65 | "sourceSize": {"w":240,"h":240} 66 | }, 67 | "Explosion_Sequence_A 17.png": 68 | { 69 | "frame": {"x":486,"y":486,"w":240,"h":240}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 73 | "sourceSize": {"w":240,"h":240} 74 | }, 75 | "Explosion_Sequence_A 18.png": 76 | { 77 | "frame": {"x":244,"y":486,"w":240,"h":240}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 81 | "sourceSize": {"w":240,"h":240} 82 | }, 83 | "Explosion_Sequence_A 19.png": 84 | { 85 | "frame": {"x":2,"y":486,"w":240,"h":240}, 86 | "rotated": false, 87 | "trimmed": false, 88 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 89 | "sourceSize": {"w":240,"h":240} 90 | }, 91 | "Explosion_Sequence_A 2.png": 92 | { 93 | "frame": {"x":728,"y":1212,"w":240,"h":240}, 94 | "rotated": false, 95 | "trimmed": false, 96 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 97 | "sourceSize": {"w":240,"h":240} 98 | }, 99 | "Explosion_Sequence_A 20.png": 100 | { 101 | "frame": {"x":728,"y":244,"w":240,"h":240}, 102 | "rotated": false, 103 | "trimmed": false, 104 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 105 | "sourceSize": {"w":240,"h":240} 106 | }, 107 | "Explosion_Sequence_A 21.png": 108 | { 109 | "frame": {"x":486,"y":244,"w":240,"h":240}, 110 | "rotated": false, 111 | "trimmed": false, 112 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 113 | "sourceSize": {"w":240,"h":240} 114 | }, 115 | "Explosion_Sequence_A 22.png": 116 | { 117 | "frame": {"x":244,"y":244,"w":240,"h":240}, 118 | "rotated": false, 119 | "trimmed": false, 120 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 121 | "sourceSize": {"w":240,"h":240} 122 | }, 123 | "Explosion_Sequence_A 23.png": 124 | { 125 | "frame": {"x":2,"y":244,"w":240,"h":240}, 126 | "rotated": false, 127 | "trimmed": false, 128 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 129 | "sourceSize": {"w":240,"h":240} 130 | }, 131 | "Explosion_Sequence_A 24.png": 132 | { 133 | "frame": {"x":728,"y":2,"w":240,"h":240}, 134 | "rotated": false, 135 | "trimmed": false, 136 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 137 | "sourceSize": {"w":240,"h":240} 138 | }, 139 | "Explosion_Sequence_A 25.png": 140 | { 141 | "frame": {"x":486,"y":2,"w":240,"h":240}, 142 | "rotated": false, 143 | "trimmed": false, 144 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 145 | "sourceSize": {"w":240,"h":240} 146 | }, 147 | "Explosion_Sequence_A 26.png": 148 | { 149 | "frame": {"x":244,"y":2,"w":240,"h":240}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 153 | "sourceSize": {"w":240,"h":240} 154 | }, 155 | "Explosion_Sequence_A 27.png": 156 | { 157 | "frame": {"x":2,"y":2,"w":240,"h":240}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 161 | "sourceSize": {"w":240,"h":240} 162 | }, 163 | "Explosion_Sequence_A 3.png": 164 | { 165 | "frame": {"x":486,"y":1212,"w":240,"h":240}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 169 | "sourceSize": {"w":240,"h":240} 170 | }, 171 | "Explosion_Sequence_A 4.png": 172 | { 173 | "frame": {"x":244,"y":1212,"w":240,"h":240}, 174 | "rotated": false, 175 | "trimmed": false, 176 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 177 | "sourceSize": {"w":240,"h":240} 178 | }, 179 | "Explosion_Sequence_A 5.png": 180 | { 181 | "frame": {"x":2,"y":1696,"w":240,"h":240}, 182 | "rotated": false, 183 | "trimmed": false, 184 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 185 | "sourceSize": {"w":240,"h":240} 186 | }, 187 | "Explosion_Sequence_A 6.png": 188 | { 189 | "frame": {"x":2,"y":1454,"w":240,"h":240}, 190 | "rotated": false, 191 | "trimmed": false, 192 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 193 | "sourceSize": {"w":240,"h":240} 194 | }, 195 | "Explosion_Sequence_A 7.png": 196 | { 197 | "frame": {"x":2,"y":1212,"w":240,"h":240}, 198 | "rotated": false, 199 | "trimmed": false, 200 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 201 | "sourceSize": {"w":240,"h":240} 202 | }, 203 | "Explosion_Sequence_A 8.png": 204 | { 205 | "frame": {"x":728,"y":970,"w":240,"h":240}, 206 | "rotated": false, 207 | "trimmed": false, 208 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 209 | "sourceSize": {"w":240,"h":240} 210 | }, 211 | "Explosion_Sequence_A 9.png": 212 | { 213 | "frame": {"x":486,"y":970,"w":240,"h":240}, 214 | "rotated": false, 215 | "trimmed": false, 216 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 217 | "sourceSize": {"w":240,"h":240} 218 | }}, 219 | "meta": { 220 | "app": "http://www.texturepacker.com", 221 | "version": "1.0", 222 | "image": "mc.png", 223 | "format": "RGBA8888", 224 | "size": {"w":1024,"h":2048}, 225 | "scale": "1", 226 | "smartupdate": "$TexturePacker:SmartUpdate:17e4a2d92ff3e27832c3f4938cec7c85$" 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /dist/pixi/assets/demo/mc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/mc.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/monsters.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "eggHead.png": 4 | { 5 | "frame": {"x":2,"y":169,"w":142,"h":157}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":142,"h":157}, 9 | "sourceSize": {"w":142,"h":157} 10 | }, 11 | "flowerTop.png": 12 | { 13 | "frame": {"x":2,"y":328,"w":119,"h":181}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":119,"h":181}, 17 | "sourceSize": {"w":119,"h":181} 18 | }, 19 | "helmlok.png": 20 | { 21 | "frame": {"x":123,"y":328,"w":123,"h":177}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":123,"h":177}, 25 | "sourceSize": {"w":123,"h":177} 26 | }, 27 | "skully.png": 28 | { 29 | "frame": {"x":2,"y":2,"w":155,"h":165}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":155,"h":165}, 33 | "sourceSize": {"w":155,"h":165} 34 | }}, 35 | "meta": { 36 | "app": "http://www.texturepacker.com", 37 | "version": "1.0", 38 | "image": "monsters.png", 39 | "format": "RGBA8888", 40 | "size": {"w":256,"h":512}, 41 | "scale": "1", 42 | "smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /dist/pixi/assets/demo/monsters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/monsters.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/panda.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_01.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_02.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_03.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_04.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_05.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_06.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_07.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/spinObj_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/spinObj_08.png -------------------------------------------------------------------------------- /dist/pixi/assets/demo/textDemoBG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/textDemoBG.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/demo/tinyMaggot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/demo/tinyMaggot.png -------------------------------------------------------------------------------- /dist/pixi/assets/fonts/DejaVuSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/fonts/DejaVuSans.ttf -------------------------------------------------------------------------------- /dist/pixi/assets/layer/square_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/layer/square_blue.png -------------------------------------------------------------------------------- /dist/pixi/assets/layer/square_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/layer/square_green.png -------------------------------------------------------------------------------- /dist/pixi/assets/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/p2.jpeg -------------------------------------------------------------------------------- /dist/pixi/assets/spine/Pixie.atlas: -------------------------------------------------------------------------------- 1 | Pixie.png 2 | format: RGBA8888 3 | filter: Linear,Linear 4 | repeat: none 5 | L_foot 6 | rotate: false 7 | xy: 1048, 355 8 | size: 68, 51 9 | orig: 68, 51 10 | offset: 0, 0 11 | index: -1 12 | L_hand 13 | rotate: true 14 | xy: 916, 355 15 | size: 55, 64 16 | orig: 55, 64 17 | offset: 0, 0 18 | index: -1 19 | L_lower_arm 20 | rotate: false 21 | xy: 1273, 226 22 | size: 70, 31 23 | orig: 70, 31 24 | offset: 0, 0 25 | index: -1 26 | L_lower_leg 27 | rotate: false 28 | xy: 1201, 345 29 | size: 57, 65 30 | orig: 57, 65 31 | offset: 0, 0 32 | index: -1 33 | L_upper_arm 34 | rotate: true 35 | xy: 1399, 2 36 | size: 78, 74 37 | orig: 78, 74 38 | offset: 0, 0 39 | index: -1 40 | L_upper_leg 41 | rotate: false 42 | xy: 1351, 259 43 | size: 124, 71 44 | orig: 124, 71 45 | offset: 0, 0 46 | index: -1 47 | R_foot 48 | rotate: false 49 | xy: 1319, 345 50 | size: 68, 51 51 | orig: 68, 51 52 | offset: 0, 0 53 | index: -1 54 | R_hand 55 | rotate: true 56 | xy: 982, 355 57 | size: 55, 64 58 | orig: 55, 64 59 | offset: 0, 0 60 | index: -1 61 | R_lower_arm 62 | rotate: false 63 | xy: 1345, 226 64 | size: 70, 31 65 | orig: 70, 31 66 | offset: 0, 0 67 | index: -1 68 | R_lower_leg 69 | rotate: false 70 | xy: 1260, 345 71 | size: 57, 65 72 | orig: 57, 65 73 | offset: 0, 0 74 | index: -1 75 | R_upper_arm 76 | rotate: true 77 | xy: 1399, 82 78 | size: 78, 74 79 | orig: 78, 74 80 | offset: 0, 0 81 | index: -1 82 | R_upper_leg 83 | rotate: false 84 | xy: 1389, 332 85 | size: 124, 71 86 | orig: 124, 71 87 | offset: 0, 0 88 | index: -1 89 | backHair 90 | rotate: true 91 | xy: 1096, 2 92 | size: 261, 175 93 | orig: 261, 175 94 | offset: 0, 0 95 | index: -1 96 | foreWing 97 | rotate: false 98 | xy: 1096, 265 99 | size: 253, 78 100 | orig: 253, 78 101 | offset: 0, 0 102 | index: -1 103 | frontHair 104 | rotate: true 105 | xy: 617, 2 106 | size: 396, 297 107 | orig: 396, 297 108 | offset: 0, 0 109 | index: -1 110 | groinal 111 | rotate: true 112 | xy: 1515, 296 113 | size: 103, 84 114 | orig: 103, 84 115 | offset: 0, 0 116 | index: -1 117 | head 118 | rotate: false 119 | xy: 2, 2 120 | size: 613, 408 121 | orig: 613, 408 122 | offset: 0, 0 123 | index: -1 124 | jaw 125 | rotate: true 126 | xy: 1273, 2 127 | size: 222, 124 128 | orig: 222, 124 129 | offset: 0, 0 130 | index: -1 131 | midHair 132 | rotate: true 133 | xy: 916, 2 134 | size: 351, 178 135 | orig: 351, 178 136 | offset: 0, 0 137 | index: -1 138 | neck 139 | rotate: true 140 | xy: 1118, 345 141 | size: 65, 81 142 | orig: 65, 81 143 | offset: 0, 0 144 | index: -1 145 | rearWing 146 | rotate: false 147 | xy: 1477, 148 148 | size: 136, 146 149 | orig: 136, 146 150 | offset: 0, 0 151 | index: -1 152 | vest 153 | rotate: false 154 | xy: 1477, 2 155 | size: 139, 144 156 | orig: 139, 144 157 | offset: 0, 0 158 | index: -1 159 | -------------------------------------------------------------------------------- /dist/pixi/assets/spine/Pixie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/Pixie.png -------------------------------------------------------------------------------- /dist/pixi/assets/spine/dragon.atlas: -------------------------------------------------------------------------------- 1 | 2 | dragon.png 3 | format: RGBA8888 4 | filter: Linear,Linear 5 | repeat: none 6 | L_rear_thigh 7 | rotate: false 8 | xy: 895, 20 9 | size: 91, 148 10 | orig: 91, 149 11 | offset: 0, 0 12 | index: -1 13 | L_wing01 14 | rotate: false 15 | xy: 814, 672 16 | size: 191, 256 17 | orig: 191, 256 18 | offset: 0, 0 19 | index: -1 20 | L_wing02 21 | rotate: false 22 | xy: 714, 189 23 | size: 179, 269 24 | orig: 179, 269 25 | offset: 0, 0 26 | index: -1 27 | L_wing03 28 | rotate: false 29 | xy: 785, 463 30 | size: 186, 207 31 | orig: 186, 207 32 | offset: 0, 0 33 | index: -1 34 | L_wing05 35 | rotate: true 36 | xy: 2, 9 37 | size: 218, 213 38 | orig: 218, 213 39 | offset: 0, 0 40 | index: -1 41 | L_wing06 42 | rotate: false 43 | xy: 2, 229 44 | size: 192, 331 45 | orig: 192, 331 46 | offset: 0, 0 47 | index: -1 48 | R_wing01 49 | rotate: true 50 | xy: 502, 709 51 | size: 219, 310 52 | orig: 219, 310 53 | offset: 0, 0 54 | index: -1 55 | R_wing02 56 | rotate: true 57 | xy: 204, 463 58 | size: 203, 305 59 | orig: 203, 305 60 | offset: 0, 0 61 | index: -1 62 | R_wing03 63 | rotate: false 64 | xy: 511, 460 65 | size: 272, 247 66 | orig: 272, 247 67 | offset: 0, 0 68 | index: -1 69 | R_wing05 70 | rotate: false 71 | xy: 196, 232 72 | size: 251, 229 73 | orig: 251, 229 74 | offset: 0, 0 75 | index: -1 76 | R_wing06 77 | rotate: false 78 | xy: 2, 562 79 | size: 200, 366 80 | orig: 200, 366 81 | offset: 0, 0 82 | index: -1 83 | R_wing07 84 | rotate: true 85 | xy: 449, 258 86 | size: 200, 263 87 | orig: 200, 263 88 | offset: 0, 0 89 | index: -1 90 | R_wing08 91 | rotate: false 92 | xy: 467, 2 93 | size: 234, 254 94 | orig: 234, 254 95 | offset: 0, 0 96 | index: -1 97 | R_wing09 98 | rotate: false 99 | xy: 217, 26 100 | size: 248, 204 101 | orig: 248, 204 102 | offset: 0, 0 103 | index: -1 104 | back 105 | rotate: false 106 | xy: 703, 2 107 | size: 190, 185 108 | orig: 190, 185 109 | offset: 0, 0 110 | index: -1 111 | chest 112 | rotate: true 113 | xy: 895, 170 114 | size: 136, 122 115 | orig: 136, 122 116 | offset: 0, 0 117 | index: -1 118 | front_toeA 119 | rotate: false 120 | xy: 976, 972 121 | size: 29, 50 122 | orig: 29, 50 123 | offset: 0, 0 124 | index: -1 125 | head 126 | rotate: false 127 | xy: 204, 668 128 | size: 296, 260 129 | orig: 296, 260 130 | offset: 0, 0 131 | index: -1 132 | logo 133 | rotate: false 134 | xy: 2, 930 135 | size: 897, 92 136 | orig: 897, 92 137 | offset: 0, 0 138 | index: -1 139 | tail01 140 | rotate: false 141 | xy: 895, 308 142 | size: 120, 153 143 | orig: 120, 153 144 | offset: 0, 0 145 | index: -1 146 | tail03 147 | rotate: false 148 | xy: 901, 930 149 | size: 73, 92 150 | orig: 73, 92 151 | offset: 0, 0 152 | index: -1 153 | 154 | dragon2.png 155 | format: RGBA8888 156 | filter: Linear,Linear 157 | repeat: none 158 | L_front_leg 159 | rotate: true 160 | xy: 391, 141 161 | size: 84, 57 162 | orig: 84, 57 163 | offset: 0, 0 164 | index: -1 165 | L_front_thigh 166 | rotate: false 167 | xy: 446, 269 168 | size: 84, 72 169 | orig: 84, 72 170 | offset: 0, 0 171 | index: -1 172 | L_rear_leg 173 | rotate: true 174 | xy: 888, 342 175 | size: 168, 132 176 | orig: 206, 177 177 | offset: 19, 20 178 | index: -1 179 | L_wing04 180 | rotate: false 181 | xy: 256, 227 182 | size: 188, 135 183 | orig: 188, 135 184 | offset: 0, 0 185 | index: -1 186 | L_wing07 187 | rotate: false 188 | xy: 2, 109 189 | size: 159, 255 190 | orig: 159, 255 191 | offset: 0, 0 192 | index: -1 193 | L_wing08 194 | rotate: true 195 | xy: 705, 346 196 | size: 164, 181 197 | orig: 164, 181 198 | offset: 0, 0 199 | index: -1 200 | L_wing09 201 | rotate: false 202 | xy: 499, 343 203 | size: 204, 167 204 | orig: 204, 167 205 | offset: 0, 0 206 | index: -1 207 | R_front_leg 208 | rotate: false 209 | xy: 273, 34 210 | size: 101, 89 211 | orig: 101, 89 212 | offset: 0, 0 213 | index: -1 214 | R_front_thigh 215 | rotate: false 216 | xy: 163, 106 217 | size: 108, 108 218 | orig: 108, 108 219 | offset: 0, 0 220 | index: -1 221 | R_rear_leg 222 | rotate: false 223 | xy: 273, 125 224 | size: 116, 100 225 | orig: 116, 100 226 | offset: 0, 0 227 | index: -1 228 | R_rear_thigh 229 | rotate: false 230 | xy: 163, 216 231 | size: 91, 148 232 | orig: 91, 149 233 | offset: 0, 0 234 | index: -1 235 | R_wing04 236 | rotate: false 237 | xy: 2, 366 238 | size: 279, 144 239 | orig: 279, 144 240 | offset: 0, 0 241 | index: -1 242 | chin 243 | rotate: false 244 | xy: 283, 364 245 | size: 214, 146 246 | orig: 214, 146 247 | offset: 0, 0 248 | index: -1 249 | front_toeB 250 | rotate: false 251 | xy: 590, 284 252 | size: 56, 57 253 | orig: 56, 57 254 | offset: 0, 0 255 | index: -1 256 | rear-toe 257 | rotate: true 258 | xy: 2, 2 259 | size: 105, 77 260 | orig: 109, 77 261 | offset: 0, 0 262 | index: -1 263 | tail02 264 | rotate: true 265 | xy: 151, 9 266 | size: 95, 120 267 | orig: 95, 120 268 | offset: 0, 0 269 | index: -1 270 | tail04 271 | rotate: false 272 | xy: 532, 270 273 | size: 56, 71 274 | orig: 56, 71 275 | offset: 0, 0 276 | index: -1 277 | tail05 278 | rotate: false 279 | xy: 648, 282 280 | size: 52, 59 281 | orig: 52, 59 282 | offset: 0, 0 283 | index: -1 284 | tail06 285 | rotate: true 286 | xy: 81, 12 287 | size: 95, 68 288 | orig: 95, 68 289 | offset: 0, 0 290 | index: -1 291 | -------------------------------------------------------------------------------- /dist/pixi/assets/spine/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/dragon.png -------------------------------------------------------------------------------- /dist/pixi/assets/spine/dragon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/dragon2.png -------------------------------------------------------------------------------- /dist/pixi/assets/spine/goblins.atlas: -------------------------------------------------------------------------------- 1 | 2 | goblins.png 3 | size: 228,523 4 | format: RGBA8888 5 | filter: Linear,Linear 6 | repeat: none 7 | dagger 8 | rotate: false 9 | xy: 2, 43 10 | size: 26, 108 11 | orig: 26, 108 12 | offset: 0, 0 13 | index: -1 14 | goblin/eyes-closed 15 | rotate: false 16 | xy: 166, 237 17 | size: 34, 12 18 | orig: 34, 12 19 | offset: 0, 0 20 | index: -1 21 | goblin/head 22 | rotate: false 23 | xy: 26, 372 24 | size: 103, 66 25 | orig: 103, 66 26 | offset: 0, 0 27 | index: -1 28 | goblin/left-arm 29 | rotate: false 30 | xy: 166, 251 31 | size: 37, 35 32 | orig: 37, 35 33 | offset: 0, 0 34 | index: -1 35 | goblin/left-foot 36 | rotate: true 37 | xy: 195, 358 38 | size: 65, 31 39 | orig: 65, 31 40 | offset: 0, 0 41 | index: -1 42 | goblin/left-hand 43 | rotate: false 44 | xy: 49, 2 45 | size: 36, 41 46 | orig: 36, 41 47 | offset: 0, 0 48 | index: -1 49 | goblin/left-lower-leg 50 | rotate: false 51 | xy: 30, 45 52 | size: 33, 70 53 | orig: 33, 70 54 | offset: 0, 0 55 | index: -1 56 | goblin/left-shoulder 57 | rotate: true 58 | xy: 169, 288 59 | size: 29, 44 60 | orig: 29, 44 61 | offset: 0, 0 62 | index: -1 63 | goblin/left-upper-leg 64 | rotate: false 65 | xy: 134, 305 66 | size: 33, 73 67 | orig: 33, 73 68 | offset: 0, 0 69 | index: -1 70 | goblin/neck 71 | rotate: false 72 | xy: 87, 2 73 | size: 36, 41 74 | orig: 36, 41 75 | offset: 0, 0 76 | index: -1 77 | goblin/pelvis 78 | rotate: false 79 | xy: 131, 380 80 | size: 62, 43 81 | orig: 62, 43 82 | offset: 0, 0 83 | index: -1 84 | goblin/right-arm 85 | rotate: false 86 | xy: 135, 69 87 | size: 23, 50 88 | orig: 23, 50 89 | offset: 0, 0 90 | index: -1 91 | goblin/right-foot 92 | rotate: true 93 | xy: 104, 157 94 | size: 63, 33 95 | orig: 63, 33 96 | offset: 0, 0 97 | index: -1 98 | goblin/right-hand 99 | rotate: false 100 | xy: 190, 319 101 | size: 36, 37 102 | orig: 36, 37 103 | offset: 0, 0 104 | index: -1 105 | goblin/right-lower-leg 106 | rotate: false 107 | xy: 96, 294 108 | size: 36, 76 109 | orig: 36, 76 110 | offset: 0, 0 111 | index: -1 112 | goblin/right-shoulder 113 | rotate: true 114 | xy: 2, 2 115 | size: 39, 45 116 | orig: 39, 45 117 | offset: 0, 0 118 | index: -1 119 | goblin/right-upper-leg 120 | rotate: false 121 | xy: 139, 162 122 | size: 34, 63 123 | orig: 34, 63 124 | offset: 0, 0 125 | index: -1 126 | goblin/torso 127 | rotate: false 128 | xy: 131, 425 129 | size: 68, 96 130 | orig: 68, 96 131 | offset: 0, 0 132 | index: -1 133 | goblin/undie-straps 134 | rotate: true 135 | xy: 201, 466 136 | size: 55, 19 137 | orig: 55, 19 138 | offset: 0, 0 139 | index: -1 140 | goblin/undies 141 | rotate: false 142 | xy: 190, 51 143 | size: 36, 29 144 | orig: 36, 29 145 | offset: 0, 0 146 | index: -1 147 | goblingirl/eyes-closed 148 | rotate: true 149 | xy: 201, 427 150 | size: 37, 21 151 | orig: 37, 21 152 | offset: 0, 0 153 | index: -1 154 | goblingirl/head 155 | rotate: false 156 | xy: 26, 440 157 | size: 103, 81 158 | orig: 103, 81 159 | offset: 0, 0 160 | index: -1 161 | goblingirl/left-arm 162 | rotate: true 163 | xy: 175, 198 164 | size: 37, 35 165 | orig: 37, 35 166 | offset: 0, 0 167 | index: -1 168 | goblingirl/left-foot 169 | rotate: true 170 | xy: 133, 227 171 | size: 65, 31 172 | orig: 65, 31 173 | offset: 0, 0 174 | index: -1 175 | goblingirl/left-hand 176 | rotate: true 177 | xy: 168, 2 178 | size: 35, 40 179 | orig: 35, 40 180 | offset: 0, 0 181 | index: -1 182 | goblingirl/left-lower-leg 183 | rotate: false 184 | xy: 65, 45 185 | size: 33, 70 186 | orig: 33, 70 187 | offset: 0, 0 188 | index: -1 189 | goblingirl/left-shoulder 190 | rotate: true 191 | xy: 135, 39 192 | size: 28, 46 193 | orig: 28, 46 194 | offset: 0, 0 195 | index: -1 196 | goblingirl/left-upper-leg 197 | rotate: false 198 | xy: 98, 222 199 | size: 33, 70 200 | orig: 33, 70 201 | offset: 0, 0 202 | index: -1 203 | goblingirl/neck 204 | rotate: true 205 | xy: 125, 2 206 | size: 35, 41 207 | orig: 35, 41 208 | offset: 0, 0 209 | index: -1 210 | goblingirl/pelvis 211 | rotate: false 212 | xy: 30, 117 213 | size: 62, 43 214 | orig: 62, 43 215 | offset: 0, 0 216 | index: -1 217 | goblingirl/right-arm 218 | rotate: false 219 | xy: 160, 69 220 | size: 28, 50 221 | orig: 28, 50 222 | offset: 0, 0 223 | index: -1 224 | goblingirl/right-foot 225 | rotate: true 226 | xy: 100, 56 227 | size: 63, 33 228 | orig: 63, 33 229 | offset: 0, 0 230 | index: -1 231 | goblingirl/right-hand 232 | rotate: false 233 | xy: 190, 82 234 | size: 36, 37 235 | orig: 36, 37 236 | offset: 0, 0 237 | index: -1 238 | goblingirl/right-lower-leg 239 | rotate: true 240 | xy: 26, 162 241 | size: 36, 76 242 | orig: 36, 76 243 | offset: 0, 0 244 | index: -1 245 | goblingirl/right-shoulder 246 | rotate: true 247 | xy: 159, 121 248 | size: 39, 45 249 | orig: 39, 45 250 | offset: 0, 0 251 | index: -1 252 | goblingirl/right-upper-leg 253 | rotate: true 254 | xy: 94, 121 255 | size: 34, 63 256 | orig: 34, 63 257 | offset: 0, 0 258 | index: -1 259 | goblingirl/torso 260 | rotate: false 261 | xy: 26, 274 262 | size: 68, 96 263 | orig: 68, 96 264 | offset: 0, 0 265 | index: -1 266 | goblingirl/undie-straps 267 | rotate: true 268 | xy: 169, 323 269 | size: 55, 19 270 | orig: 55, 19 271 | offset: 0, 0 272 | index: -1 273 | goblingirl/undies 274 | rotate: false 275 | xy: 175, 167 276 | size: 36, 29 277 | orig: 36, 29 278 | offset: 0, 0 279 | index: -1 280 | shield 281 | rotate: false 282 | xy: 26, 200 283 | size: 70, 72 284 | orig: 70, 72 285 | offset: 0, 0 286 | index: -1 287 | spear 288 | rotate: false 289 | xy: 2, 153 290 | size: 22, 368 291 | orig: 22, 368 292 | offset: 0, 0 293 | index: -1 294 | -------------------------------------------------------------------------------- /dist/pixi/assets/spine/goblins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/goblins.png -------------------------------------------------------------------------------- /dist/pixi/assets/spine/iP4_BGtile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/iP4_BGtile.jpg -------------------------------------------------------------------------------- /dist/pixi/assets/spine/iP4_ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/iP4_ground.png -------------------------------------------------------------------------------- /dist/pixi/assets/spine/spineboy.atlas: -------------------------------------------------------------------------------- 1 | spineboy.png 2 | format: RGBA8888 3 | filter: Linear,Linear 4 | repeat: none 5 | eyes-closed 6 | rotate: false 7 | xy: 73, 509 8 | size: 34, 27 9 | orig: 34, 27 10 | offset: 0, 0 11 | index: -1 12 | eyes 13 | rotate: false 14 | xy: 75, 464 15 | size: 34, 27 16 | orig: 34, 27 17 | offset: 0, 0 18 | index: -1 19 | head 20 | rotate: false 21 | xy: 2, 2 22 | size: 121, 132 23 | orig: 121, 132 24 | offset: 0, 0 25 | index: -1 26 | left-ankle 27 | rotate: false 28 | xy: 96, 351 29 | size: 25, 32 30 | orig: 25, 32 31 | offset: 0, 0 32 | index: -1 33 | left-arm 34 | rotate: false 35 | xy: 39, 423 36 | size: 35, 29 37 | orig: 35, 29 38 | offset: 0, 0 39 | index: -1 40 | left-foot 41 | rotate: false 42 | xy: 2, 262 43 | size: 65, 30 44 | orig: 65, 30 45 | offset: 0, 0 46 | index: -1 47 | left-hand 48 | rotate: false 49 | xy: 2, 423 50 | size: 35, 38 51 | orig: 35, 38 52 | offset: 0, 0 53 | index: -1 54 | left-lower-leg 55 | rotate: false 56 | xy: 72, 202 57 | size: 49, 64 58 | orig: 49, 64 59 | offset: 0, 0 60 | index: -1 61 | left-pant-bottom 62 | rotate: false 63 | xy: 2, 363 64 | size: 44, 22 65 | orig: 44, 22 66 | offset: 0, 0 67 | index: -1 68 | left-shoulder 69 | rotate: false 70 | xy: 39, 454 71 | size: 34, 53 72 | orig: 34, 53 73 | offset: 0, 0 74 | index: -1 75 | left-upper-leg 76 | rotate: false 77 | xy: 2, 464 78 | size: 33, 67 79 | orig: 33, 67 80 | offset: 0, 0 81 | index: -1 82 | neck 83 | rotate: false 84 | xy: 37, 509 85 | size: 34, 28 86 | orig: 34, 28 87 | offset: 0, 0 88 | index: -1 89 | pelvis 90 | rotate: false 91 | xy: 2, 294 92 | size: 63, 47 93 | orig: 63, 47 94 | offset: 0, 0 95 | index: -1 96 | right-ankle 97 | rotate: false 98 | xy: 96, 385 99 | size: 25, 30 100 | orig: 25, 30 101 | offset: 0, 0 102 | index: -1 103 | right-arm 104 | rotate: false 105 | xy: 96, 417 106 | size: 21, 45 107 | orig: 21, 45 108 | offset: 0, 0 109 | index: -1 110 | right-foot-idle 111 | rotate: false 112 | xy: 69, 268 113 | size: 53, 28 114 | orig: 53, 28 115 | offset: 0, 0 116 | index: -1 117 | right-foot 118 | rotate: false 119 | xy: 2, 230 120 | size: 67, 30 121 | orig: 67, 30 122 | offset: 0, 0 123 | index: -1 124 | right-hand 125 | rotate: false 126 | xy: 2, 387 127 | size: 32, 32 128 | orig: 32, 32 129 | offset: 0, 0 130 | index: -1 131 | right-lower-leg 132 | rotate: false 133 | xy: 72, 136 134 | size: 51, 64 135 | orig: 51, 64 136 | offset: 0, 0 137 | index: -1 138 | right-pant-bottom 139 | rotate: false 140 | xy: 2, 343 141 | size: 46, 18 142 | orig: 46, 18 143 | offset: 0, 0 144 | index: -1 145 | right-shoulder 146 | rotate: false 147 | xy: 67, 298 148 | size: 52, 51 149 | orig: 52, 51 150 | offset: 0, 0 151 | index: -1 152 | right-upper-leg 153 | rotate: false 154 | xy: 50, 351 155 | size: 44, 70 156 | orig: 44, 70 157 | offset: 0, 0 158 | index: -1 159 | torso 160 | rotate: false 161 | xy: 2, 136 162 | size: 68, 92 163 | orig: 68, 92 164 | offset: 0, 0 165 | index: -1 166 | -------------------------------------------------------------------------------- /dist/pixi/assets/spine/spineboy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/dist/pixi/assets/spine/spineboy.png -------------------------------------------------------------------------------- /dist/spine/dragon.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const DRAGON_JSON_PATH = ASSET_URL + '/assets/spine/dragon.json'; 4 | 5 | px.configImport({ "pxFramework:": ASSET_URL }); 6 | px.import({ 7 | scene: 'px:scene.1.js', 8 | pixi: 'pxFramework:/pixi/pixi.min.js' 9 | }).then(function(imports) { 10 | return px.import({ 11 | pixiSpine: 'pxFramework:/pixi/pixi-spine.js' 12 | }).then(function() { 13 | return imports; 14 | }) 15 | }).then(function(imports) { 16 | var app = new PIXI.Application(800, 600, { view: imports.scene }); 17 | app.stop(); 18 | 19 | PIXI.loader 20 | .initAppSceneContext(module.appSceneContext) 21 | .add('dragon', DRAGON_JSON_PATH) 22 | .load(onAssetsLoaded); 23 | 24 | var dragon = null; 25 | 26 | function onAssetsLoaded(loader,res) 27 | { 28 | // instantiate the spine animation 29 | dragon = new PIXI.spine.Spine(res.dragon.spineData); 30 | dragon.skeleton.setToSetupPose(); 31 | dragon.update(0); 32 | dragon.autoUpdate = false; 33 | 34 | // create a container for the spine animation and add the animation to it 35 | var dragonCage = new PIXI.Container(); 36 | dragonCage.addChild(dragon); 37 | 38 | // // measure the spine animation and position it inside its container to align it to the origin 39 | var localRect = dragon.getLocalBounds(); 40 | dragon.position.set(-localRect.x, -localRect.y); 41 | 42 | // now we can scale, position and rotate the container as any other display object 43 | var scale = Math.min( 44 | (app.renderer.width * 0.7) / dragonCage.width, 45 | (app.renderer.height * 0.7) / dragonCage.height 46 | ); 47 | dragonCage.scale.set(scale, scale); 48 | dragonCage.position.set( 49 | (app.renderer.width - dragonCage.width) * 0.5, 50 | (app.renderer.height - dragonCage.height) * 0.5 51 | ); 52 | 53 | // // add the container to the stage 54 | app.stage.addChild(dragonCage); 55 | 56 | // // once position and scaled, set the animation to play 57 | dragon.state.setAnimation(0, 'flying', true); 58 | 59 | app.start(); 60 | } 61 | 62 | app.ticker.add(function() { 63 | // update the spine animation, only needed if dragon.autoupdate is set to false 64 | dragon.update(0.01666666666667); // HARDCODED FRAMERATE! 65 | }); 66 | 67 | }).catch(function importFailed(err) { 68 | console.error("Import failed: ", err); 69 | }); 70 | -------------------------------------------------------------------------------- /dist/spine/goblins.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const GOBLINS_JSON_PATH = ASSET_URL + '/assets/spine/goblins.json'; 4 | 5 | px.configImport({ "pxFramework:": ASSET_URL }); 6 | px.import({ 7 | scene: 'px:scene.1.js', 8 | pixi: 'pxFramework:/pixi/pixi.min.js' 9 | }).then(function(imports) { 10 | return px.import({ 11 | pixiSpine: 'pxFramework:/pixi/pixi-spine.js' 12 | }).then(function() { 13 | return imports; 14 | }) 15 | }).then(function(imports) { 16 | var app = new PIXI.Application(800, 600, { view: imports.scene }); 17 | 18 | PIXI.loader 19 | .initAppSceneContext(module.appSceneContext) 20 | .add('goblins', GOBLINS_JSON_PATH) 21 | .load(onAssetsLoaded); 22 | 23 | app.stage.interactive = true; 24 | app.stage.buttonMode = true; 25 | 26 | function onAssetsLoaded(loader, res) 27 | { 28 | var goblin = new PIXI.spine.Spine(res.goblins.spineData); 29 | 30 | // set current skin 31 | goblin.skeleton.setSkinByName('goblin'); 32 | goblin.skeleton.setSlotsToSetupPose(); 33 | 34 | // set the position 35 | goblin.x = 400; 36 | goblin.y = 600; 37 | 38 | goblin.scale.set(1.5); 39 | 40 | // play animation 41 | goblin.state.setAnimation(0, 'walk', true); 42 | 43 | app.stage.addChild(goblin); 44 | 45 | app.stage.on('pointertap', function() { 46 | // change current skin 47 | var currentSkinName = goblin.skeleton.skin.name; 48 | var newSkinName = (currentSkinName === 'goblin' ? 'goblingirl' : 'goblin'); 49 | goblin.skeleton.setSkinByName(newSkinName); 50 | goblin.skeleton.setSlotsToSetupPose(); 51 | }); 52 | } 53 | 54 | }).catch(function importFailed(err) { 55 | console.error("Import failed: ", err); 56 | }); 57 | -------------------------------------------------------------------------------- /dist/spine/pixie.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const PIXIE_JSON_PATH = ASSET_URL + '/assets/spine/Pixie.json'; 4 | const BG_IMAGE_PATH = ASSET_URL + '/assets/spine/iP4_BGtile.jpg'; 5 | const FRONT_IMAGE_PATH = ASSET_URL + '/assets/spine/iP4_ground.jpg'; 6 | 7 | px.configImport({ "pxFramework:": ASSET_URL }); 8 | px.import({ 9 | scene: 'px:scene.1.js', 10 | pixi: 'pxFramework:/pixi/pixi.min.js' 11 | }).then(function(imports) { 12 | return px.import({ 13 | pixiSpine: 'pxFramework:/pixi/pixi-spine.js' 14 | }).then(function() { 15 | return imports; 16 | }) 17 | }).then(function(imports) { 18 | var app = new PIXI.Application(800, 600, { view: imports.scene }); 19 | 20 | app.stop(); 21 | 22 | // load spine data 23 | PIXI.loader 24 | .initAppSceneContext(module.appSceneContext) 25 | .add('pixie', PIXIE_JSON_PATH) 26 | .load(onAssetsLoaded); 27 | 28 | var postition = 0, 29 | background, 30 | background2, 31 | foreground, 32 | foreground2; 33 | 34 | app.stage.interactive = true; 35 | 36 | function onAssetsLoaded(loader,res) { 37 | 38 | background = PIXI.Sprite.fromImage(BG_IMAGE_PATH); 39 | background2 = PIXI.Sprite.fromImage(BG_IMAGE_PATH); 40 | 41 | foreground = PIXI.Sprite.fromImage(FRONT_IMAGE_PATH); 42 | foreground2 = PIXI.Sprite.fromImage(FRONT_IMAGE_PATH); 43 | foreground.y = foreground2.y = 640 - foreground2.height; 44 | 45 | app.stage.addChild(background, background2, foreground, foreground2); 46 | 47 | var pixie = new PIXI.spine.Spine(res.pixie.spineData); 48 | 49 | var scale = 0.3; 50 | 51 | pixie.x = 1024 / 3; 52 | pixie.y = 500; 53 | 54 | pixie.scale.x = pixie.scale.y = scale; 55 | 56 | app.stage.addChild(pixie); 57 | 58 | pixie.stateData.setMix('running', 'jump', 0.2); 59 | pixie.stateData.setMix('jump', 'running', 0.4); 60 | 61 | pixie.state.setAnimation(0, 'running', true); 62 | 63 | app.stage.on('pointerdown', onTouchStart); 64 | 65 | function onTouchStart() { 66 | pixie.state.setAnimation(0, 'jump', false); 67 | pixie.state.addAnimation(0, 'running', true, 0); 68 | } 69 | 70 | app.start(); 71 | } 72 | 73 | app.ticker.add(function() { 74 | 75 | postition += 10; 76 | 77 | background.x = -(postition * 0.6); 78 | background.x %= 1286 * 2; 79 | if(background.x < 0) 80 | { 81 | background.x += 1286 * 2; 82 | } 83 | background.x -= 1286; 84 | 85 | background2.x = -(postition * 0.6) + 1286; 86 | background2.x %= 1286 * 2; 87 | if(background2.x < 0) 88 | { 89 | background2.x += 1286 * 2; 90 | } 91 | background2.x -= 1286; 92 | 93 | foreground.x = -postition; 94 | foreground.x %= 1286 * 2; 95 | if(foreground.x < 0) 96 | { 97 | foreground.x += 1286 * 2; 98 | } 99 | foreground.x -= 1286; 100 | 101 | foreground2.x = -postition + 1286; 102 | foreground2.x %= 1286 * 2; 103 | if(foreground2.x < 0) 104 | { 105 | foreground2.x += 1286 * 2; 106 | } 107 | foreground2.x -= 1286; 108 | }); 109 | 110 | }).catch(function importFailed(err) { 111 | console.error("Import failed: ", err); 112 | }); 113 | -------------------------------------------------------------------------------- /dist/spine/spineboy.js: -------------------------------------------------------------------------------- 1 | const ASSET_URL = 'http://pxscene-pixi-dev.herokuapp.com'; 2 | const PIXI_PATH = ASSET_URL + '/pixi/'; 3 | const SPINEBOY_JSON_PATH = ASSET_URL + '/assets/spine/spineboy.json'; 4 | 5 | px.configImport({ "pxFramework:": ASSET_URL }); 6 | px.import({ 7 | scene: 'px:scene.1.js', 8 | pixi: 'pxFramework:/pixi/pixi.min.js' 9 | }).then(function(imports) { 10 | return px.import({ 11 | pixiSpine: 'pxFramework:/pixi/pixi-spine.js' 12 | }).then(function() { 13 | return imports; 14 | }) 15 | }).then(function(imports) { 16 | var app = new PIXI.Application(800, 600, { view: imports.scene }); 17 | 18 | // load spine data 19 | PIXI.loader 20 | .initAppSceneContext(module.appSceneContext) 21 | .add('spineboy', SPINEBOY_JSON_PATH) 22 | .load(onAssetsLoaded); 23 | 24 | app.stage.interactive = true; 25 | 26 | function onAssetsLoaded(loader, res) 27 | { 28 | // create a spine boy 29 | var spineBoy = new PIXI.spine.Spine(res.spineboy.spineData); 30 | 31 | // set the position 32 | spineBoy.x = app.renderer.width / 2; 33 | spineBoy.y = app.renderer.height; 34 | 35 | spineBoy.scale.set(1.5); 36 | 37 | // set up the mixes! 38 | spineBoy.stateData.setMix('walk', 'jump', 0.2); 39 | spineBoy.stateData.setMix('jump', 'walk', 0.4); 40 | 41 | // play animation 42 | spineBoy.state.setAnimation(0, 'walk', true); 43 | 44 | app.stage.addChild(spineBoy); 45 | 46 | app.stage.on('pointerdown', function() { 47 | spineBoy.state.setAnimation(0, 'jump', false); 48 | spineBoy.state.addAnimation(0, 'walk', true, 0); 49 | }); 50 | } 51 | 52 | }).catch(function importFailed(err) { 53 | console.error("Import failed: ", err); 54 | }); 55 | -------------------------------------------------------------------------------- /examples/assets/basic/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/basic/bunny.png -------------------------------------------------------------------------------- /examples/assets/basic/fighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/basic/fighter.png -------------------------------------------------------------------------------- /examples/assets/basic/strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/basic/strip.png -------------------------------------------------------------------------------- /examples/assets/basic/tilingsky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/basic/tilingsky.jpg -------------------------------------------------------------------------------- /examples/assets/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/bunny.png -------------------------------------------------------------------------------- /examples/assets/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/assets/p2.jpeg -------------------------------------------------------------------------------- /examples/images/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/images/cursor.png -------------------------------------------------------------------------------- /examples/images/input2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/images/input2.png -------------------------------------------------------------------------------- /examples/images/spinningball2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/images/spinningball2.png -------------------------------------------------------------------------------- /examples/images/status_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/topcoderinc/pxPixi/3a1499a8928a3b555ad2eaec2ec8b6161fbca68e/examples/images/status_bg.png -------------------------------------------------------------------------------- /local-examples-url.txt: -------------------------------------------------------------------------------- 1 | http://127.0.0.1:8081/demos/alpha-mask.js 2 | http://127.0.0.1:8081/demos/animatedsprite-demo.js 3 | http://127.0.0.1:8081/demos/batch.js 4 | http://127.0.0.1:8081/demos/blendmodes.js 5 | http://127.0.0.1:8081/demos/cacheAsBitmap.js 6 | http://127.0.0.1:8081/demos/dragging.js 7 | http://127.0.0.1:8081/demos/graphics-demo.js 8 | http://127.0.0.1:8081/demos/interactivity.js 9 | http://127.0.0.1:8081/demos/masking.js 10 | http://127.0.0.1:8081/demos/render-texture-demo.js 11 | http://127.0.0.1:8081/demos/text-demo.js 12 | http://127.0.0.1:8081/demos/texture-rotate.js 13 | http://127.0.0.1:8081/demos/texture-swap.js 14 | http://127.0.0.1:8081/demos/tinting.js 15 | http://127.0.0.1:8081/demos/transparent-background.js 16 | http://127.0.0.1:8081/basics/basic.js 17 | http://127.0.0.1:8081/basics/click.js 18 | http://127.0.0.1:8081/basics/container-pivot.js 19 | http://127.0.0.1:8081/basics/container.js 20 | http://127.0.0.1:8081/basics/graphics.js 21 | http://127.0.0.1:8081/basics/render-texture.js 22 | http://127.0.0.1:8081/basics/spritesheet.js 23 | http://127.0.0.1:8081/basics/text.js 24 | http://127.0.0.1:8081/basics/textured-mesh.js 25 | http://127.0.0.1:8081/basics/tiling-sprite.js 26 | http://127.0.0.1:8081/display/z-order.js 27 | http://127.0.0.1:8081/layers/lighting.js 28 | http://127.0.0.1:8081/layers/z-order.js 29 | http://127.0.0.1:8081/spine/dragon.js 30 | http://127.0.0.1:8081/spine/goblins.js 31 | http://127.0.0.1:8081/spine/pixie.js 32 | http://127.0.0.1:8081/spine/spineboy.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Hercules-pixi-server", 3 | "version": "1.0.0", 4 | "description": "Hercules pixi server", 5 | "main": "server.js", 6 | "private": true, 7 | "scripts": { 8 | "start": "node server" 9 | }, 10 | "dependencies": { 11 | "express": "~4.13.4", 12 | "winston": "~2.2.0" 13 | }, 14 | "devDependencies": { 15 | "eslint": "^3.5.0", 16 | "eslint-config-airbnb-base": "^7.1.0", 17 | "eslint-plugin-import": "^1.15.0" 18 | }, 19 | "engines": { 20 | "node": "6.6.0", 21 | "npm": "3.10.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pixi-display.patch: -------------------------------------------------------------------------------- 1 | From 1921093021fc857024bf30882871818b19f57ea3 Mon Sep 17 00:00:00 2001 2 | From: cqy 3 | Date: Tue, 14 Mar 2017 09:53:47 +0800 4 | Subject: [PATCH] pxscene support 5 | 6 | --- 7 | bin/pixi-display.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 8 | 1 file changed, 53 insertions(+), 1 deletion(-) 9 | mode change 100644 => 100755 bin/pixi-display.js 10 | 11 | diff --git a/bin/pixi-display.js b/bin/pixi-display.js 12 | old mode 100644 13 | new mode 100755 14 | index 86bf30e..1f917f9 15 | --- a/bin/pixi-display.js 16 | +++ b/bin/pixi-display.js 17 | @@ -6,6 +6,7 @@ PIXI.DISPLAY_FLAG = { 18 | }; 19 | var WebGLRenderer = PIXI.WebGLRenderer; 20 | var CanvasRenderer = PIXI.CanvasRenderer; 21 | +var PXSceneRenderer = PIXI.PXSceneRenderer; 22 | Object.assign(PIXI.Container.prototype, { 23 | displayList: null, 24 | displayChildren: null, 25 | @@ -49,6 +50,22 @@ Object.assign(PIXI.Container.prototype, { 26 | } 27 | this.containerRenderWebGL(renderer); 28 | }, 29 | + renderPXScene:function(renderer){ 30 | + if (!this.visible) { 31 | + this.displayOrder = 0; 32 | + return; 33 | + } 34 | + this.displayOrder = renderer.incDisplayOrder(); 35 | + if (this.worldAlpha <= 0 || !this.renderable) { 36 | + return; 37 | + } 38 | + if (this.displayList) { 39 | + this.displayList.renderPXScene(this, renderer); 40 | + return; 41 | + } 42 | + this.containerRenderPXScene(renderer); 43 | + }, 44 | + containerRenderPXScene: PIXI.Container.prototype.renderPXScene, 45 | containerRenderWebGL: PIXI.Container.prototype.renderWebGL, 46 | containerRenderCanvas: PIXI.Container.prototype.renderCanvas 47 | }); 48 | @@ -170,6 +187,20 @@ var pixi_display; 49 | } 50 | }; 51 | ; 52 | + DisplayGroup.prototype.renderPXScene = function (parentContainer, renderer) { 53 | + var list = this.computedChildren; 54 | + for (var j = 0; j < list.length; j++) { 55 | + var container = list[j]; 56 | + if (container.displayFlag) { 57 | + container.renderPXScene(renderer); 58 | + } 59 | + else { 60 | + container.displayOrder = renderer.incDisplayOrder(); 61 | + container._renderPXScene(renderer); 62 | + } 63 | + } 64 | + }; 65 | + ; 66 | return DisplayGroup; 67 | }(utils.EventEmitter)); 68 | pixi_display.DisplayGroup = DisplayGroup; 69 | @@ -288,6 +319,14 @@ var pixi_display; 70 | } 71 | }; 72 | ; 73 | + DisplayList.prototype.renderPXScene = function (parentContainer, renderer){ 74 | + var groups = this.displayGroups; 75 | + for (var i = 0; i < groups.length; i++) { 76 | + var group = groups[i]; 77 | + group.renderPXScene(parentContainer, renderer); 78 | + } 79 | + }; 80 | + ; 81 | return DisplayList; 82 | }(utils.EventEmitter)); 83 | pixi_display.DisplayList = DisplayList; 84 | @@ -451,9 +490,22 @@ Object.assign(CanvasRenderer.prototype, { 85 | this._oldRender(displayObject, renderTexture, clear, transform, skipUpdateTransform); 86 | } 87 | }); 88 | +Object.assign(PXSceneRenderer.prototype, { 89 | + _lastDisplayOrder: 0, 90 | + incDisplayOrder: function () { 91 | + return ++this._lastDisplayOrder; 92 | + }, 93 | + _oldRender: PXSceneRenderer.prototype.render, 94 | + render: function (displayObject, renderTexture, clear, transform, skipUpdateTransform) { 95 | + if (!renderTexture) { 96 | + this._lastDisplayOrder = 0; 97 | + } 98 | + this._oldRender(displayObject, renderTexture, clear, transform, skipUpdateTransform); 99 | + } 100 | +}); 101 | Object.assign(PIXI, { 102 | display: pixi_display, 103 | DisplayGroup: pixi_display.DisplayGroup, 104 | DisplayList: pixi_display.DisplayList 105 | }); 106 | -//# sourceMappingURL=pixi-display.js.map 107 | \ No newline at end of file 108 | +//# sourceMappingURL=pixi-display.js.map 109 | -- 110 | 2.10.1 (Apple Git-78) 111 | 112 | -------------------------------------------------------------------------------- /pixi-layers.patch: -------------------------------------------------------------------------------- 1 | From 266ef999e2a6611fad50618ead6c33e5f8db38ba Mon Sep 17 00:00:00 2001 2 | From: cqy 3 | Date: Tue, 14 Mar 2017 09:55:59 +0800 4 | Subject: [PATCH] pxscene support 5 | 6 | --- 7 | bin/pixi-layers.js | 45 +++++++++++++++++++++++++++++++++++++++++++-- 8 | 1 file changed, 43 insertions(+), 2 deletions(-) 9 | mode change 100644 => 100755 bin/pixi-layers.js 10 | 11 | diff --git a/bin/pixi-layers.js b/bin/pixi-layers.js 12 | old mode 100644 13 | new mode 100755 14 | index 9c298fa..ecc2822 15 | --- a/bin/pixi-layers.js 16 | +++ b/bin/pixi-layers.js 17 | @@ -30,8 +30,23 @@ var pixi_display; 18 | } 19 | this.containerRenderCanvas(renderer); 20 | }, 21 | + renderPXScene: function (renderer) { 22 | + if (this._activeParentLayer && this._activeParentLayer != renderer._activeLayer) { 23 | + return; 24 | + } 25 | + if (!this.visible) { 26 | + this.displayOrder = 0; 27 | + return; 28 | + } 29 | + this.displayOrder = renderer.incDisplayOrder(); 30 | + if (this.worldAlpha <= 0 || !this.renderable) { 31 | + return; 32 | + } 33 | + this.containerRenderPXScene(renderer); 34 | + }, 35 | containerRenderWebGL: PIXI.Container.prototype.renderWebGL, 36 | - containerRenderCanvas: PIXI.Container.prototype.renderCanvas 37 | + containerRenderCanvas: PIXI.Container.prototype.renderCanvas, 38 | + containerRenderPXScene: PIXI.Container.prototype.renderPXScene 39 | }); 40 | })(pixi_display || (pixi_display = {})); 41 | Object.assign(PIXI.DisplayObject.prototype, { 42 | @@ -340,7 +355,8 @@ var pixi_display; 43 | sorted.length = 0; 44 | if (this.insertChildrenBeforeActive) { 45 | for (var i = 0; i < children.length; i++) { 46 | - sorted.push(children[i]); 47 | + if(!children[i].noRender) 48 | + sorted.push(children[i]); 49 | } 50 | } 51 | for (var i = 0; i < active.length; i++) { 52 | @@ -400,6 +416,12 @@ var pixi_display; 53 | this._postRender(renderer); 54 | } 55 | }; 56 | + Layer.prototype.renderPXScene = function (renderer) { 57 | + if (this._preRender(renderer)) { 58 | + this.containerRenderPXScene(renderer); 59 | + this._postRender(renderer); 60 | + } 61 | + }; 62 | return Layer; 63 | }(Container)); 64 | pixi_display.Layer = Layer; 65 | @@ -408,6 +430,7 @@ var pixi_display; 66 | (function (pixi_display) { 67 | var WebGLRenderer = PIXI.WebGLRenderer; 68 | var CanvasRenderer = PIXI.CanvasRenderer; 69 | + var PXSceneRenderer = PIXI.PXSceneRenderer; 70 | Object.assign(WebGLRenderer.prototype, { 71 | _lastDisplayOrder: 0, 72 | _activeLayer: null, 73 | @@ -444,6 +467,24 @@ var pixi_display; 74 | this._oldRender(displayObject, renderTexture, clear, transform, skipUpdateTransform); 75 | } 76 | }); 77 | + Object.assign(PXSceneRenderer.prototype, { 78 | + _lastDisplayOrder: 0, 79 | + _activeLayer: null, 80 | + incDisplayOrder: function () { 81 | + return ++this._lastDisplayOrder; 82 | + }, 83 | + _oldRender: PXSceneRenderer.prototype.render, 84 | + render: function (displayObject, renderTexture, clear, transform, skipUpdateTransform) { 85 | + if (!renderTexture) { 86 | + this._lastDisplayOrder = 0; 87 | + } 88 | + this._activeLayer = null; 89 | + if (displayObject.isStage) { 90 | + displayObject.updateStage(); 91 | + } 92 | + this._oldRender(displayObject, renderTexture, clear, transform, skipUpdateTransform); 93 | + } 94 | + }); 95 | })(pixi_display || (pixi_display = {})); 96 | var pixi_display; 97 | (function (pixi_display) { 98 | -- 99 | 2.10.1 (Apple Git-78) 100 | 101 | -------------------------------------------------------------------------------- /pixi-spine.patch: -------------------------------------------------------------------------------- 1 | From adc9597f52b01bcec092d382bdd8cdd4aef7cc4a Mon Sep 17 00:00:00 2001 2 | From: cqy 3 | Date: Tue, 14 Mar 2017 09:58:05 +0800 4 | Subject: [PATCH] pxscene support 5 | 6 | --- 7 | bin/pixi-spine.js | 35 +++++++++++++++++++++++++++++++---- 8 | 1 file changed, 31 insertions(+), 4 deletions(-) 9 | mode change 100644 => 100755 bin/pixi-spine.js 10 | 11 | diff --git a/bin/pixi-spine.js b/bin/pixi-spine.js 12 | old mode 100644 13 | new mode 100755 14 | index 14d7bbf..38c20ad 15 | --- a/bin/pixi-spine.js 16 | +++ b/bin/pixi-spine.js 17 | @@ -4400,7 +4400,7 @@ var pixi_spine; 18 | for (var key in dictionary) { 19 | var skinAttachment = dictionary[key]; 20 | if (slotAttachment == skinAttachment) { 21 | - var attachment = this.getAttachment(slotIndex, name); 22 | + var attachment = this.getAttachment(slotIndex); 23 | if (attachment != null) 24 | slot.setAttachment(attachment); 25 | break; 26 | @@ -5364,7 +5364,7 @@ var pixi_spine; 27 | baseUrl = baseUrl.replace(this.baseUrl, ''); 28 | var adapter = imageLoaderAdapter(this, resource.name + '_atlas_page_', baseUrl, imageOptions); 29 | this.add(resource.name + '_atlas', atlasPath, atlasOptions, function (atlasResource) { 30 | - new pixi_spine.core.TextureAtlas(atlasResource.xhr.responseText, adapter, function (spineAtlas) { 31 | + new pixi_spine.core.TextureAtlas(atlasResource.responseText || atlasResource.xhr.responseText, adapter, function (spineAtlas) { 32 | var spineJsonParser = new pixi_spine.core.SkeletonJson(new pixi_spine.core.AtlasAttachmentLoader(spineAtlas)); 33 | if (metadataSkeletonScale) { 34 | spineJsonParser.scale = metadataSkeletonScale; 35 | @@ -5409,7 +5409,9 @@ var pixi_spine; 36 | var SpineSprite = (function (_super) { 37 | __extends(SpineSprite, _super); 38 | function SpineSprite(tex) { 39 | - return _super.call(this, tex) || this; 40 | + var _this = _super.call(this, tex) || this; 41 | + _this.spine = true; 42 | + return _this; 43 | } 44 | return SpineSprite; 45 | }(PIXI.Sprite)); 46 | @@ -5451,6 +5453,7 @@ var pixi_spine; 47 | var slot = _this.skeleton.slots[i]; 48 | var attachment = slot.attachment; 49 | var slotContainer = new PIXI.Container(); 50 | + slotContainer.useMatrix = true; 51 | _this.slotContainers.push(slotContainer); 52 | _this.addChild(slotContainer); 53 | if (attachment instanceof pixi_spine.core.RegionAttachment) { 54 | @@ -5506,8 +5509,10 @@ var pixi_spine; 55 | var r0 = this.tintRgb[0]; 56 | var g0 = this.tintRgb[1]; 57 | var b0 = this.tintRgb[2]; 58 | + 59 | for (i = 0, n = slots.length; i < n; i++) { 60 | var slot = slots[i]; 61 | + 62 | var attachment = slot.attachment; 63 | var slotContainer = this.slotContainers[i]; 64 | if (!attachment) { 65 | @@ -5554,7 +5559,7 @@ var pixi_spine; 66 | } 67 | else { 68 | if (transAny.position) { 69 | - transform = new PIXI.TransformBase(); 70 | + transform = new PIXI.TransformStatic(); 71 | slotContainer.transform = transform; 72 | } 73 | lt_1 = transform.localTransform; 74 | @@ -5735,5 +5740,27 @@ var pixi_spine; 75 | this._currentBounds = null; 76 | } 77 | })(pixi_spine || (pixi_spine = {})); 78 | +(function(){ 79 | + Object.assign(PIXI.Container.prototype, { 80 | + renderPXScene: function (renderer) { 81 | + this.updateTransform(); 82 | + this.containerRenderPXScene(renderer); 83 | + if(this.renderedObject && this.useMatrix){ 84 | + this.renderedObject.useMatrix = true; 85 | + this.renderedObject.m11 = this.transform.localTransform.a; 86 | + this.renderedObject.m12 = this.transform.localTransform.b; 87 | + this.renderedObject.m21 = this.transform.localTransform.c; 88 | + this.renderedObject.m22 = this.transform.localTransform.d; 89 | + this.renderedObject.m41 = this.transform.localTransform.tx; 90 | + this.renderedObject.m42 = this.transform.localTransform.ty; 91 | + } 92 | + if(this.renderedObject && !this.visible){ 93 | + this.renderedObject.dispose(); 94 | + this.renderedObject = null; 95 | + } 96 | + }, 97 | + containerRenderPXScene: PIXI.Container.prototype.renderPXScene 98 | + }); 99 | +})(); 100 | PIXI.spine = pixi_spine; 101 | //# sourceMappingURL=pixi-spine.js.map 102 | \ No newline at end of file 103 | -- 104 | 2.10.1 (Apple Git-78) 105 | 106 | -------------------------------------------------------------------------------- /projectRunBook.md: -------------------------------------------------------------------------------- 1 | # Project Name: [Pxscene / Pixi integration] 2 | 3 | ## Project Abstract: 4 | This project is an additional drawing target to Pixi.js (pixijs.com) that adds pxscene drawing in addition to WebGL and Canvas2D. 5 | 6 | ## Client Details: 7 | R&D 8 | 9 | ### Organizational Groups: 10 | - R&D 11 | 12 | ### Stakeholders: 13 | - Mark Vickers 14 | + Title: 15 | + Project Role: 16 | + Contact Details: 17 | * 18 | * 19 | 20 | ### Accounts & Keys 21 | - No keys are necessary to run the app 22 | 23 | ## Technicals: 24 | 25 | ### Technologies: 26 | - node.js 27 | - pxscene 28 | - Pixi.js 29 | 30 | ### Installation Guide: 31 | See the README.md file 32 | 33 | ### Dependencies: 34 | - Heroku Account 35 | - Node.js 7.4.0 36 | - Pixi JS (v4), with pxscene modifications 37 | 38 | ### Target Environment(s): 39 | - Heroku 40 | - Updated pixi sources (http://pxscene-pixi-dev.herokuapp.com) 41 | 42 | ### Source control: 43 | - App: https://gitlab.com/hercules-pxscene/pxscene-pixi-js 44 | - Examples: https://gitlab.com/hercules-pxscene/pxscene-pixi-examples 45 | 46 | ### Configuration 47 | 48 | No configuration is required 49 | 50 | ### CI/CD: 51 | - pxscene-pixi-dev 52 | + Updated sources deployed to Heroku 53 | * Host: Heroku 54 | * URL: https://pxscene-pixi-dev.herokuapp.com/ 55 | * CI: Currently no CI 56 | * CD: Heroku 57 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const logger = require('winston'); 4 | const config = require('./config'); 5 | 6 | const app = express(); 7 | 8 | // view engine setup 9 | app.use(express.static(path.join(__dirname, 'dist'))); 10 | 11 | module.exports = app; 12 | 13 | // start the server if the current module is main 14 | if (!module.parent) { 15 | const server = app.listen(config.PORT); 16 | server.on('error', error => logger.error(error)); 17 | server.on('listening', () => logger.info('Container server started on port', config.PORT)); 18 | } 19 | -------------------------------------------------------------------------------- /update_assets_url.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const distPath = './dist'; 4 | 5 | if (process.argv.length < 3) { 6 | console.log('usage : node update_assets_url.js http://127.0.0.1:8000') 7 | return; 8 | } 9 | 10 | function updateAssetsUrl(dir) { 11 | files = fs.readdirSync(dir); 12 | 13 | files.forEach(function (file, index) { 14 | const curPath = path.join(dir, file); 15 | fs.stat(curPath, function (err, stats) { 16 | if (err) return; 17 | if (stats.isDirectory()) { 18 | updateAssetsUrl(curPath); 19 | } else { 20 | if (path.extname(curPath) === '.js') { 21 | let content = fs.readFileSync(curPath, 'utf-8'); 22 | fs.writeFileSync(curPath, content.replace(/const ASSET_URL = (.*);/, 'const ASSET_URL = \'' + process.argv[2] + '\';')) 23 | console.log('update success - ' + curPath); 24 | } 25 | } 26 | }); 27 | }); 28 | } 29 | 30 | updateAssetsUrl(distPath); --------------------------------------------------------------------------------