Maison > Article > interface Web > Une étude préliminaire sur le framework pixi en Javascript
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.
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)搭建完成后渲染出来。。 ***最后
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
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 :
sprite
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.
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);
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
Dessiner des graphiques de ligne
//Couleur de remplissage graphiquevar graphics = new PIXI.Graphics();
//Largeur de bordure graphique, couleur, transparencegraphics.beginFill(0xFF3300);
graphics.lineStyle(4, 0xffd900,1);
graphics.moveTo(50,50); //图形绘制起点 graphics.lineTo(250, 50); //连线到下一个点 graphics.lineTo(100, 100); graphics.lineTo(50, 50); graphics.endFill(); // 图形结束标志Dessiner un carré
graphics.drawRect(50, 250, 120, 120);
Dessiner un carré arrondi
graphics.drawRoundedRect(150, 450, 300, 100, 15);
Dessinez un cercle
Application de texte dans pixi (débutant)graphics.drawCircle(470, 90,60);
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!