@@ -8,7 +8,7 @@ Pixi.js — A 2D JavaScript Renderer
88## Pixi.js ##
99
1010[ ![ Inline docs] ( http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev )] ( http://inch-ci.org/github/GoodBoyDigital/pixi.js )
11- [ ![ Build Status] ( https://travis-ci.org/GoodBoyDigital /pixi.js.svg?branch=dev )] ( https://travis-ci.org/GoodBoyDigital /pixi.js )
11+ [ ![ Build Status] ( https://travis-ci.org/pixijs /pixi.js.svg?branch=dev )] ( https://travis-ci.org/pixijs /pixi.js )
1212
1313The aim of this project is to provide a fast lightweight 2D library that works
1414across all devices. The Pixi renderer allows everyone to enjoy the power of
@@ -19,6 +19,8 @@ If you want to keep up to date with the latest pixi.js news then feel free to fo
1919and we will keep you posted! You can also check back on [ our site] ( http://www.goodboydigital.com/blog )
2020as any breakthroughs will be posted up there too!
2121
22+ ** Your support helps us make Pixi.js even better. Make your pledge on [ Patreon] ( https://www.patreon.com/user?u=2384552&ty=h&u=2384552 ) and we'll love you forever!**
23+
2224### Demos ###
2325
2426- [ WebGL Filters!] ( http://www.goodboydigital.com/pixijs/examples/15/indexAll.html )
@@ -43,21 +45,84 @@ those last 2 examples and allowing us to share the source code :)
4345- API Documentation is [ here] ( http://pixijs.github.io/docs ) .
4446- Feature Examples are [ here] ( https://pixijs.github.io/examples ) .
4547- The Pixi.js Forum is [ here] ( http://www.html5gamedevs.com/forum/15-pixijs ) .
46- - Other misc tutorials and resources are [ on the Wiki] ( https://github.com/GoodBoyDigital /pixi.js/wiki/Resources ) .
48+ - Other misc tutorials and resources are [ on the Wiki] ( https://github.com/pixijs /pixi.js/wiki/Resources ) .
4749
4850### Contribute ###
4951
5052Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker
5153together :) Whether you find a bug, have a great feature request or you fancy owning a task
5254from the road map above feel free to get in touch.
5355
54- Make sure to read the [ Contributing Guide] ( https://github.com/GoodBoyDigital /pixi.js/blob/master/CONTRIBUTING.md )
56+ Make sure to read the [ Contributing Guide] ( https://github.com/pixijs /pixi.js/blob/master/CONTRIBUTING.md )
5557before submitting changes.
5658
57- ## How to build ##
59+ ### Current features ###
60+
61+ - WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
62+ - Canvas renderer (Fastest in town!)
63+ - Full scene graph
64+ - Super easy to use API (similar to the flash display list API)
65+ - Support for texture atlases
66+ - Asset loader / sprite sheet loader
67+ - Auto-detect which renderer should be used
68+ - Full Mouse and Multi-touch Interaction
69+ - Text
70+ - BitmapFont text
71+ - Multiline Text
72+ - Render Texture
73+ - Primitive Drawing
74+ - Masking
75+ - Filters
76+ - [ User Plugins] ( https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins )
77+
78+ ### Basic Usage Example ###
79+
80+ ``` js
81+ // You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer`
82+ // which will try to choose the best renderer for the environment you are in.
83+ var renderer = new PIXI.WebGLRenderer (800 , 600 );
84+
85+ // The renderer will create a canvas element for you that you can then insert into the DOM.
86+ document .body .appendChild (renderer .view );
87+
88+ // You need to create a root container that will hold the scene you want to draw.
89+ var stage = new PIXI.Container ();
90+
91+ // load the texture we need
92+ PIXI .loader .add (' bunny' , ' bunny.png' ).load (function (loader , resources ) {
93+ // This creates a texture from a 'bunny.png' image.
94+ var bunny = new PIXI.Sprite (resources .bunny .texture );
95+
96+ // Setup the position and scale of the bunny
97+ bunny .position .x = 400 ;
98+ bunny .position .y = 300 ;
99+
100+ bunny .scale .x = 2 ;
101+ bunny .scale .y = 2 ;
102+
103+ // Add the bunny to the scene we are building.
104+ stage .addChild (bunny);
105+
106+ // kick off the animation loop (defined below)
107+ animate ();
108+ });
109+
110+ function animate () {
111+ // start the timer for the next animation loop
112+ requestAnimationFrame (animate);
113+
114+ // each frame we spin the bunny around a bit
115+ bunny .rotation += 0.01 ;
116+
117+ // this is the main render call that makes pixi draw your container and its children.
118+ renderer .render (stage);
119+ }
120+ ```
121+
122+ ### How to build ###
58123
59124Note that for most users you don't need to build this project. If all you want is to use pixi, then
60- just download one of our [ prebuilt releases] ( https://github.com/GoodBoyDigital /pixi.js/releases ) . Really
125+ just download one of our [ prebuilt releases] ( https://github.com/pixijs /pixi.js/releases ) . Really
61126the only time you should need to build pixi.js is if you are developing it.
62127
63128If you don't already have Node.js and NPM, go install them. Once you do, you can then install the gulp
@@ -82,16 +147,16 @@ $> gulp build
82147This will create a minified version at ` bin/pixi.min.js ` and a non-minified version at ` bin/pixi.js `
83148with all the plugins in the pixi.js project.
84149
85- If there are specific plugins you don't want, say "spine " or "interaction ", you can exclude those:
150+ If there are specific plugins you don't want, say "interaction " or "extras ", you can exclude those:
86151
87152```
88- $> gulp build --exclude spine --exclude interaction
153+ $> gulp build --exclude extras --exclude interaction
89154```
90155
91156You can also use the short-form ` -e ` :
92157
93158```
94- $> gulp build -e extras -e spine -e interaction -e filters
159+ $> gulp build -e extras -e interaction -e filters
95160```
96161
97162### How to generate the documentation ###
@@ -109,68 +174,7 @@ $> gulp jsdoc
109174```
110175
111176The documentation uses [ Jaguar.js] ( https://github.com/davidshimjs/jaguarjs-jsdoc ) and the jsdoc format, the configuration
112- file can be found at [ gulp/utils/jsdoc.conf.json] ( https://github.com/GoodBoyDigital/pixi.js/blob/dev/gulp/util/jsdoc.conf.json )
113-
114- ### Current features ###
115-
116- - WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
117- - Canvas renderer (Fastest in town!)
118- - Full scene graph
119- - Super easy to use API (similar to the flash display list API)
120- - Support for texture atlases
121- - Asset loader / sprite sheet loader
122- - Auto-detect which renderer should be used
123- - Full Mouse and Multi-touch Interaction
124- - Text
125- - BitmapFont text
126- - Multiline Text
127- - Render Texture
128- - Spine support
129- - Primitive Drawing
130- - Masking
131- - Filters
132-
133- ### Basic Usage Example ###
134-
135- ``` js
136- // You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer`
137- // which will try to choose the best renderer for the environment you are in.
138- var renderer = new PIXI.WebGLRenderer (800 , 600 );
139-
140- // The renderer will create a canvas element for you that you can then insert into the DOM.
141- document .body .appendChild (renderer .view );
142-
143- // You need to create a root container that will hold the scene you want to draw.
144- var stage = new PIXI.Container ();
145-
146- // This creates a texture from a 'bunny.png' image.
147- var bunnyTexture = PIXI .Texture .fromImage (' bunny.png' );
148- var bunny = new PIXI.Sprite (bunnyTexture);
149-
150- // Setup the position and scale of the bunny
151- bunny .position .x = 400 ;
152- bunny .position .y = 300 ;
153-
154- bunny .scale .x = 2 ;
155- bunny .scale .y = 2 ;
156-
157- // Add the bunny to the scene we are building.
158- stage .addChild (bunny);
159-
160- // kick off the animation loop (defined below)
161- animate ();
162-
163- function animate () {
164- // start the timer for the next animation loop
165- requestAnimationFrame (animate);
166-
167- // each frame we spin the bunny around a bit
168- bunny .rotation += 0.01 ;
169-
170- // this is the main render call that makes pixi draw your container and its children.
171- renderer .render (stage);
172- }
173- ```
177+ file can be found at [ gulp/utils/jsdoc.conf.json] ( https://github.com/pixijs/pixi.js/blob/dev/gulp/util/jsdoc.conf.json )
174178
175179### License ###
176180
0 commit comments