Pixijs Use Tutorial--Basic article

Pixi.js uses WebGL and is an ultra-fast HTML5 2D rendering engine. As a JavaScript 2D renderer, Pixi.js's goal is to provide a fast, lightweight, and all-in-one 2D library. Provides seamless Canvas fallback to support mainstream browsers, including desktop and mobile. The Pixi renderer allows developers to enjoy hardware acceleration, but does not need to understand WEBGL.

Online Demo

Pixi.js's GitHub homepage lists a number of online demos.

github:https://github.com/goodboydigital/pixi.js/

Official website: http://www.pixijs.com/

api:http://www.goodboydigital.com/pixijs/docs/

Official Tutorial: http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

Https://github.com/GoodBoyDigital/pixi.js packed and downloaded, unzip, there are 23 examples of applications in example.

It is necessary to note that some examples require HTTP to be browsed, which means that some resources cannot be displayed in the file://way.

=========================================================================

Creating an instance of Pixi and showing it usually takes six steps
1: Create a stage
2: Create a canvas
3: Insert the canvas into the DOM
4: Create an Elf
5: Adding sprites to the canvas
6: Add the canvas to the stage

noun explanation
Stage:
A Stage represents the root of the display tree.
Everything connected to the stage is rendered
All objects to be rendered must be connected to the stage in order to be displayed.
The stage is at the bottom of the entire tree-shaped display structure and can be understood as a background
Demo:
var stage = new PIXI. Stage (0xFFFFFF);
//
Canvas (renderer):
A region that is rendered using canvas or WebGL
Demo
var renderer = Pixi.autodetectrenderer (400, 300);
//
Texture (texture):
Can be understood as a structure of a packaging picture, which itself cannot be directly used to display
Can be used by sprites to display
Demo
var texture = PIXI. Texture.fromimage ("Bunny.png");
//
Genie (Sprite):
Objects that can be used directly for stage display can be understood as element in the DOM.
Sprites can be created directly with images
You can also create a sprite by creating a texture and then creating a texture
Demo:
1:var sprite = new PIXI. Sprite.fromimage (' assets/image.png ');
2:var texture = PIXI. Texture.fromimage ("Bunny.png");
var sprite = new PIXI. Sprite (texture);

sprite.position.x = 30; No units

SPRITE.POSITION.Y = 20; This is the same as setting the style for element.

For action on Sprites, refer to the official example
//
Events (Event):
The Pixi library provides events for interaction in sprites and on the stage.
Demo
Stage.click = function (data) {
var event = Data.originalevent
//
// }
Sprite.click = function (data) {
var event = Data.originalevent
var target = Event.target
Block default behavior, Sprite.buttonmode = false;
Event.preventdefault ();
//
// }
//
In addition, there are. Mousedown,.mouseover,.mouseout,
. Mousemove,.mouseup,. Mouseupoutside,
. Touchstart,.touchend,.tap
//
It is important to note that for sprites with events, it is usually necessary to set sprite.interactive = True
For the sprite to be used as a button, you need to set Sprite.buttonmode = true;
Unlike DOM events, events in sprites are encapsulated two times,
It is often necessary to use the var event = Data.originalevent to hold one to the event object in the normal DOM
But not exactly the same, such as data.originalEvent.stopPropagation () will not work.

On Stoppropagation's question, I asked the developer of Pixijs, who replied that Stoppropagation is a concept in the DOM, and that there is no such thing as Pixi in WebGL.
The following is a simple example of displaying a picture using the Pixi library:
//
/**
var stage = new PIXI. Stage ();
var renderer = Pixi.autodetectrenderer (400, 300);

Document.body.appendChild (Renderer.view);
var sprite = new PIXI. Sprite.fromimage (' bunny.png ');
Stage.addchild (sprite);

*/
//
Directly post the code above, on the Web page can only see the dark background and not see the picture
This is because the wizard is created asynchronously and must wait for the image to be loaded before the sprite can be added to the stage.
//
There are two ways to resolve this:
The 1th type is to constantly refresh the stage.
Such as:
Requestanimframe (animate);
function animate () {
Renderer.render (stage);
Requestanimframe (animate);
// }
The 2nd type is executed in the callback where the picture is loaded. This is limited to sprites that do not require duplicate refreshes,
Such as:
Sprite.texture.baseTexture.on (' Loaded ', function () {
Renderer.render (stage);
// })
//

There are two problems with basetexture-based loaded events when practicing in the project
1: What if the picture fails to load?
2: When loading multiple images at the same time, some do not trigger loaded callback
//
Through practice, find a more secure way
var img = new Image ();
IMG.SRC = ' bunny.png ';
Img.onload = function () {
var basetexture = new PIXI. BaseTexture (this);
var texture = new PIXI. Texture (BaseTexture);
var sprite = new PIXI. Sprite (texture);
Stage.addchild (sprite);
Renderer.render (stage);
// }

The practical proof is also applicable when loading pictures in bulk.

Finally, please go through the localhost://xxxxxx way

Careful comparison perhaps you will find that I and the official sample is not the same, the official use of requestanimframe( animate ), and I do not use it here, why? Because I just want to show a picture, there is no need to constantly refresh the stage. requestanimframe( animate ); This is only needed when sprites are animated. Of course, if performance is not considered, there is no problem with the constant refresh of a static graph.

A complete example:

varstage =NewPIXI. Stage (0xFFFFFF); varRenderer = Pixi.autodetectrenderer (400, 300);        Document.body.appendChild (Renderer.view); varSprite =NewPIXI. Sprite.fromimage (' Bunny.png ');        Stage.addchild (sprite); Sprite.texture.baseTexture.on (' Loaded ',function() {renderer.render (stage); }) sprite.interactive=trueStage.click= Stage.tap =function(data) {Console.log (data.originalEvent.target); //alert (' You hit the stage ')} sprite.mousedown= Sprite.touchstart =function(data) {//Stop the default event ...Data.originalEvent.preventDefault ();  This. data =data;  This. Alpha = 0.9;  This. dragging =true; Console.log (' MouseDown '); } sprite.mouseup= Sprite.mouseupoutside = Sprite.touchend =function(data) { This. Alpha = 1 This. dragging =false; //set the interaction data to null             This. data =NULL; Console.log (' MouseUp ');        }; Sprite.mousemove= Sprite.touchmove =function(data) {if( This. Dragging) {                varNewposition = This. Data.getlocalposition ( This. Parent);  This. position.x =newposition.x;  This. POSITION.Y =NEWPOSITION.Y; Console.log (' MouseMove ') Renderer.render (stage); }        }        //Requestanimframe (animate);        functionAnimate () {Renderer.render (stage);           Requestanimframe (animate); }

The above is created by Pixi to create a still sprite, and event bonding. This does not find an example in the official, special supplement. (maybe Pixi was born for animation, so this is not a simple need to consider)

If you need an animated Sprite, there are a number of ways that the official offers. There is no longer a detailed statement. I am currently studying this piece, interested can communicate with me!

Pixijs Use Tutorial--Basic article