Home > Article > Web Front-end > A preliminary study on pixi framework in Javascript
Create an area that can play animation, equivalent to (canvas
).
//v4.4.2之前的旧写法 //创建 var renderer = PIXI.autoDetectRenderer(w, h, { backgroundColor: 0x1099bb, transparent: true //背景是否设为透明 }); document.body.appendChild(renderer.view); //舞台添加显示对象sprite及每次渲染的监听函数 var stage = new PIXI.Container(); stage.addChild(sprite); animate(); function animate() { renderer.render(stage); requestAnimationFrame(animate); } //v4.4.2之后的新写法 //创建 var app = new PIXI.Application(w, h, { backgroundColor: 0x1099bb, transparent: false //背景是否设为透明 }); //添加显示对象sprite及每次渲染的监听函数 app.stage.addChild(sprite); app.ticker.add(function(delta) {}); document.body.appendChild(app.view);
In addition to the autoDetectRenderer interface, there are also CanvasRenderer and WebGLRenderer interfaces.
autoDetectRenderer can automatically create WebGL or Canvas renderer based on the client's support for WebGL.
The stage is equivalent to a container (Container
). After adding elements, the renderer (renderer
) renders the stage. Equivalent to a top-level container.
There is a Container()
class in pixi.js
. This class is a container.
var stage = new PIXI.Container(); 添加舞台之后可以由渲染器(renderer)渲染。 renderer.render(stage); // 舞台(stage)搭建完成后渲染出来。。 ***最后
The most important element in animation is a picture (material). This type of special picture object is called a sprite (in pixi.js
sprite
),
By controlling the size, position and some other attributes of sprite
, the animation effect can be achieved.
There is a sprite
class in pixi
, which can create a sprite
based on external pictures (materials) that can be used in pixi
##sprite
There are three ways to create:
From the entire Material image creation, intercept certain parts according to different positions and sizes on the material to create
sprite
The material set is a json file defines the position and size of the image in a certain material image, etc. The advantage of this is that you don’t have to define the position and size every time you create a sprite. On the other hand, you don’t need to modify the code when you modify the material image. .
There is a loader
class in pixi
to manage images Load, and call the callback function after the loading is completed.
PIXI.loader .add("images/treasureHunter.json") .load(setup);
After completing the image loading, PIXI.loader
will automatically call the setup
function for the next step of processing. Let's first define
a test method to see if it is as expected.
function setup() { console.log("加载完成."); } // 测试可以的话就可以,删除setup里面的东西,然后完善舞台。
Games generally create two scenes, one is used to display the normal game screen (gameScene), and the other is used to display the game results (gameOverScene).
var gameScene; function setup() { gameScene = new PIXI.Container(); }
To add all the materials in the container and create the corresponding sprite
, how to add them? The loaded materials can be accessed through PIXI.loader.resources
.
var gameScene; function setup() { gameScene = new PIXI.Container(); }
Note: pixi needs to run on a server. It is recommended to use the http-server local server when debugging.
Game start interface scene
Game end interface scene (one appears and one disappears)
First you need to create a graphics classvar graphics = new PIXI.Graphics();
graphics.beginFill(0xFF3300 );
//Graphic fill color
##graphics.lineStyle(4, 0xffd900,1); //Graphic border width, color, transparency
graphics.moveTo(50,50); //图形绘制起点 graphics.lineTo(250, 50); //连线到下一个点 graphics.lineTo(100, 100); graphics.lineTo(50, 50); graphics.endFill(); // 图形结束标志Drawing squares and circles
Drawing Block
graphics.drawRect(50, 250, 120, 120);//The parameters are the x point and y point coordinates respectively. Square length, square width
Draw a rounded square
graphics.drawRoundedRect(150, 450, 300, 100, 15);// The first four parameters are the same as drawing a square, and the last corner radius
Drawing a circle
graphics.drawCircle (470, 90,60);//The parameters are x point coordinate, y point coordinate, circle radius 60
var basicText = new PIXI.Text('Basic text in pixi');
basicText.x = 30;
var style = new PIXI.TextStyle({ fontFamily: 'Arial', //字体 fontSize: 36, //字体大小 fontStyle: 'italic', //字体类型(斜体) fontWeight: 'bold', //加粗 fill: ['#ffffff', '#00ff99'], //由上到下的过渡颜色 stroke: '#4a1850', //文字边框颜色 strokeThickness: 5, //文字边框粗细 dropShadow: true, //阴影 dropShadowColor: '#000000', //阴影颜色 dropShadowBlur: 4, //阴影模糊程度 dropShadowAngle: Math.PI / 6, //阴影角度 dropShadowDistance: 6, //阴影距离 wordWrap: true, //自动换行 wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options', style); richText.x = 30; richText.y = 180;
The above is the detailed content of A preliminary study on pixi framework in Javascript. For more information, please follow other related articles on the PHP Chinese website!