A preliminary study on pixi framework in Javascript

pixi.js

Create renderer

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.

Create stage

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)搭建完成后渲染出来。。      ***最后

Creating a material set

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:

• Create from a single image

• From the entire Material image creation, intercept certain parts according to different positions and sizes on the material to create sprite

• Create from the material set

  
  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. .
  

Load images according to the material set

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);

treasureHunter.json is the configuration file of the material set, and setup is the callback function called after the image is loaded.
PIXI.loader After loading is complete, you can obtain the loaded image through PIXI.loader.resources.

Callback function

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里面的东西，然后完善舞台。

Create scene (gameScene)

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)

Use pixi to draw graphics

Draw line graphics

• 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

• Drawing according to line point coordinates

graphics.moveTo(50,50);    //图形绘制起点
graphics.lineTo(250, 50);    //连线到下一个点
graphics.lineTo(100, 100);
graphics.lineTo(50, 50);
graphics.endFill();   // 图形结束标志

Copy after login

• 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
  

• First you need to create a text class

  var basicText = new PIXI.Text('Basic text in pixi');

• You can then set the x and y coordinates

  basicText.x = 30;

• ##Complex styled class

  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;

  Copy after login

  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!