Une étude préliminaire sur le framework pixi en Javascript

pixi.js

Créer un moteur de rendu

Créer une zone pouvant lire des animations, équivalente à (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);

Sauf l'interface autoDetectRenderer , ainsi que les interfaces CanvasRenderer et WebGLRenderer,
autoDetectRenderer peut créer automatiquement un moteur de rendu WebGL ou Canvas basé sur la prise en charge du client pour WebGL.

Créer une scène

La scène est équivalente à un conteneur (Container Après avoir ajouté des éléments, le moteur de rendu (renderer) restitue la scène. Équivalent à un conteneur de niveau supérieur.

Il y a une classe pixi.js dans Container(), et cette classe est un conteneur.

var stage = new PIXI.Container();

添加舞台之后可以由渲染器(renderer)渲染。
renderer.render(stage);
// 舞台(stage)搭建完成后渲染出来。。      ***最后

Créer un ensemble de matériaux

L'élément le plus important dans l'animation est une image (matériau). Ce type d'objet image spécial est appelé un sprite (pixi.js) dans <🎜. > , sprite peut obtenir des effets d'animation en contrôlant la taille, la position et certains autres attributs de
. sprite

Il existe une classe

dans pixi, qui peut créer un objet sprite qui peut être utilisé dans pixi sur la base d'une image externe (matériau). sprite

Il existe trois façons de créer :

• Créer à partir d'une seule image

• À partir de Création complète d'une image matérielle, découpez certaines parties en fonction de différentes positions et tailles sur le matériau pour créer

  sprite

• Créer à partir de l'ensemble de matériaux
  L'ensemble de matériaux est un fichier json, défini L'avantage est que vous n'avez pas besoin de

  définir la position et la taille à chaque fois que vous créez un sprite. Par contre, vous n'avez pas besoin de modifier le code lorsque vous modifiez le. image matérielle.
  
  

Charger les images en fonction de l'ensemble de matériaux

Il y a une classe

dans pixi pour gérer le chargement des images, et appelez la fonction de rappel une fois le chargement terminé. loader

PIXI.loader
    .add("images/treasureHunter.json")
    .load(setup);

treasureHunter.json est le fichier de configuration de l'ensemble de matériaux, et setup est la fonction de rappel appelée après le chargement de l'image.
PIXI.loader peut obtenir les images chargées via PIXI.loader.resources une fois le chargement terminé.

Fonction de rappel

Une fois le chargement de l'image terminé,

appellera automatiquement la fonction PIXI.loader pour la prochaine étape du traitement. Définissons d’abord setup une méthode de test pour voir si elle fonctionne comme prévu.

function setup() {
    console.log("加载完成.");
}
// 测试可以的话就可以，删除setup里面的东西，然后完善舞台。

Créer une scène (gameScene)

Les jeux créent généralement deux scènes, l'une est utilisée pour afficher l'écran de jeu normal (gameScene) et l'autre est utilisée pour afficher les résultats du jeu. (jeuOverScene) .

var gameScene;

function setup() {
    gameScene = new PIXI.Container();
}

Dans le conteneur, vous devez ajouter tous les matériaux et créer les

correspondants. Comment les ajouter Vous pouvez accéder aux matériaux chargés via sprite. PIXI.loader.resources

var gameScene;

function setup() {
    gameScene = new PIXI.Container();
}

Remarque : pixi doit s'exécuter sur un serveur. Il est recommandé d'utiliser le serveur local du serveur http lors du débogage. >Le jeu démarre la scène de l'interface

Scène de l'interface de fin de jeu (une apparaît et une disparaît)
Utilisez Pixi pour dessiner des graphiques

• Dessiner des graphiques de ligne

Vous devez d'abord créer une classe graphique

• //Couleur de remplissage graphiquevar graphics = new PIXI.Graphics();

• //Largeur de bordure graphique, couleur, transparencegraphics.beginFill(0xFF3300);

• Dessin selon les coordonnées des points de ligne

  graphics.lineStyle(4, 0xffd900,1);

• Dessiner des carrés et des cercles Forme

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

Dessiner un carré

• //Les paramètres sont le point x et le point y coordonnées respectivement. Longueur du carré, largeur du carré

  
  graphics.drawRect(50, 250, 120, 120);Dessiner un carré arrondi
  

• //Les quatre premiers paramètres sont les mêmes que pour dessiner un carré, et le dernier cercle Rayon du coin

  
  graphics.drawRoundedRect(150, 450, 300, 100, 15);Dessinez un cercle
  

• //Les paramètres sont la coordonnée du point x, la coordonnée du point y, le cercle rayon 60

  
  Application de texte dans pixi (débutant)graphics.drawCircle(470, 90,60);
  

Vous devez d'abord créer une classe de texte

• Vous pouvez ensuite définir les coordonnées x,y

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

• Classe de style complexebasicText.x = 30;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!