├── .gitignore ├── .jshintrc ├── .travis.yml ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── bin ├── pixi.dev.js └── pixi.js ├── bower.json ├── docs ├── api.js ├── assets │ ├── css │ │ ├── external-small.png │ │ ├── logo.png │ │ └── main.css │ ├── favicon.png │ ├── img │ │ └── spinner.gif │ ├── index.html │ ├── js │ │ ├── api-filter.js │ │ ├── api-list.js │ │ ├── api-search.js │ │ ├── apidocs.js │ │ └── yui-prettify.js │ └── vendor │ │ └── prettify │ │ ├── CHANGES.html │ │ ├── COPYING │ │ ├── README.html │ │ ├── prettify-min.css │ │ └── prettify-min.js ├── classes │ ├── AbstractFilter.html │ ├── AlphaMaskFilter.html │ ├── AssetLoader.html │ ├── AtlasLoader.html │ ├── BaseTexture.html │ ├── BitmapFontLoader.html │ ├── BitmapText.html │ ├── BlurFilter.html │ ├── CanvasGraphics.html │ ├── CanvasRenderer.html │ ├── Circle.html │ ├── ColorMatrixFilter.html │ ├── ColorStepFilter.html │ ├── DisplacementFilter.html │ ├── DisplayObject.html │ ├── DisplayObjectContainer.html │ ├── DotScreenFilter.html │ ├── Ellipse.html │ ├── EventTarget.html │ ├── Graphics.html │ ├── GrayFilter.html │ ├── ImageLoader.html │ ├── InvertFilter.html │ ├── JsonLoader.html │ ├── MovieClip.html │ ├── PIXI.PixiFastShader.html │ ├── PIXI.PixiShader.html │ ├── PixelateFilter.html │ ├── Point.html │ ├── PolyK.AjaxRequest.html │ ├── PolyK.InteractionData.html │ ├── PolyK.InteractionManager.html │ ├── PolyK._PointInTriangle.html │ ├── PolyK._convex.html │ ├── Polygon.html │ ├── Rectangle.html │ ├── RenderTexture.html │ ├── SepiaFilter.html │ ├── Spine.html │ ├── Sprite.html │ ├── SpriteSheetLoader.html │ ├── Stage.html │ ├── Text.html │ ├── Texture.html │ ├── TilingSprite.html │ ├── TwistFilter.html │ ├── WebGLRenderer.html │ └── index.html ├── data.json ├── files │ ├── index.html │ ├── src_pixi_InteractionManager.js.html │ ├── src_pixi_Intro.js.html │ ├── src_pixi_Outro.js.html │ ├── src_pixi_Pixi.js.html │ ├── src_pixi_core_Circle.js.html │ ├── src_pixi_core_Ellipse.js.html │ ├── src_pixi_core_Point.js.html │ ├── src_pixi_core_Polygon.js.html │ ├── src_pixi_core_Rectangle.js.html │ ├── src_pixi_display_DisplayObject.js.html │ ├── src_pixi_display_DisplayObjectContainer.js.html │ ├── src_pixi_display_MovieClip.js.html │ ├── src_pixi_display_Sprite.js.html │ ├── src_pixi_display_Stage.js.html │ ├── src_pixi_extras_Rope.js.html │ ├── src_pixi_extras_Spine.js.html │ ├── src_pixi_extras_Strip.js.html │ ├── src_pixi_extras_TilingSprite.js.html │ ├── src_pixi_filters_AbstractFilter.js.html │ ├── src_pixi_filters_AlphaMaskFilter.js.html │ ├── src_pixi_filters_BlurFilter.js.html │ ├── src_pixi_filters_BlurXFilter.js.html │ ├── src_pixi_filters_BlurYFilter.js.html │ ├── src_pixi_filters_ColorMatrixFilter.js.html │ ├── src_pixi_filters_ColorStepFilter.js.html │ ├── src_pixi_filters_CrossHatchFilter.js.html │ ├── src_pixi_filters_DisplacementFilter.js.html │ ├── src_pixi_filters_DotScreenFilter.js.html │ ├── src_pixi_filters_FilterBlock.js.html │ ├── src_pixi_filters_GrayFilter.js.html │ ├── src_pixi_filters_InvertFilter.js.html │ ├── src_pixi_filters_PixelateFilter.js.html │ ├── src_pixi_filters_RGBSplitFilter.js.html │ ├── src_pixi_filters_SepiaFilter.js.html │ ├── src_pixi_filters_SmartBlurFilter.js.html │ ├── src_pixi_filters_TwistFilter.js.html │ ├── src_pixi_loaders_AssetLoader.js.html │ ├── src_pixi_loaders_AtlasLoader.js.html │ ├── src_pixi_loaders_BitmapFontLoader.js.html │ ├── src_pixi_loaders_ImageLoader.js.html │ ├── src_pixi_loaders_JsonLoader.js.html │ ├── src_pixi_loaders_SpineLoader.js.html │ ├── src_pixi_loaders_SpriteSheetLoader.js.html │ ├── src_pixi_primitives_Graphics.js.html │ ├── src_pixi_renderers_canvas_CanvasGraphics.js.html │ ├── src_pixi_renderers_canvas_CanvasRenderer.js.html │ ├── src_pixi_renderers_canvas_utils_CanvasMaskManager.js.html │ ├── src_pixi_renderers_canvas_utils_CanvasTinter.js.html │ ├── src_pixi_renderers_webgl_WebGLRenderer.js.html │ ├── src_pixi_renderers_webgl_shaders_PixiFastShader.js.html │ ├── src_pixi_renderers_webgl_shaders_PixiShader.js.html │ ├── src_pixi_renderers_webgl_shaders_PrimitiveShader.js.html │ ├── src_pixi_renderers_webgl_shaders_StripShader.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLFastSpriteBatch.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLFilterManager.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLGraphics.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLMaskManager.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLShaderManager.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLShaderUtils.js.html │ ├── src_pixi_renderers_webgl_utils_WebGLSpriteBatch.js.html │ ├── src_pixi_text_BitmapText.js.html │ ├── src_pixi_text_Text.js.html │ ├── src_pixi_textures_BaseTexture.js.html │ ├── src_pixi_textures_RenderTexture.js.html │ ├── src_pixi_textures_Texture.js.html │ ├── src_pixi_utils_Detector.js.html │ ├── src_pixi_utils_EventTarget.js.html │ ├── src_pixi_utils_Polyk.js.html │ └── src_pixi_utils_Utils.js.html ├── index.html └── modules │ ├── PIXI.html │ └── index.html ├── examples ├── example 1 - Basics │ ├── bunny.png │ ├── index.html │ └── indexTest.html ├── example 10 - Text │ ├── desyrel.png │ ├── desyrel.xml │ ├── index.html │ └── textDemoBG.jpg ├── example 11 - RenderTexture │ ├── index.html │ ├── indexNew.html │ ├── spinObj_01.png │ ├── spinObj_02.png │ ├── spinObj_03.png │ ├── spinObj_04.png │ ├── spinObj_05.png │ ├── spinObj_06.png │ ├── spinObj_07.png │ └── spinObj_08.png ├── example 12 - Spine │ ├── data │ │ ├── Pixie.json │ │ ├── Pixie.png │ │ ├── PixieSpineData.json │ │ ├── dragonBones.json │ │ ├── dragonBones.png │ │ ├── dragonBonesData.json │ │ ├── goblins.json │ │ ├── goblins.png │ │ ├── goblinsSpineData.json │ │ ├── iP4_BGtile.jpg │ │ ├── iP4_ground.png │ │ ├── spineboy.json │ │ ├── spineboy.png │ │ └── spineboySpineData.json │ ├── index.html │ ├── index_dragon.html │ ├── index_goblins.html │ └── index_pixie.html ├── example 13 - Graphics │ ├── index.html │ ├── indexLineTest.html │ ├── spinObj_01.png │ ├── spinObj_02.png │ ├── spinObj_03.png │ ├── spinObj_04.png │ ├── spinObj_05.png │ ├── spinObj_06.png │ ├── spinObj_07.png │ └── spinObj_08.png ├── example 14 - Masking │ ├── BGrotate.jpg │ ├── Copy of index.html │ ├── LightRotate1.png │ ├── LightRotate2.png │ ├── SceneRotate.jpg │ ├── index double mask.html │ ├── index nested masks.html │ ├── index.html │ └── panda.png ├── example 15 - Filters │ ├── BGrotate.jpg │ ├── LightRotate1.png │ ├── LightRotate2.png │ ├── SceneRotate.jpg │ ├── dat.gui.min.js │ ├── depth_blur_BG.jpg │ ├── depth_blur_dudes.jpg │ ├── depth_blur_moby.jpg │ ├── displacementMAP.jpg │ ├── displacement_BG.jpg │ ├── displacement_fish1.png │ ├── displacement_fish2.png │ ├── displacement_fish3.png │ ├── displacement_fish4.png │ ├── displacement_map.jpg │ ├── displacement_overlay.png │ ├── index.html │ ├── indexAll.html │ ├── indexBlur.html │ ├── indexDisplacement.html │ ├── indexDisplacement_2.html │ ├── panda.png │ └── zeldaWaves.png ├── example 16 - BlendModes │ ├── BGrotate.jpg │ ├── flowerTop.png │ └── index.html ├── example 17 - Tinting │ ├── BGrotate.jpg │ ├── eggHead.png │ └── index.html ├── example 18 - Batch │ ├── click.png │ ├── index.html │ ├── logo_small.png │ └── tinyMaggot.png ├── example 19 - Normal │ └── pixi.js example 13 - Graphics.html ├── example 2 - SpriteSheet │ ├── SpriteSheet.json │ ├── SpriteSheet.png │ ├── fighter.json │ ├── fighter.png │ ├── index.html │ ├── indexTrim.html │ └── tp │ │ ├── SpriteSheet.tps │ │ ├── eggHead.png │ │ ├── flowerTop.png │ │ ├── helmlok.png │ │ └── skully.png ├── example 3 - MovieClip │ ├── SpriteSheet.json │ ├── SpriteSheet.png │ ├── index.html │ └── tp │ │ ├── SpriteSheet.tps │ │ └── explosion │ │ ├── Explosion_Sequence_A 1.png │ │ ├── Explosion_Sequence_A 10.png │ │ ├── Explosion_Sequence_A 11.png │ │ ├── Explosion_Sequence_A 12.png │ │ ├── Explosion_Sequence_A 13.png │ │ ├── Explosion_Sequence_A 14.png │ │ ├── Explosion_Sequence_A 15.png │ │ ├── Explosion_Sequence_A 16.png │ │ ├── Explosion_Sequence_A 17.png │ │ ├── Explosion_Sequence_A 18.png │ │ ├── Explosion_Sequence_A 19.png │ │ ├── Explosion_Sequence_A 2.png │ │ ├── Explosion_Sequence_A 20.png │ │ ├── Explosion_Sequence_A 21.png │ │ ├── Explosion_Sequence_A 22.png │ │ ├── Explosion_Sequence_A 23.png │ │ ├── Explosion_Sequence_A 24.png │ │ ├── Explosion_Sequence_A 25.png │ │ ├── Explosion_Sequence_A 26.png │ │ ├── Explosion_Sequence_A 27.png │ │ ├── Explosion_Sequence_A 3.png │ │ ├── Explosion_Sequence_A 4.png │ │ ├── Explosion_Sequence_A 5.png │ │ ├── Explosion_Sequence_A 6.png │ │ ├── Explosion_Sequence_A 7.png │ │ ├── Explosion_Sequence_A 8.png │ │ └── Explosion_Sequence_A 9.png ├── example 4 - Balls │ ├── assets │ │ ├── bubble_32x32.png │ │ ├── bubble_64x64.png │ │ ├── photonstorm.png │ │ └── pixi.png │ ├── index.html │ ├── jquery-1.8.3.min.js │ └── storm.css ├── example 5 - Morph │ ├── assets │ │ ├── photonstorm.png │ │ ├── pixel.png │ │ └── pixi.png │ ├── index.html │ ├── jquery-1.8.3.min.js │ └── storm.css ├── example 6 - Interactivity │ ├── button.png │ ├── buttonDown.png │ ├── buttonOver.png │ ├── button_test_BG.jpg │ ├── index.html │ └── pixi.png ├── example 7 - Transparent Background │ ├── bunny.png │ ├── index.html │ └── shapeTris.png ├── example 8 - Dragging │ ├── bunny.png │ └── index.html ├── example 9 - Tiling Texture │ ├── index.html │ └── p2.jpeg └── test │ ├── bunny.png │ └── index.html ├── logo.png ├── logo_small.png ├── package.json ├── src └── pixi │ ├── InteractionData.js │ ├── InteractionManager.js │ ├── Intro.js │ ├── Outro.js │ ├── Pixi.js │ ├── core │ ├── Circle.js │ ├── Ellipse.js │ ├── Matrix.js │ ├── Point.js │ ├── Polygon.js │ └── Rectangle.js │ ├── display │ ├── DisplayObject.js │ ├── DisplayObjectContainer.js │ ├── MovieClip.js │ ├── Sprite.js │ ├── SpriteBatch copy.js │ ├── SpriteBatch.js │ └── Stage.js │ ├── extras │ ├── Rope.js │ ├── Spine.js │ ├── Strip.js │ └── TilingSprite.js │ ├── filters │ ├── AbstractFilter.js │ ├── AlphaMaskFilter.js │ ├── BlurFilter.js │ ├── BlurXFilter.js │ ├── BlurYFilter.js │ ├── ColorMatrixFilter.js │ ├── ColorStepFilter.js │ ├── CrossHatchFilter.js │ ├── DisplacementFilter.js │ ├── DotScreenFilter.js │ ├── FilterBlock.js │ ├── GrayFilter.js │ ├── InvertFilter.js │ ├── NormalMapFilter.js │ ├── PixelateFilter.js │ ├── RGBSplitFilter.js │ ├── SepiaFilter.js │ ├── SmartBlurFilter.js │ └── TwistFilter.js │ ├── loaders │ ├── AssetLoader.js │ ├── AtlasLoader.js │ ├── BitmapFontLoader.js │ ├── ImageLoader.js │ ├── JsonLoader.js │ ├── SpineLoader.js │ └── SpriteSheetLoader.js │ ├── primitives │ └── Graphics.js │ ├── renderers │ ├── canvas │ │ ├── CanvasGraphics.js │ │ ├── CanvasRenderer.js │ │ └── utils │ │ │ ├── CanvasMaskManager.js │ │ │ └── CanvasTinter.js │ └── webgl │ │ ├── WebGLRenderer.js │ │ ├── shaders │ │ ├── PixiFastShader.js │ │ ├── PixiShader.js │ │ ├── PrimitiveShader.js │ │ └── StripShader.js │ │ └── utils │ │ ├── FilterTexture.js │ │ ├── WebGLFastSpriteBatch.js │ │ ├── WebGLFilterManager.js │ │ ├── WebGLGraphics.js │ │ ├── WebGLMaskManager.js │ │ ├── WebGLShaderManager.js │ │ ├── WebGLShaderUtils.js │ │ └── WebGLSpriteBatch.js │ ├── text │ ├── BitmapText.js │ └── Text.js │ ├── textures │ ├── BaseTexture.js │ ├── RenderTexture.js │ └── Texture.js │ └── utils │ ├── Detector.js │ ├── EventTarget.js │ ├── Polyk.js │ └── Utils.js ├── tasks └── karma.js └── test ├── functional └── example-1-basics │ ├── bunny.png │ ├── frame-30.png │ ├── frame-60.png │ ├── frame-90.png │ └── index.js ├── karma.conf.js ├── lib ├── pixi │ ├── core │ │ ├── Matrix.js │ │ ├── Point.js │ │ └── Rectangle.js │ ├── display │ │ ├── DisplayObject.js │ │ ├── DisplayObjectContainer.js │ │ └── Sprite.js │ ├── extras │ │ └── Strip.js │ ├── textures │ │ └── Texture.js │ └── utils │ │ └── EventTarget.js └── resemble.js ├── textures ├── SpriteSheet-Aliens.png ├── SpriteSheet-Explosion.png └── bunny.png └── unit └── pixi ├── InteractionManager.js ├── Pixi.js ├── core ├── Circle.js ├── Ellipse.js ├── Matrix.js ├── Point.js ├── Polygon.js └── Rectangle.js ├── display ├── DisplayObject.js ├── DisplayObjectContainer.js ├── MovieClip.js ├── Sprite.js └── Stage.js ├── extras ├── Rope.js ├── Spine.js ├── Strip.js └── TilingSprite.js ├── filters └── FilterBlock.js ├── loaders ├── AssetLoader.js ├── BitmapFontLoader.js ├── ImageLoader.js ├── JsonLoader.js ├── SpineLoader.js └── SpriteSheetLoader.js ├── primitives └── Graphics.js ├── renderers ├── canvas │ ├── CanvasGraphics.js │ └── CanvasRenderer.js └── webgl │ ├── WebGLGraphics.js │ ├── WebGLRenderer.js │ ├── WebGLShaders.js │ └── WebGLSpriteBatch.js ├── text ├── BitmapText.js └── Text.js ├── textures ├── BaseTexture.js ├── RenderTexture.js └── Texture.js └── utils ├── Detector.js ├── EventTarget.js ├── Polyk.js └── Utils.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .project 4 | *.sublime-* 5 | *.log 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | 5 | branches: 6 | only: 7 | - master 8 | - dev 9 | 10 | install: 11 | - npm install grunt-cli 12 | - npm install 13 | 14 | cache: 15 | directories: 16 | - node_modules 17 | 18 | before_script: 19 | - export DISPLAY=:99.0 20 | - sh -e /etc/init.d/xvfb start 21 | 22 | script: 23 | - ./node_modules/.bin/grunt travis -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | It is essential to the development of pixi.js that the community is empowered 4 | to make changes and get them into the library. Here are some guidlines to make 5 | that process silky smooth for all involved. 6 | 7 | ## Reporting issues 8 | 9 | To report a bug, request a feature, or even ask a question, make use of the GitHub Issues 10 | section for [pixi.js][0]. When submitting an issue please take the following steps: 11 | 12 | 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, 13 | be sure to search the issues first before putting in a duplicate issue. 14 | 15 | 2. **Create an isolated and reproducible test case.** If you are reporting a bug, make sure you 16 | also have a minimal, runnable, code example that reproduces the problem you have. 17 | 18 | 3. **Include a live example.** After narrowing your code down to only the problem areas, make use 19 | of [jsFiddle][1], [jsBin][2], or a link to your live site so that we can view a live example of the problem. 20 | 21 | 4. **Share as much information as possible.** Include browser version affected, your OS, version of 22 | the library, steps to reproduce, etc. "X isn't working!!!1!" will probably just be closed. 23 | 24 | 25 | ## Making Changes 26 | 27 | To setup for making changes you will need node.js, and grunt installed. You can download node.js 28 | from [nodejs.org][3]. After it has been installed open a console and run `npm i -g grunt-cli` to 29 | install the global `grunt` executable. 30 | 31 | After that you can clone the pixi.js repository, and run `npm i` inside the cloned folder. 32 | This will install dependencies necessary for building the project. Once that is ready, make your 33 | changes and submit a Pull Request. When submitting a PR follow these guidlines: 34 | 35 | - **Send Pull Requests to the `dev` branch.** All Pull Requests must be sent to the `dev` branch, 36 | `master` is the latest release and PRs to that branch will be closed. 37 | 38 | - **Ensure changes are jshint validated.** After making a change be sure to run the build process 39 | to ensure that you didn't break anything. You can do this with `grunt && grunt test` which will run 40 | jshint, rebuild, then run the test suite. 41 | 42 | - **Never commit new builds.** When making a code change, you should always run `grunt` which will 43 | rebuild the project, *however* please do not commit these new builds or your PR will be closed. 44 | 45 | - **Only commit relevant changes.** Don't include changes that are not directly relevant to the fix 46 | you are making. The more focused a PR is, the faster it will get attention and be merged. Extra files 47 | changing only whitespace or trash files will likely get your PR closed. 48 | 49 | ## Quickie Code Style Guide 50 | 51 | - Use 4 spaces for tabs, never tab characters. 52 | 53 | - No trailing whitespace, blank lines should have no whitespace. 54 | 55 | - Always favor strict equals `===` unless you *need* to use type coercion. 56 | 57 | - Follow conventions already in the code, and listen to jshint. 58 | 59 | [0]: https://github.com/GoodBoyDigital/pixi.js/issues 60 | [1]: http://jsfiddle.net 61 | [2]: http://jsbin.com/ 62 | [3]: http://nodejs.org -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2013-2014 Mathew Groves 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixi.js", 3 | "version": "1.5.1", 4 | 5 | "main": "bin/pixi.js", 6 | 7 | "ignore": [ 8 | "**/.*", 9 | "node_modules", 10 | "bower_components", 11 | "test" 12 | ], 13 | "dependencies": { 14 | }, 15 | "devDependencies": { 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/api.js: -------------------------------------------------------------------------------- 1 | YUI.add("yuidoc-meta", function(Y) { 2 | Y.YUIDoc = { meta: { 3 | "classes": [ 4 | "AbstractFilter", 5 | "AlphaMaskFilter", 6 | "AssetLoader", 7 | "AtlasLoader", 8 | "BaseTexture", 9 | "BitmapFontLoader", 10 | "BitmapText", 11 | "BlurFilter", 12 | "CanvasGraphics", 13 | "CanvasRenderer", 14 | "Circle", 15 | "ColorMatrixFilter", 16 | "ColorStepFilter", 17 | "DisplacementFilter", 18 | "DisplayObject", 19 | "DisplayObjectContainer", 20 | "DotScreenFilter", 21 | "Ellipse", 22 | "EventTarget", 23 | "Graphics", 24 | "GrayFilter", 25 | "ImageLoader", 26 | "InvertFilter", 27 | "JsonLoader", 28 | "MovieClip", 29 | "PIXI.PixiFastShader", 30 | "PIXI.PixiShader", 31 | "PixelateFilter", 32 | "Point", 33 | "PolyK.AjaxRequest", 34 | "PolyK.InteractionData", 35 | "PolyK.InteractionManager", 36 | "PolyK._PointInTriangle", 37 | "PolyK._convex", 38 | "Polygon", 39 | "Rectangle", 40 | "RenderTexture", 41 | "SepiaFilter", 42 | "Spine", 43 | "Sprite", 44 | "SpriteSheetLoader", 45 | "Stage", 46 | "Text", 47 | "Texture", 48 | "TilingSprite", 49 | "TwistFilter", 50 | "WebGLRenderer" 51 | ], 52 | "modules": [ 53 | "PIXI" 54 | ], 55 | "allModules": [ 56 | { 57 | "displayName": "PIXI", 58 | "name": "PIXI" 59 | } 60 | ] 61 | } }; 62 | }); -------------------------------------------------------------------------------- /docs/assets/css/external-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/docs/assets/css/external-small.png -------------------------------------------------------------------------------- /docs/assets/css/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/docs/assets/css/logo.png -------------------------------------------------------------------------------- /docs/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/docs/assets/favicon.png -------------------------------------------------------------------------------- /docs/assets/img/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/docs/assets/img/spinner.gif -------------------------------------------------------------------------------- /docs/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redirector 5 | 6 | 7 | 8 | Click here to redirect 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/assets/js/api-filter.js: -------------------------------------------------------------------------------- 1 | YUI.add('api-filter', function (Y) { 2 | 3 | Y.APIFilter = Y.Base.create('apiFilter', Y.Base, [Y.AutoCompleteBase], { 4 | // -- Initializer ---------------------------------------------------------- 5 | initializer: function () { 6 | this._bindUIACBase(); 7 | this._syncUIACBase(); 8 | }, 9 | getDisplayName: function(name) { 10 | 11 | Y.each(Y.YUIDoc.meta.allModules, function(i) { 12 | if (i.name === name && i.displayName) { 13 | name = i.displayName; 14 | } 15 | }); 16 | 17 | return name; 18 | } 19 | 20 | }, { 21 | // -- Attributes ----------------------------------------------------------- 22 | ATTRS: { 23 | resultHighlighter: { 24 | value: 'phraseMatch' 25 | }, 26 | 27 | // May be set to "classes" or "modules". 28 | queryType: { 29 | value: 'classes' 30 | }, 31 | 32 | source: { 33 | valueFn: function() { 34 | var self = this; 35 | return function(q) { 36 | var data = Y.YUIDoc.meta[self.get('queryType')], 37 | out = []; 38 | Y.each(data, function(v) { 39 | if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) { 40 | out.push(v); 41 | } 42 | }); 43 | return out; 44 | }; 45 | } 46 | } 47 | } 48 | }); 49 | 50 | }, '3.4.0', {requires: [ 51 | 'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources' 52 | ]}); 53 | -------------------------------------------------------------------------------- /docs/assets/js/api-search.js: -------------------------------------------------------------------------------- 1 | YUI.add('api-search', function (Y) { 2 | 3 | var Lang = Y.Lang, 4 | Node = Y.Node, 5 | YArray = Y.Array; 6 | 7 | Y.APISearch = Y.Base.create('apiSearch', Y.Base, [Y.AutoCompleteBase], { 8 | // -- Public Properties ---------------------------------------------------- 9 | RESULT_TEMPLATE: 10 | '
  • ' + 11 | '' + 12 | '

    {name}

    ' + 13 | '{resultType}' + 14 | '
    {description}
    ' + 15 | '{class}' + 16 | '    ' + 17 | '
    • ', 18 | 19 | // -- Initializer ---------------------------------------------------------- 20 | initializer: function () { 21 | this._bindUIACBase(); 22 | this._syncUIACBase(); 23 | }, 24 | 25 | // -- Protected Methods ---------------------------------------------------- 26 | _apiResultFilter: function (query, results) { 27 | // Filter components out of the results. 28 | return YArray.filter(results, function (result) { 29 | return result.raw.resultType === 'component' ? false : result; 30 | }); 31 | }, 32 | 33 | _apiResultFormatter: function (query, results) { 34 | return YArray.map(results, function (result) { 35 | var raw = Y.merge(result.raw), // create a copy 36 | desc = raw.description || ''; 37 | 38 | // Convert description to text and truncate it if necessary. 39 | desc = Node.create('
    ' + desc + '
    ').get('text'); 40 | 41 | if (desc.length > 65) { 42 | desc = Y.Escape.html(desc.substr(0, 65)) + ' …'; 43 | } else { 44 | desc = Y.Escape.html(desc); 45 | } 46 | 47 | raw['class'] || (raw['class'] = ''); 48 | raw.description = desc; 49 | 50 | // Use the highlighted result name. 51 | raw.name = result.highlighted; 52 | 53 | return Lang.sub(this.RESULT_TEMPLATE, raw); 54 | }, this); 55 | }, 56 | 57 | _apiTextLocator: function (result) { 58 | return result.displayName || result.name; 59 | } 60 | }, { 61 | // -- Attributes ----------------------------------------------------------- 62 | ATTRS: { 63 | resultFormatter: { 64 | valueFn: function () { 65 | return this._apiResultFormatter; 66 | } 67 | }, 68 | 69 | resultFilters: { 70 | valueFn: function () { 71 | return this._apiResultFilter; 72 | } 73 | }, 74 | 75 | resultHighlighter: { 76 | value: 'phraseMatch' 77 | }, 78 | 79 | resultListLocator: { 80 | value: 'data.results' 81 | }, 82 | 83 | resultTextLocator: { 84 | valueFn: function () { 85 | return this._apiTextLocator; 86 | } 87 | }, 88 | 89 | source: { 90 | value: '/api/v1/search?q={query}&count={maxResults}' 91 | } 92 | } 93 | }); 94 | 95 | }, '3.4.0', {requires: [ 96 | 'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources', 97 | 'escape' 98 | ]}); 99 | -------------------------------------------------------------------------------- /docs/assets/js/yui-prettify.js: -------------------------------------------------------------------------------- 1 | YUI().use('node', function(Y) { 2 | var code = Y.all('.prettyprint.linenums'); 3 | if (code.size()) { 4 | code.each(function(c) { 5 | var lis = c.all('ol li'), 6 | l = 1; 7 | lis.each(function(n) { 8 | n.prepend(''); 9 | l++; 10 | }); 11 | }); 12 | var h = location.hash; 13 | location.hash = ''; 14 | h = h.replace('LINE_', 'LINENUM_'); 15 | location.hash = h; 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /docs/assets/vendor/prettify/prettify-min.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /docs/classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redirector 5 | 6 | 7 | 8 | Click here to redirect 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redirector 5 | 6 | 7 | 8 | Click here to redirect 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redirector 5 | 6 | 7 | 8 | Click here to redirect 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/example 1 - Basics/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 1 - Basics/bunny.png -------------------------------------------------------------------------------- /examples/example 1 - Basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 1 5 | 12 | 13 | 14 | 15 | 16 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /examples/example 1 - Basics/indexTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 1 5 | 12 | 13 | 14 | 15 | 16 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /examples/example 10 - Text/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 10 - Text/desyrel.png -------------------------------------------------------------------------------- /examples/example 10 - Text/textDemoBG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 10 - Text/textDemoBG.jpg -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_01.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_02.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_03.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_04.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_05.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_06.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_07.png -------------------------------------------------------------------------------- /examples/example 11 - RenderTexture/spinObj_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 11 - RenderTexture/spinObj_08.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/Pixie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/Pixie.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/dragonBones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/dragonBones.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/goblins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/goblins.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/iP4_BGtile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/iP4_BGtile.jpg -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/iP4_ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/iP4_ground.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/data/spineboy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 12 - Spine/data/spineboy.png -------------------------------------------------------------------------------- /examples/example 12 - Spine/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 12 Spine 5 | 12 | 13 | 14 | 15 | 16 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /examples/example 12 - Spine/index_dragon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 12 Spine 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /examples/example 12 - Spine/index_goblins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 12 Spine 5 | 12 | 13 | 14 | 15 | 16 | 17 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /examples/example 13 - Graphics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 13 - Graphics 5 | 12 | 13 | 14 | 15 | 16 | 17 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_01.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_02.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_03.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_04.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_05.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_06.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_07.png -------------------------------------------------------------------------------- /examples/example 13 - Graphics/spinObj_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 13 - Graphics/spinObj_08.png -------------------------------------------------------------------------------- /examples/example 14 - Masking/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 14 - Masking/BGrotate.jpg -------------------------------------------------------------------------------- /examples/example 14 - Masking/LightRotate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 14 - Masking/LightRotate1.png -------------------------------------------------------------------------------- /examples/example 14 - Masking/LightRotate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 14 - Masking/LightRotate2.png -------------------------------------------------------------------------------- /examples/example 14 - Masking/SceneRotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 14 - Masking/SceneRotate.jpg -------------------------------------------------------------------------------- /examples/example 14 - Masking/index double mask.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 14 - Masking 5 | 12 | 13 | 14 | 15 | 16 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /examples/example 14 - Masking/index nested masks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 14 - Masking 5 | 12 | 13 | 14 | 15 | 16 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /examples/example 14 - Masking/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 14 - Masking/panda.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/BGrotate.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/LightRotate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/LightRotate1.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/LightRotate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/LightRotate2.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/SceneRotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/SceneRotate.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/depth_blur_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/depth_blur_BG.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/depth_blur_dudes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/depth_blur_dudes.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/depth_blur_moby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/depth_blur_moby.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacementMAP.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacementMAP.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_BG.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_fish1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_fish1.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_fish2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_fish2.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_fish3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_fish3.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_fish4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_fish4.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_map.jpg -------------------------------------------------------------------------------- /examples/example 15 - Filters/displacement_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/displacement_overlay.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/indexBlur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 15 - Filters 5 | 12 | 13 | 14 | 15 | 16 | 17 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /examples/example 15 - Filters/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/panda.png -------------------------------------------------------------------------------- /examples/example 15 - Filters/zeldaWaves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 15 - Filters/zeldaWaves.png -------------------------------------------------------------------------------- /examples/example 16 - BlendModes/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 16 - BlendModes/BGrotate.jpg -------------------------------------------------------------------------------- /examples/example 16 - BlendModes/flowerTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 16 - BlendModes/flowerTop.png -------------------------------------------------------------------------------- /examples/example 17 - Tinting/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 17 - Tinting/BGrotate.jpg -------------------------------------------------------------------------------- /examples/example 17 - Tinting/eggHead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 17 - Tinting/eggHead.png -------------------------------------------------------------------------------- /examples/example 18 - Batch/click.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 18 - Batch/click.png -------------------------------------------------------------------------------- /examples/example 18 - Batch/logo_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 18 - Batch/logo_small.png -------------------------------------------------------------------------------- /examples/example 18 - Batch/tinyMaggot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 18 - Batch/tinyMaggot.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/SpriteSheet.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": "SpriteSheet.png", 39 | "format": "RGBA8888", 40 | "size": {"w":256,"h":512}, 41 | "scale": "1", 42 | "smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/SpriteSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/SpriteSheet.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/fighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/fighter.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 2 loading a sprite sheet 5 | 12 | 13 | 14 | 15 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/indexTrim.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 2 loading a sprite sheet 5 | 12 | 13 | 14 | 15 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/tp/SpriteSheet.tps: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/tp/SpriteSheet.tps -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/tp/eggHead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/tp/eggHead.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/tp/flowerTop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/tp/flowerTop.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/tp/helmlok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/tp/helmlok.png -------------------------------------------------------------------------------- /examples/example 2 - SpriteSheet/tp/skully.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 2 - SpriteSheet/tp/skully.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/SpriteSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/SpriteSheet.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 3 using a movieclip 5 | 12 | 13 | 14 | 15 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/SpriteSheet.tps: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/SpriteSheet.tps -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 1.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 10.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 11.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 12.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 13.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 14.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 15.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 16.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 17.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 18.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 19.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 2.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 20.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 21.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 22.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 23.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 24.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 25.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 26.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 27.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 3.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 4.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 5.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 6.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 7.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 8.png -------------------------------------------------------------------------------- /examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 3 - MovieClip/tp/explosion/Explosion_Sequence_A 9.png -------------------------------------------------------------------------------- /examples/example 4 - Balls/assets/bubble_32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 4 - Balls/assets/bubble_32x32.png -------------------------------------------------------------------------------- /examples/example 4 - Balls/assets/bubble_64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 4 - Balls/assets/bubble_64x64.png -------------------------------------------------------------------------------- /examples/example 4 - Balls/assets/photonstorm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 4 - Balls/assets/photonstorm.png -------------------------------------------------------------------------------- /examples/example 4 - Balls/assets/pixi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 4 - Balls/assets/pixi.png -------------------------------------------------------------------------------- /examples/example 4 - Balls/storm.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #000000; 5 | } 6 | 7 | #rnd { 8 | position: absolute; 9 | top: 16px; 10 | left: 16px; 11 | } 12 | 13 | #photonstorm { 14 | position: absolute; 15 | bottom: 16px; 16 | right: 16px; 17 | } 18 | 19 | #pixi { 20 | position: absolute; 21 | bottom: 16px; 22 | left: 16px; 23 | } 24 | 25 | #sx { 26 | position: absolute; 27 | top: 16px; 28 | right: 16px; 29 | width: 200px; 30 | height: 48px; 31 | font-size: 12px; 32 | font-family: Arial; 33 | color: rgba(255,255,255,0.8); 34 | } 35 | -------------------------------------------------------------------------------- /examples/example 5 - Morph/assets/photonstorm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 5 - Morph/assets/photonstorm.png -------------------------------------------------------------------------------- /examples/example 5 - Morph/assets/pixel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 5 - Morph/assets/pixel.png -------------------------------------------------------------------------------- /examples/example 5 - Morph/assets/pixi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 5 - Morph/assets/pixi.png -------------------------------------------------------------------------------- /examples/example 5 - Morph/storm.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #000000; 5 | } 6 | 7 | #photonstorm { 8 | position: absolute; 9 | bottom: 16px; 10 | right: 16px; 11 | } 12 | 13 | #pixi { 14 | position: absolute; 15 | bottom: 16px; 16 | left: 16px; 17 | } 18 | -------------------------------------------------------------------------------- /examples/example 6 - Interactivity/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 6 - Interactivity/button.png -------------------------------------------------------------------------------- /examples/example 6 - Interactivity/buttonDown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 6 - Interactivity/buttonDown.png -------------------------------------------------------------------------------- /examples/example 6 - Interactivity/buttonOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 6 - Interactivity/buttonOver.png -------------------------------------------------------------------------------- /examples/example 6 - Interactivity/button_test_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 6 - Interactivity/button_test_BG.jpg -------------------------------------------------------------------------------- /examples/example 6 - Interactivity/pixi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 6 - Interactivity/pixi.png -------------------------------------------------------------------------------- /examples/example 7 - Transparent Background/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 7 - Transparent Background/bunny.png -------------------------------------------------------------------------------- /examples/example 7 - Transparent Background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 7 transparency 5 | 16 | 17 | 18 | 19 |
    Hi there, I'm some HTML text... blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 20 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 21 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 22 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 23 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 24 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 25 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 26 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 27 | blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    28 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /examples/example 7 - Transparent Background/shapeTris.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 7 - Transparent Background/shapeTris.png -------------------------------------------------------------------------------- /examples/example 8 - Dragging/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 8 - Dragging/bunny.png -------------------------------------------------------------------------------- /examples/example 8 - Dragging/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 8 Dragging 5 | 13 | 14 | 15 | 16 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /examples/example 9 - Tiling Texture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pixi.js example 9 Tiling Texture 5 | 13 | 14 | 15 | 16 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /examples/example 9 - Tiling Texture/p2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/example 9 - Tiling Texture/p2.jpeg -------------------------------------------------------------------------------- /examples/test/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/examples/test/bunny.png -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/logo.png -------------------------------------------------------------------------------- /logo_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SebastianNette/pixi.js/b9363442acf63ad399df1a6be2126d80b9391bd2/logo_small.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixi.js", 3 | "version": "1.5.1", 4 | "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", 5 | 6 | "author": "Mat Groves", 7 | "contributors": [ 8 | "Chad Engler " 9 | ], 10 | "logo": "http://www.goodboydigital.com/pixijs/logo_small.png", 11 | 12 | "homepage": "http://goodboydigital.com/", 13 | "bugs": "https://github.com/GoodBoyDigital/pixi.js/issues", 14 | "license": "MIT", 15 | "licenseUrl": "http://www.opensource.org/licenses/mit-license.php", 16 | 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/GoodBoyDigital/pixi.js.git" 20 | }, 21 | 22 | "main": "bin/pixi.js", 23 | 24 | "scripts": { 25 | "test": "grunt travis --verbose" 26 | }, 27 | 28 | "dependencies": {}, 29 | "devDependencies": { 30 | "grunt": "~0.4.1", 31 | "grunt-contrib-jshint": "~0.8", 32 | "grunt-contrib-uglify": "~0.2", 33 | "grunt-contrib-connect": "~0.5", 34 | "grunt-contrib-yuidoc": "~0.5", 35 | "grunt-concat-sourcemap": "~0.4", 36 | "grunt-contrib-concat": "~0.3", 37 | "mocha": "~1.15", 38 | "chai": "~1.8", 39 | "karma": "~0.10", 40 | "karma-chrome-launcher": "~0.1", 41 | "karma-firefox-launcher": "~0.1", 42 | "karma-mocha": "~0.1", 43 | "karma-spec-reporter": "~0.0.6" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/pixi/InteractionData.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * Holds all information related to an Interaction event 7 | * 8 | * @class InteractionData 9 | * @constructor 10 | */ 11 | PIXI.InteractionData = function() 12 | { 13 | /** 14 | * This point stores the global coords of where the touch/mouse event happened 15 | * 16 | * @property global 17 | * @type Point 18 | */ 19 | this.global = new PIXI.Point(); 20 | 21 | // this is here for legacy... but will remove 22 | this.local = new PIXI.Point(); 23 | 24 | /** 25 | * The target Sprite that was interacted with 26 | * 27 | * @property target 28 | * @type Sprite 29 | */ 30 | this.target = null; 31 | 32 | /** 33 | * When passed to an event handler, this will be the original DOM Event that was captured 34 | * 35 | * @property originalEvent 36 | * @type Event 37 | */ 38 | this.originalEvent = null; 39 | }; 40 | 41 | /** 42 | * This will return the local coordinates of the specified displayObject for this InteractionData 43 | * 44 | * @method getLocalPosition 45 | * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off 46 | * @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject 47 | */ 48 | PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) 49 | { 50 | var worldTransform = displayObject.worldTransform; 51 | var global = this.global; 52 | 53 | // do a cheeky transform to get the mouse coords; 54 | var a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, 55 | a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, 56 | id = 1 / (a00 * a11 + a01 * -a10); 57 | // set the mouse coords... 58 | return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, 59 | a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); 60 | }; 61 | 62 | // constructor 63 | PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; -------------------------------------------------------------------------------- /src/pixi/Intro.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | (function(){ 6 | 7 | var root = this; 8 | -------------------------------------------------------------------------------- /src/pixi/Outro.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | if (typeof exports !== 'undefined') { 6 | if (typeof module !== 'undefined' && module.exports) { 7 | exports = module.exports = PIXI; 8 | } 9 | exports.PIXI = PIXI; 10 | } else if (typeof define !== 'undefined' && define.amd) { 11 | define(PIXI); 12 | } else { 13 | root.PIXI = PIXI; 14 | } 15 | }).call(this); -------------------------------------------------------------------------------- /src/pixi/Pixi.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * @module PIXI 7 | */ 8 | var PIXI = PIXI || {}; 9 | 10 | /* 11 | * 12 | * This file contains a lot of pixi consts which are used across the rendering engine 13 | * @class Consts 14 | */ 15 | PIXI.WEBGL_RENDERER = 0; 16 | PIXI.CANVAS_RENDERER = 1; 17 | 18 | // useful for testing against if your lib is using pixi. 19 | PIXI.VERSION = "v1.5.1"; 20 | 21 | // the various blend modes supported by pixi 22 | PIXI.blendModes = { 23 | NORMAL:0, 24 | ADD:1, 25 | MULTIPLY:2, 26 | SCREEN:3, 27 | OVERLAY:4, 28 | DARKEN:5, 29 | LIGHTEN:6, 30 | COLOR_DODGE:7, 31 | COLOR_BURN:8, 32 | HARD_LIGHT:9, 33 | SOFT_LIGHT:10, 34 | DIFFERENCE:11, 35 | EXCLUSION:12, 36 | HUE:13, 37 | SATURATION:14, 38 | COLOR:15, 39 | LUMINOSITY:16 40 | }; 41 | 42 | // the scale modes 43 | PIXI.scaleModes = { 44 | DEFAULT:0, 45 | LINEAR:0, 46 | NEAREST:1 47 | }; 48 | 49 | // interaction frequency 50 | PIXI.INTERACTION_FREQUENCY = 30; 51 | PIXI.AUTO_PREVENT_DEFAULT = true; 52 | 53 | PIXI.RAD_TO_DEG = 180 / Math.PI; 54 | PIXI.DEG_TO_RAD = Math.PI / 180; -------------------------------------------------------------------------------- /src/pixi/core/Circle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Chad Engler 3 | */ 4 | 5 | /** 6 | * The Circle object can be used to specify a hit area for displayObjects 7 | * 8 | * @class Circle 9 | * @constructor 10 | * @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this circle 11 | * @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this circle 12 | * @param radius {Number} The radius of the circle 13 | */ 14 | PIXI.Circle = function(x, y, radius) 15 | { 16 | /** 17 | * @property x 18 | * @type Number 19 | * @default 0 20 | */ 21 | this.x = x || 0; 22 | 23 | /** 24 | * @property y 25 | * @type Number 26 | * @default 0 27 | */ 28 | this.y = y || 0; 29 | 30 | /** 31 | * @property radius 32 | * @type Number 33 | * @default 0 34 | */ 35 | this.radius = radius || 0; 36 | }; 37 | 38 | /** 39 | * Creates a clone of this Circle instance 40 | * 41 | * @method clone 42 | * @return {Circle} a copy of the polygon 43 | */ 44 | PIXI.Circle.prototype.clone = function() 45 | { 46 | return new PIXI.Circle(this.x, this.y, this.radius); 47 | }; 48 | 49 | /** 50 | * Checks whether the x, and y coordinates passed to this function are contained within this circle 51 | * 52 | * @method contains 53 | * @param x {Number} The X coordinate of the point to test 54 | * @param y {Number} The Y coordinate of the point to test 55 | * @return {Boolean} Whether the x/y coordinates are within this polygon 56 | */ 57 | PIXI.Circle.prototype.contains = function(x, y) 58 | { 59 | if(this.radius <= 0) 60 | return false; 61 | 62 | var dx = (this.x - x), 63 | dy = (this.y - y), 64 | r2 = this.radius * this.radius; 65 | 66 | dx *= dx; 67 | dy *= dy; 68 | 69 | return (dx + dy <= r2); 70 | }; 71 | 72 | // constructor 73 | PIXI.Circle.prototype.constructor = PIXI.Circle; 74 | 75 | -------------------------------------------------------------------------------- /src/pixi/core/Ellipse.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Chad Engler 3 | */ 4 | 5 | /** 6 | * The Ellipse object can be used to specify a hit area for displayObjects 7 | * 8 | * @class Ellipse 9 | * @constructor 10 | * @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this ellipse 11 | * @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this ellipse 12 | * @param width {Number} The overall width of this ellipse 13 | * @param height {Number} The overall height of this ellipse 14 | */ 15 | PIXI.Ellipse = function(x, y, width, height) 16 | { 17 | /** 18 | * @property x 19 | * @type Number 20 | * @default 0 21 | */ 22 | this.x = x || 0; 23 | 24 | /** 25 | * @property y 26 | * @type Number 27 | * @default 0 28 | */ 29 | this.y = y || 0; 30 | 31 | /** 32 | * @property width 33 | * @type Number 34 | * @default 0 35 | */ 36 | this.width = width || 0; 37 | 38 | /** 39 | * @property height 40 | * @type Number 41 | * @default 0 42 | */ 43 | this.height = height || 0; 44 | }; 45 | 46 | /** 47 | * Creates a clone of this Ellipse instance 48 | * 49 | * @method clone 50 | * @return {Ellipse} a copy of the ellipse 51 | */ 52 | PIXI.Ellipse.prototype.clone = function() 53 | { 54 | return new PIXI.Ellipse(this.x, this.y, this.width, this.height); 55 | }; 56 | 57 | /** 58 | * Checks whether the x and y coordinates passed to this function are contained within this ellipse 59 | * 60 | * @method contains 61 | * @param x {Number} The X coordinate of the point to test 62 | * @param y {Number} The Y coordinate of the point to test 63 | * @return {Boolean} Whether the x/y coords are within this ellipse 64 | */ 65 | PIXI.Ellipse.prototype.contains = function(x, y) 66 | { 67 | if(this.width <= 0 || this.height <= 0) 68 | return false; 69 | 70 | //normalize the coords to an ellipse with center 0,0 71 | var normx = ((x - this.x) / this.width), 72 | normy = ((y - this.y) / this.height); 73 | 74 | normx *= normx; 75 | normy *= normy; 76 | 77 | return (normx + normy <= 1); 78 | }; 79 | 80 | /** 81 | * Returns the framing rectangle of the ellipse as a PIXI.Rectangle object 82 | * 83 | * @method getBounds 84 | * @return {Rectangle} the framing rectangle 85 | */ 86 | PIXI.Ellipse.prototype.getBounds = function() 87 | { 88 | return new PIXI.Rectangle(this.x, this.y, this.width, this.height); 89 | }; 90 | 91 | // constructor 92 | PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; 93 | -------------------------------------------------------------------------------- /src/pixi/core/Matrix.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.determineMatrixArrayType = function() { 6 | return (typeof Float32Array !== 'undefined') ? Float32Array : Array; 7 | }; 8 | 9 | /* 10 | * @class Matrix2 11 | * The Matrix2 class will choose the best type of array to use between 12 | * a regular javascript Array and a Float32Array if the latter is available 13 | * 14 | */ 15 | PIXI.Matrix2 = PIXI.determineMatrixArrayType(); 16 | 17 | /* 18 | * @class Matrix 19 | * The Matrix class is now an object, which makes it a lot faster, 20 | * here is a representation of it : 21 | * | a | b | tx| 22 | * | c | c | ty| 23 | * | 0 | 0 | 1 | 24 | * 25 | */ 26 | PIXI.Matrix = function() 27 | { 28 | this.a = 1; 29 | this.b = 0; 30 | this.c = 0; 31 | this.d = 1; 32 | this.tx = 0; 33 | this.ty = 0; 34 | }; 35 | 36 | /** 37 | * Creates a pixi matrix object based on the array given as a parameter 38 | * 39 | * @method fromArray 40 | * @param array {Array} The array that the matrix will be filled with 41 | */ 42 | PIXI.Matrix.prototype.fromArray = function(array) 43 | { 44 | this.a = array[0]; 45 | this.b = array[1]; 46 | this.c = array[3]; 47 | this.d = array[4]; 48 | this.tx = array[2]; 49 | this.ty = array[5]; 50 | }; 51 | 52 | /** 53 | * Creates an array from the current Matrix object 54 | * 55 | * @method toArray 56 | * @param transpose {Boolean} Whether we need to transpose the matrix or not 57 | * @return array {Array} the newly created array which contains the matrix 58 | */ 59 | PIXI.Matrix.prototype.toArray = function(transpose) 60 | { 61 | if(!this.array) this.array = new Float32Array(9); 62 | var array = this.array; 63 | 64 | if(transpose) 65 | { 66 | this.array[0] = this.a; 67 | this.array[1] = this.c; 68 | this.array[2] = 0; 69 | this.array[3] = this.b; 70 | this.array[4] = this.d; 71 | this.array[5] = 0; 72 | this.array[6] = this.tx; 73 | this.array[7] = this.ty; 74 | this.array[8] = 1; 75 | } 76 | else 77 | { 78 | this.array[0] = this.a; 79 | this.array[1] = this.b; 80 | this.array[2] = this.tx; 81 | this.array[3] = this.c; 82 | this.array[4] = this.d; 83 | this.array[5] = this.ty; 84 | this.array[6] = 0; 85 | this.array[7] = 0; 86 | this.array[8] = 1; 87 | } 88 | 89 | return array;//[this.a, this.b, this.tx, this.c, this.d, this.ty, 0, 0, 1]; 90 | }; 91 | 92 | PIXI.identityMatrix = new PIXI.Matrix(); -------------------------------------------------------------------------------- /src/pixi/core/Point.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. 7 | * 8 | * @class Point 9 | * @constructor 10 | * @param x {Number} position of the point on the x axis 11 | * @param y {Number} position of the point on the y axis 12 | */ 13 | PIXI.Point = function(x, y) 14 | { 15 | /** 16 | * @property x 17 | * @type Number 18 | * @default 0 19 | */ 20 | this.x = x || 0; 21 | 22 | /** 23 | * @property y 24 | * @type Number 25 | * @default 0 26 | */ 27 | this.y = y || 0; 28 | }; 29 | 30 | /** 31 | * Creates a clone of this point 32 | * 33 | * @method clone 34 | * @return {Point} a copy of the point 35 | */ 36 | PIXI.Point.prototype.clone = function() 37 | { 38 | return new PIXI.Point(this.x, this.y); 39 | }; 40 | 41 | // constructor 42 | PIXI.Point.prototype.constructor = PIXI.Point; 43 | 44 | PIXI.Point.prototype.set = function(x, y) 45 | { 46 | this.x = x || 0; 47 | this.y = y || ( (y !== 0) ? this.x : 0 ) ; 48 | }; 49 | 50 | -------------------------------------------------------------------------------- /src/pixi/core/Polygon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Adrien Brault 3 | */ 4 | 5 | /** 6 | * @class Polygon 7 | * @constructor 8 | * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, 9 | * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be 10 | * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the 11 | * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are 12 | * Numbers. 13 | */ 14 | PIXI.Polygon = function(points) 15 | { 16 | //if points isn't an array, use arguments as the array 17 | if(!(points instanceof Array)) 18 | points = Array.prototype.slice.call(arguments); 19 | 20 | //if this is a flat array of numbers, convert it to points 21 | if(typeof points[0] === 'number') { 22 | var p = []; 23 | for(var i = 0, il = points.length; i < il; i+=2) { 24 | p.push( 25 | new PIXI.Point(points[i], points[i + 1]) 26 | ); 27 | } 28 | 29 | points = p; 30 | } 31 | 32 | this.points = points; 33 | }; 34 | 35 | /** 36 | * Creates a clone of this polygon 37 | * 38 | * @method clone 39 | * @return {Polygon} a copy of the polygon 40 | */ 41 | PIXI.Polygon.prototype.clone = function() 42 | { 43 | var points = []; 44 | for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); 69 | 70 | if(intersect) inside = !inside; 71 | } 72 | 73 | return inside; 74 | }; 75 | 76 | // constructor 77 | PIXI.Polygon.prototype.constructor = PIXI.Polygon; 78 | -------------------------------------------------------------------------------- /src/pixi/core/Rectangle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ 3 | */ 4 | 5 | /** 6 | * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. 7 | * 8 | * @class Rectangle 9 | * @constructor 10 | * @param x {Number} The X coord of the upper-left corner of the rectangle 11 | * @param y {Number} The Y coord of the upper-left corner of the rectangle 12 | * @param width {Number} The overall width of this rectangle 13 | * @param height {Number} The overall height of this rectangle 14 | */ 15 | PIXI.Rectangle = function(x, y, width, height) 16 | { 17 | /** 18 | * @property x 19 | * @type Number 20 | * @default 0 21 | */ 22 | this.x = x || 0; 23 | 24 | /** 25 | * @property y 26 | * @type Number 27 | * @default 0 28 | */ 29 | this.y = y || 0; 30 | 31 | /** 32 | * @property width 33 | * @type Number 34 | * @default 0 35 | */ 36 | this.width = width || 0; 37 | 38 | /** 39 | * @property height 40 | * @type Number 41 | * @default 0 42 | */ 43 | this.height = height || 0; 44 | }; 45 | 46 | /** 47 | * Creates a clone of this Rectangle 48 | * 49 | * @method clone 50 | * @return {Rectangle} a copy of the rectangle 51 | */ 52 | PIXI.Rectangle.prototype.clone = function() 53 | { 54 | return new PIXI.Rectangle(this.x, this.y, this.width, this.height); 55 | }; 56 | 57 | /** 58 | * Checks whether the x and y coordinates passed to this function are contained within this Rectangle 59 | * 60 | * @method contains 61 | * @param x {Number} The X coordinate of the point to test 62 | * @param y {Number} The Y coordinate of the point to test 63 | * @return {Boolean} Whether the x/y coords are within this Rectangle 64 | */ 65 | PIXI.Rectangle.prototype.contains = function(x, y) 66 | { 67 | if(this.width <= 0 || this.height <= 0) 68 | return false; 69 | 70 | var x1 = this.x; 71 | if(x >= x1 && x <= x1 + this.width) 72 | { 73 | var y1 = this.y; 74 | 75 | if(y >= y1 && y <= y1 + this.height) 76 | { 77 | return true; 78 | } 79 | } 80 | 81 | return false; 82 | }; 83 | 84 | // constructor 85 | PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; 86 | 87 | PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); -------------------------------------------------------------------------------- /src/pixi/extras/Strip.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ 3 | */ 4 | 5 | /** 6 | * 7 | * @class Strip 8 | * @extends DisplayObjectContainer 9 | * @constructor 10 | * @param texture {Texture} The texture to use 11 | * @param width {Number} the width 12 | * @param height {Number} the height 13 | * 14 | */ 15 | PIXI.Strip = function(texture, width, height) 16 | { 17 | PIXI.DisplayObjectContainer.call( this ); 18 | this.texture = texture; 19 | this.blendMode = PIXI.blendModes.NORMAL; 20 | 21 | try 22 | { 23 | this.uvs = new Float32Array([0, 1, 24 | 1, 1, 25 | 1, 0, 0,1]); 26 | 27 | this.verticies = new Float32Array([0, 0, 28 | 0,0, 29 | 0,0, 0, 30 | 0, 0]); 31 | 32 | this.colors = new Float32Array([1, 1, 1, 1]); 33 | 34 | this.indices = new Uint16Array([0, 1, 2, 3]); 35 | } 36 | catch(error) 37 | { 38 | this.uvs = [0, 1, 39 | 1, 1, 40 | 1, 0, 0,1]; 41 | 42 | this.verticies = [0, 0, 43 | 0,0, 44 | 0,0, 0, 45 | 0, 0]; 46 | 47 | this.colors = [1, 1, 1, 1]; 48 | 49 | this.indices = [0, 1, 2, 3]; 50 | } 51 | 52 | 53 | /* 54 | this.uvs = new Float32Array() 55 | this.verticies = new Float32Array() 56 | this.colors = new Float32Array() 57 | this.indices = new Uint16Array() 58 | */ 59 | 60 | this.width = width; 61 | this.height = height; 62 | 63 | // load the texture! 64 | if(texture.baseTexture.hasLoaded) 65 | { 66 | this.width = this.texture.frame.width; 67 | this.height = this.texture.frame.height; 68 | this.updateFrame = true; 69 | } 70 | else 71 | { 72 | this.onTextureUpdateBind = this.onTextureUpdate.bind(this); 73 | this.texture.addEventListener( 'update', this.onTextureUpdateBind ); 74 | } 75 | 76 | this.renderable = true; 77 | }; 78 | 79 | // constructor 80 | PIXI.Strip.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); 81 | PIXI.Strip.prototype.constructor = PIXI.Strip; 82 | 83 | /* 84 | * Sets the texture that the Strip will use 85 | * 86 | * @method setTexture 87 | * @param texture {Texture} the texture that will be used 88 | * @private 89 | */ 90 | PIXI.Strip.prototype.setTexture = function(texture) 91 | { 92 | //TODO SET THE TEXTURES 93 | //TODO VISIBILITY 94 | 95 | // stop current texture 96 | this.texture = texture; 97 | this.width = texture.frame.width; 98 | this.height = texture.frame.height; 99 | this.updateFrame = true; 100 | }; 101 | 102 | /** 103 | * When the texture is updated, this event will fire to update the scale and frame 104 | * 105 | * @method onTextureUpdate 106 | * @param event 107 | * @private 108 | */ 109 | PIXI.Strip.prototype.onTextureUpdate = function() 110 | { 111 | this.updateFrame = true; 112 | }; -------------------------------------------------------------------------------- /src/pixi/filters/AbstractFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. 7 | * If you want to make a custom filter this should be your base class. 8 | * @class AbstractFilter 9 | * @constructor 10 | * @param fragmentSrc 11 | * @param uniforms 12 | */ 13 | PIXI.AbstractFilter = function(fragmentSrc, uniforms) 14 | { 15 | /** 16 | * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. 17 | * For example the blur filter has two passes blurX and blurY. 18 | * @property passes 19 | * @type Array an array of filter objects 20 | * @private 21 | */ 22 | this.passes = [this]; 23 | 24 | /** 25 | * @property shaders 26 | * @type Array an array of shaders 27 | * @private 28 | */ 29 | this.shaders = []; 30 | 31 | this.dirty = true; 32 | this.padding = 0; 33 | 34 | /** 35 | * @property uniforms 36 | * @type object 37 | * @private 38 | */ 39 | this.uniforms = uniforms || {}; 40 | /** 41 | * @property fragmentSrc 42 | * @type Array 43 | * @private 44 | */ 45 | this.fragmentSrc = fragmentSrc || []; 46 | }; 47 | -------------------------------------------------------------------------------- /src/pixi/filters/AlphaMaskFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * The AlphaMaskFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. 8 | * You can use this filter to apply all manor of crazy warping effects 9 | * Currently the r property of the texture is used to offset the x and the g propery of the texture is used to offset the y. 10 | * @class AlphaMaskFilter 11 | * @contructor 12 | * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment 13 | */ 14 | PIXI.AlphaMaskFilter = function(texture) 15 | { 16 | PIXI.AbstractFilter.call( this ); 17 | 18 | this.passes = [this]; 19 | texture.baseTexture._powerOf2 = true; 20 | 21 | // set the uniforms 22 | this.uniforms = { 23 | mask: {type: 'sampler2D', value:texture}, 24 | mapDimensions: {type: '2f', value:{x:1, y:5112}}, 25 | dimensions: {type: '4fv', value:[0,0,0,0]} 26 | }; 27 | 28 | if(texture.baseTexture.hasLoaded) 29 | { 30 | this.uniforms.mask.value.x = texture.width; 31 | this.uniforms.mask.value.y = texture.height; 32 | } 33 | else 34 | { 35 | this.boundLoadedFunction = this.onTextureLoaded.bind(this); 36 | 37 | texture.baseTexture.on('loaded', this.boundLoadedFunction); 38 | } 39 | 40 | this.fragmentSrc = [ 41 | 'precision mediump float;', 42 | 'varying vec2 vTextureCoord;', 43 | 'varying vec4 vColor;', 44 | 'uniform sampler2D mask;', 45 | 'uniform sampler2D uSampler;', 46 | 'uniform vec2 offset;', 47 | 'uniform vec4 dimensions;', 48 | 'uniform vec2 mapDimensions;', 49 | 50 | 'void main(void) {', 51 | ' vec2 mapCords = vTextureCoord.xy;', 52 | ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', 53 | ' mapCords.y *= -1.0;', 54 | ' mapCords.y += 1.0;', 55 | ' mapCords *= dimensions.xy / mapDimensions;', 56 | 57 | ' vec4 original = texture2D(uSampler, vTextureCoord);', 58 | ' float maskAlpha = texture2D(mask, mapCords).r;', 59 | ' original *= maskAlpha;', 60 | //' original.rgb *= maskAlpha;', 61 | ' gl_FragColor = original;', 62 | //' gl_FragColor = gl_FragColor;', 63 | '}' 64 | ]; 65 | }; 66 | 67 | PIXI.AlphaMaskFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 68 | PIXI.AlphaMaskFilter.prototype.constructor = PIXI.AlphaMaskFilter; 69 | 70 | PIXI.AlphaMaskFilter.prototype.onTextureLoaded = function() 71 | { 72 | this.uniforms.mapDimensions.value.x = this.uniforms.mask.value.width; 73 | this.uniforms.mapDimensions.value.y = this.uniforms.mask.value.height; 74 | 75 | this.uniforms.mask.value.baseTexture.off('loaded', this.boundLoadedFunction); 76 | }; 77 | 78 | /** 79 | * The texture used for the displacemtent map * must be power of 2 texture at the moment 80 | * 81 | * @property map 82 | * @type Texture 83 | */ 84 | Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'map', { 85 | get: function() { 86 | return this.uniforms.mask.value; 87 | }, 88 | set: function(value) { 89 | this.uniforms.mask.value = value; 90 | } 91 | }); 92 | 93 | -------------------------------------------------------------------------------- /src/pixi/filters/BlurFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * The BlurFilter applies a Gaussian blur to an object. 8 | * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). 9 | * 10 | * @class BlurFilter 11 | * @contructor 12 | */ 13 | PIXI.BlurFilter = function() 14 | { 15 | this.blurXFilter = new PIXI.BlurXFilter(); 16 | this.blurYFilter = new PIXI.BlurYFilter(); 17 | 18 | this.passes =[this.blurXFilter, this.blurYFilter]; 19 | }; 20 | 21 | /** 22 | * Sets the strength of both the blurX and blurY properties simultaneously 23 | * 24 | * @property blur 25 | * @type Number the strength of the blur 26 | * @default 2 27 | */ 28 | Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', { 29 | get: function() { 30 | return this.blurXFilter.blur; 31 | }, 32 | set: function(value) { 33 | this.blurXFilter.blur = this.blurYFilter.blur = value; 34 | } 35 | }); 36 | 37 | /** 38 | * Sets the strength of the blurX property 39 | * 40 | * @property blurX 41 | * @type Number the strength of the blurX 42 | * @default 2 43 | */ 44 | Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', { 45 | get: function() { 46 | return this.blurXFilter.blur; 47 | }, 48 | set: function(value) { 49 | this.blurXFilter.blur = value; 50 | } 51 | }); 52 | 53 | /** 54 | * Sets the strength of the blurX property 55 | * 56 | * @property blurY 57 | * @type Number the strength of the blurY 58 | * @default 2 59 | */ 60 | Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', { 61 | get: function() { 62 | return this.blurYFilter.blur; 63 | }, 64 | set: function(value) { 65 | this.blurYFilter.blur = value; 66 | } 67 | }); 68 | -------------------------------------------------------------------------------- /src/pixi/filters/BlurXFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.BlurXFilter = function() 6 | { 7 | PIXI.AbstractFilter.call( this ); 8 | 9 | this.passes = [this]; 10 | 11 | // set the uniforms 12 | this.uniforms = { 13 | blur: {type: '1f', value: 1/512}, 14 | }; 15 | 16 | this.fragmentSrc = [ 17 | 'precision mediump float;', 18 | 'varying vec2 vTextureCoord;', 19 | 'varying vec4 vColor;', 20 | 'uniform float blur;', 21 | 'uniform sampler2D uSampler;', 22 | 23 | 'void main(void) {', 24 | ' vec4 sum = vec4(0.0);', 25 | 26 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', 27 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', 28 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', 29 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', 30 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', 31 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', 32 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', 33 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', 34 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', 35 | 36 | ' gl_FragColor = sum;', 37 | '}' 38 | ]; 39 | }; 40 | 41 | PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 42 | PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; 43 | 44 | Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { 45 | get: function() { 46 | return this.uniforms.blur.value / (1/7000); 47 | }, 48 | set: function(value) { 49 | 50 | this.dirty = true; 51 | this.uniforms.blur.value = (1/7000) * value; 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /src/pixi/filters/BlurYFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.BlurYFilter = function() 6 | { 7 | PIXI.AbstractFilter.call( this ); 8 | 9 | this.passes = [this]; 10 | 11 | // set the uniforms 12 | this.uniforms = { 13 | blur: {type: '1f', value: 1/512}, 14 | }; 15 | 16 | this.fragmentSrc = [ 17 | 'precision mediump float;', 18 | 'varying vec2 vTextureCoord;', 19 | 'varying vec4 vColor;', 20 | 'uniform float blur;', 21 | 'uniform sampler2D uSampler;', 22 | 23 | 'void main(void) {', 24 | ' vec4 sum = vec4(0.0);', 25 | 26 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', 27 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', 28 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', 29 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', 30 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', 31 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', 32 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', 33 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', 34 | ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', 35 | 36 | ' gl_FragColor = sum;', 37 | '}' 38 | ]; 39 | }; 40 | 41 | PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 42 | PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; 43 | 44 | Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', { 45 | get: function() { 46 | return this.uniforms.blur.value / (1/7000); 47 | }, 48 | set: function(value) { 49 | //this.padding = value; 50 | this.uniforms.blur.value = (1/7000) * value; 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /src/pixi/filters/ColorMatrixFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA 8 | * color and alpha values of every pixel on your displayObject to produce a result 9 | * with a new set of RGBA color and alpha values. Its pretty powerful! 10 | * @class ColorMatrixFilter 11 | * @contructor 12 | */ 13 | PIXI.ColorMatrixFilter = function() 14 | { 15 | PIXI.AbstractFilter.call( this ); 16 | 17 | this.passes = [this]; 18 | 19 | // set the uniforms 20 | this.uniforms = { 21 | matrix: {type: 'mat4', value: [1,0,0,0, 22 | 0,1,0,0, 23 | 0,0,1,0, 24 | 0,0,0,1]}, 25 | }; 26 | 27 | this.fragmentSrc = [ 28 | 'precision mediump float;', 29 | 'varying vec2 vTextureCoord;', 30 | 'varying vec4 vColor;', 31 | 'uniform float invert;', 32 | 'uniform mat4 matrix;', 33 | 'uniform sampler2D uSampler;', 34 | 35 | 'void main(void) {', 36 | ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', 37 | // ' gl_FragColor = gl_FragColor;', 38 | '}' 39 | ]; 40 | }; 41 | 42 | PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 43 | PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; 44 | 45 | /** 46 | * Sets the matrix of the color matrix filter 47 | * 48 | * @property matrix 49 | * @type Array and array of 26 numbers 50 | * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] 51 | */ 52 | Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', { 53 | get: function() { 54 | return this.uniforms.matrix.value; 55 | }, 56 | set: function(value) { 57 | this.uniforms.matrix.value = value; 58 | } 59 | }); -------------------------------------------------------------------------------- /src/pixi/filters/ColorStepFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This lowers the color depth of your image by the given amount, producing an image with a smaller palette. 8 | * @class ColorStepFilter 9 | * @contructor 10 | */ 11 | PIXI.ColorStepFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | step: {type: '1f', value: 5}, 20 | }; 21 | 22 | this.fragmentSrc = [ 23 | 'precision mediump float;', 24 | 'varying vec2 vTextureCoord;', 25 | 'varying vec4 vColor;', 26 | 'uniform sampler2D uSampler;', 27 | 'uniform float step;', 28 | 29 | 'void main(void) {', 30 | ' vec4 color = texture2D(uSampler, vTextureCoord);', 31 | ' color = floor(color * step) / step;', 32 | ' gl_FragColor = color;', 33 | '}' 34 | ]; 35 | }; 36 | 37 | PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 38 | PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; 39 | 40 | /** 41 | The number of steps. 42 | @property step 43 | */ 44 | Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', { 45 | get: function() { 46 | return this.uniforms.step.value; 47 | }, 48 | set: function(value) { 49 | this.uniforms.step.value = value; 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /src/pixi/filters/CrossHatchFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.CrossHatchFilter = function() 6 | { 7 | PIXI.AbstractFilter.call( this ); 8 | 9 | this.passes = [this]; 10 | 11 | // set the uniforms 12 | this.uniforms = { 13 | blur: {type: '1f', value: 1 / 512}, 14 | }; 15 | 16 | this.fragmentSrc = [ 17 | 'precision mediump float;', 18 | 'varying vec2 vTextureCoord;', 19 | 'varying vec4 vColor;', 20 | 'uniform float blur;', 21 | 'uniform sampler2D uSampler;', 22 | 23 | 'void main(void) {', 24 | ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', 25 | 26 | ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', 27 | 28 | ' if (lum < 1.00) {', 29 | ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', 30 | ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', 31 | ' }', 32 | ' }', 33 | 34 | ' if (lum < 0.75) {', 35 | ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', 36 | ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', 37 | ' }', 38 | ' }', 39 | 40 | ' if (lum < 0.50) {', 41 | ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', 42 | ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', 43 | ' }', 44 | ' }', 45 | 46 | ' if (lum < 0.3) {', 47 | ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', 48 | ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', 49 | ' }', 50 | ' }', 51 | '}' 52 | ]; 53 | }; 54 | 55 | PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 56 | PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; 57 | 58 | Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', { 59 | get: function() { 60 | return this.uniforms.blur.value / (1/7000); 61 | }, 62 | set: function(value) { 63 | //this.padding = value; 64 | this.uniforms.blur.value = (1/7000) * value; 65 | } 66 | }); 67 | -------------------------------------------------------------------------------- /src/pixi/filters/DotScreenFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js 4 | */ 5 | 6 | /** 7 | * 8 | * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer 9 | * @class DotScreenFilter 10 | * @contructor 11 | */ 12 | PIXI.DotScreenFilter = function() 13 | { 14 | PIXI.AbstractFilter.call( this ); 15 | 16 | this.passes = [this]; 17 | 18 | // set the uniforms 19 | this.uniforms = { 20 | scale: {type: '1f', value:1}, 21 | angle: {type: '1f', value:5}, 22 | dimensions: {type: '4fv', value:[0,0,0,0]} 23 | }; 24 | 25 | this.fragmentSrc = [ 26 | 'precision mediump float;', 27 | 'varying vec2 vTextureCoord;', 28 | 'varying vec4 vColor;', 29 | 'uniform vec4 dimensions;', 30 | 'uniform sampler2D uSampler;', 31 | 32 | 'uniform float angle;', 33 | 'uniform float scale;', 34 | 35 | 'float pattern() {', 36 | ' float s = sin(angle), c = cos(angle);', 37 | ' vec2 tex = vTextureCoord * dimensions.xy;', 38 | ' vec2 point = vec2(', 39 | ' c * tex.x - s * tex.y,', 40 | ' s * tex.x + c * tex.y', 41 | ' ) * scale;', 42 | ' return (sin(point.x) * sin(point.y)) * 4.0;', 43 | '}', 44 | 45 | 'void main() {', 46 | ' vec4 color = texture2D(uSampler, vTextureCoord);', 47 | ' float average = (color.r + color.g + color.b) / 3.0;', 48 | ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', 49 | '}' 50 | ]; 51 | }; 52 | 53 | PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); 54 | PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; 55 | 56 | /** 57 | * 58 | * This describes the the scale 59 | * @property scale 60 | * @type Number 61 | */ 62 | Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', { 63 | get: function() { 64 | return this.uniforms.scale.value; 65 | }, 66 | set: function(value) { 67 | this.dirty = true; 68 | this.uniforms.scale.value = value; 69 | } 70 | }); 71 | 72 | /** 73 | * 74 | * This radius describes angle 75 | * @property angle 76 | * @type Number 77 | */ 78 | Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', { 79 | get: function() { 80 | return this.uniforms.angle.value; 81 | }, 82 | set: function(value) { 83 | this.dirty = true; 84 | this.uniforms.angle.value = value; 85 | } 86 | }); -------------------------------------------------------------------------------- /src/pixi/filters/FilterBlock.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | 6 | PIXI.FilterBlock = function() 7 | { 8 | this.visible = true; 9 | this.renderable = true; 10 | }; 11 | -------------------------------------------------------------------------------- /src/pixi/filters/GrayFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This turns your displayObjects to black and white. 8 | * @class GrayFilter 9 | * @contructor 10 | */ 11 | PIXI.GrayFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | gray: {type: '1f', value: 1}, 20 | }; 21 | 22 | this.fragmentSrc = [ 23 | 'precision mediump float;', 24 | 'varying vec2 vTextureCoord;', 25 | 'varying vec4 vColor;', 26 | 'uniform sampler2D uSampler;', 27 | 'uniform float gray;', 28 | 29 | 'void main(void) {', 30 | ' gl_FragColor = texture2D(uSampler, vTextureCoord);', 31 | ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', 32 | // ' gl_FragColor = gl_FragColor;', 33 | '}' 34 | ]; 35 | }; 36 | 37 | PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 38 | PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; 39 | 40 | /** 41 | The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color 42 | @property gray 43 | */ 44 | Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', { 45 | get: function() { 46 | return this.uniforms.gray.value; 47 | }, 48 | set: function(value) { 49 | this.uniforms.gray.value = value; 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /src/pixi/filters/InvertFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This inverts your displayObjects colors. 8 | * @class InvertFilter 9 | * @contructor 10 | */ 11 | PIXI.InvertFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | invert: {type: '1f', value: 1}, 20 | }; 21 | 22 | this.fragmentSrc = [ 23 | 'precision mediump float;', 24 | 'varying vec2 vTextureCoord;', 25 | 'varying vec4 vColor;', 26 | 'uniform float invert;', 27 | 'uniform sampler2D uSampler;', 28 | 29 | 'void main(void) {', 30 | ' gl_FragColor = texture2D(uSampler, vTextureCoord);', 31 | ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', 32 | //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', 33 | // ' gl_FragColor = gl_FragColor * vColor;', 34 | '}' 35 | ]; 36 | }; 37 | 38 | PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 39 | PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; 40 | 41 | /** 42 | The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color 43 | @property invert 44 | */ 45 | Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', { 46 | get: function() { 47 | return this.uniforms.invert.value; 48 | }, 49 | set: function(value) { 50 | this.uniforms.invert.value = value; 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /src/pixi/filters/PixelateFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This filter applies a pixelate effect making display objects appear 'blocky' 8 | * @class PixelateFilter 9 | * @contructor 10 | */ 11 | PIXI.PixelateFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | invert: {type: '1f', value: 0}, 20 | dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, 21 | pixelSize: {type: '2f', value:{x:10, y:10}}, 22 | }; 23 | 24 | this.fragmentSrc = [ 25 | 'precision mediump float;', 26 | 'varying vec2 vTextureCoord;', 27 | 'varying vec4 vColor;', 28 | 'uniform vec2 testDim;', 29 | 'uniform vec4 dimensions;', 30 | 'uniform vec2 pixelSize;', 31 | 'uniform sampler2D uSampler;', 32 | 33 | 'void main(void) {', 34 | ' vec2 coord = vTextureCoord;', 35 | 36 | ' vec2 size = dimensions.xy/pixelSize;', 37 | 38 | ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', 39 | ' gl_FragColor = texture2D(uSampler, color);', 40 | '}' 41 | ]; 42 | }; 43 | 44 | PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 45 | PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; 46 | 47 | /** 48 | * 49 | * This a point that describes the size of the blocs. x is the width of the block and y is the the height 50 | * @property size 51 | * @type Point 52 | */ 53 | Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', { 54 | get: function() { 55 | return this.uniforms.pixelSize.value; 56 | }, 57 | set: function(value) { 58 | this.dirty = true; 59 | this.uniforms.pixelSize.value = value; 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /src/pixi/filters/RGBSplitFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.RGBSplitFilter = function() 6 | { 7 | PIXI.AbstractFilter.call( this ); 8 | 9 | this.passes = [this]; 10 | 11 | // set the uniforms 12 | this.uniforms = { 13 | red: {type: '2f', value: {x:20, y:20}}, 14 | green: {type: '2f', value: {x:-20, y:20}}, 15 | blue: {type: '2f', value: {x:20, y:-20}}, 16 | dimensions: {type: '4fv', value:[0,0,0,0]} 17 | }; 18 | 19 | this.fragmentSrc = [ 20 | 'precision mediump float;', 21 | 'varying vec2 vTextureCoord;', 22 | 'varying vec4 vColor;', 23 | 'uniform vec2 red;', 24 | 'uniform vec2 green;', 25 | 'uniform vec2 blue;', 26 | 'uniform vec4 dimensions;', 27 | 'uniform sampler2D uSampler;', 28 | 29 | 'void main(void) {', 30 | ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', 31 | ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', 32 | ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', 33 | ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', 34 | '}' 35 | ]; 36 | }; 37 | 38 | PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 39 | PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; 40 | 41 | Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', { 42 | get: function() { 43 | return this.uniforms.blur.value / (1/7000); 44 | }, 45 | set: function(value) { 46 | //this.padding = value; 47 | this.uniforms.blur.value = (1/7000) * value; 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /src/pixi/filters/SepiaFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This applies a sepia effect to your displayObjects. 8 | * @class SepiaFilter 9 | * @contructor 10 | */ 11 | PIXI.SepiaFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | sepia: {type: '1f', value: 1}, 20 | }; 21 | 22 | this.fragmentSrc = [ 23 | 'precision mediump float;', 24 | 'varying vec2 vTextureCoord;', 25 | 'varying vec4 vColor;', 26 | 'uniform float sepia;', 27 | 'uniform sampler2D uSampler;', 28 | 29 | 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', 30 | 31 | 'void main(void) {', 32 | ' gl_FragColor = texture2D(uSampler, vTextureCoord);', 33 | ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', 34 | // ' gl_FragColor = gl_FragColor * vColor;', 35 | '}' 36 | ]; 37 | }; 38 | 39 | PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 40 | PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; 41 | 42 | /** 43 | The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color 44 | @property sepia 45 | */ 46 | Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', { 47 | get: function() { 48 | return this.uniforms.sepia.value; 49 | }, 50 | set: function(value) { 51 | this.uniforms.sepia.value = value; 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /src/pixi/filters/SmartBlurFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | PIXI.SmartBlurFilter = function() 6 | { 7 | PIXI.AbstractFilter.call( this ); 8 | 9 | this.passes = [this]; 10 | 11 | // set the uniforms 12 | this.uniforms = { 13 | blur: {type: '1f', value: 1/512}, 14 | }; 15 | 16 | this.fragmentSrc = [ 17 | 'precision mediump float;', 18 | 'varying vec2 vTextureCoord;', 19 | 'uniform sampler2D uSampler;', 20 | //'uniform vec2 delta;', 21 | 'const vec2 delta = vec2(1.0/10.0, 0.0);', 22 | //'uniform float darkness;', 23 | 24 | 'float random(vec3 scale, float seed) {', 25 | ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', 26 | '}', 27 | 28 | 29 | 'void main(void) {', 30 | ' vec4 color = vec4(0.0);', 31 | ' float total = 0.0;', 32 | 33 | ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', 34 | 35 | ' for (float t = -30.0; t <= 30.0; t++) {', 36 | ' float percent = (t + offset - 0.5) / 30.0;', 37 | ' float weight = 1.0 - abs(percent);', 38 | ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', 39 | ' sample.rgb *= sample.a;', 40 | ' color += sample * weight;', 41 | ' total += weight;', 42 | ' }', 43 | 44 | ' gl_FragColor = color / total;', 45 | ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', 46 | //' gl_FragColor.rgb *= darkness;', 47 | '}' 48 | ]; 49 | }; 50 | 51 | PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 52 | PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; 53 | 54 | Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', { 55 | get: function() { 56 | return this.uniforms.blur.value; 57 | }, 58 | set: function(value) { 59 | this.uniforms.blur.value = value; 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /src/pixi/filters/TwistFilter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * 7 | * This filter applies a twist effect making display objects appear twisted in the given direction 8 | * @class TwistFilter 9 | * @contructor 10 | */ 11 | PIXI.TwistFilter = function() 12 | { 13 | PIXI.AbstractFilter.call( this ); 14 | 15 | this.passes = [this]; 16 | 17 | // set the uniforms 18 | this.uniforms = { 19 | radius: {type: '1f', value:0.5}, 20 | angle: {type: '1f', value:5}, 21 | offset: {type: '2f', value:{x:0.5, y:0.5}}, 22 | }; 23 | 24 | this.fragmentSrc = [ 25 | 'precision mediump float;', 26 | 'varying vec2 vTextureCoord;', 27 | 'varying vec4 vColor;', 28 | 'uniform vec4 dimensions;', 29 | 'uniform sampler2D uSampler;', 30 | 31 | 'uniform float radius;', 32 | 'uniform float angle;', 33 | 'uniform vec2 offset;', 34 | 35 | 'void main(void) {', 36 | ' vec2 coord = vTextureCoord - offset;', 37 | ' float distance = length(coord);', 38 | 39 | ' if (distance < radius) {', 40 | ' float ratio = (radius - distance) / radius;', 41 | ' float angleMod = ratio * ratio * angle;', 42 | ' float s = sin(angleMod);', 43 | ' float c = cos(angleMod);', 44 | ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', 45 | ' }', 46 | 47 | ' gl_FragColor = texture2D(uSampler, coord+offset);', 48 | '}' 49 | ]; 50 | }; 51 | 52 | PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); 53 | PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; 54 | 55 | /** 56 | * 57 | * This point describes the the offset of the twist 58 | * @property size 59 | * @type Point 60 | */ 61 | Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', { 62 | get: function() { 63 | return this.uniforms.offset.value; 64 | }, 65 | set: function(value) { 66 | this.dirty = true; 67 | this.uniforms.offset.value = value; 68 | } 69 | }); 70 | 71 | /** 72 | * 73 | * This radius describes size of the twist 74 | * @property size 75 | * @type Number 76 | */ 77 | Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', { 78 | get: function() { 79 | return this.uniforms.radius.value; 80 | }, 81 | set: function(value) { 82 | this.dirty = true; 83 | this.uniforms.radius.value = value; 84 | } 85 | }); 86 | 87 | /** 88 | * 89 | * This radius describes angle of the twist 90 | * @property angle 91 | * @type Number 92 | */ 93 | Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', { 94 | get: function() { 95 | return this.uniforms.angle.value; 96 | }, 97 | set: function(value) { 98 | this.dirty = true; 99 | this.uniforms.angle.value = value; 100 | } 101 | }); -------------------------------------------------------------------------------- /src/pixi/loaders/ImageLoader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Mat Groves http://matgroves.com/ @Doormat23 3 | */ 4 | 5 | /** 6 | * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') 7 | * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() 8 | * When loaded this class will dispatch a 'loaded' event 9 | * 10 | * @class ImageLoader 11 | * @uses EventTarget 12 | * @constructor 13 | * @param url {String} The url of the image 14 | * @param crossorigin {Boolean} Whether requests should be treated as crossorigin 15 | */ 16 | PIXI.ImageLoader = function(url, crossorigin) 17 | { 18 | PIXI.EventTarget.call(this); 19 | 20 | /** 21 | * The texture being loaded 22 | * 23 | * @property texture 24 | * @type Texture 25 | */ 26 | this.texture = PIXI.Texture.fromImage(url, crossorigin); 27 | 28 | /** 29 | * if the image is loaded with loadFramedSpriteSheet 30 | * frames will contain the sprite sheet frames 31 | * 32 | */ 33 | this.frames = []; 34 | }; 35 | 36 | // constructor 37 | PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; 38 | 39 | /** 40 | * Loads image or takes it from cache 41 | * 42 | * @method load 43 | */ 44 | PIXI.ImageLoader.prototype.load = function() 45 | { 46 | if(!this.texture.baseTexture.hasLoaded) 47 | { 48 | var scope = this; 49 | this.texture.baseTexture.addEventListener('loaded', function() 50 | { 51 | scope.onLoaded(); 52 | }); 53 | } 54 | else 55 | { 56 | this.onLoaded(); 57 | } 58 | }; 59 | 60 | /** 61 | * Invoked when image file is loaded or it is already cached and ready to use 62 | * 63 | * @method onLoaded 64 | * @private 65 | */ 66 | PIXI.ImageLoader.prototype.onLoaded = function() 67 | { 68 | this.dispatchEvent({type: 'loaded', content: this}); 69 | }; 70 | 71 | /** 72 | * Loads image and split it to uniform sized frames 73 | * 74 | * 75 | * @method loadFramedSpriteSheet 76 | * @param frameWidth {Number} width of each frame 77 | * @param frameHeight {Number} height of each frame 78 | * @param textureName {String} if given, the frames will be cached in - format 79 | */ 80 | PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) 81 | { 82 | this.frames = []; 83 | var cols = Math.floor(this.texture.width / frameWidth); 84 | var rows = Math.floor(this.texture.height / frameHeight); 85 | 86 | var i=0; 87 | for (var y=0; y