HTML5游戏开发引擎Pixi.js完全入门手册（一）框架简介及框架结构分析，作者思路剖析

时间：2024-01-10 14:26:26

前言：

最近无聊在淘宝弄了个小店，打算做一个兼职。遇到一个客户，要我帮忙拷贝一个html5游戏。。

　　我这人有一个习惯，拿到自己没见过的东西。都会去研究一番。去网上查了下发现，资料都是英文版。感觉极度不方便。。因此拿出来，自己分析分析。。。。

框架简介：

　　Pixi.js到底是什么呢。。

　　 Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。 Pixi渲染器可以开发者享受到硬件加速，但并不需要了解WebGL。

　　以上是百度出来的答案。。作者，分析下。。说的白话点就是  一个做游戏的js插件。。优点是使用了WEBGl 加速，，“不知道WEBGl ?不要紧。作者后面会详细解释的。。各位不必激动，”。

框架结构分析：

　　在开始分析结构前 请大家跟我做一件事，“深呼吸，深呼吸，再次深呼吸”，下面就是见证"奇迹"的时刻。

　  要学这个框架，我们首先要读懂作者的思路，作者在这里 使用了 面向对象的思想把 框架概括成3个对象 ：舞台，渲染，元素。通过这3个对象相互间的配合组成一个画面。。。下面我给大家列出了3个对象的大型。。。。

  • 舞台对象，PIXI.Stage();

  • 以后的页面元素都是被添加到舞台上，然后通过渲染出来的

1
stage = new PIXI.Stage("0x222222");

  • 渲染对象，PIXI.autoDetectRenderer();

  • 三个参数，分别是宽度，高度，和绑定元素，HTML里可以用ID绑定

1
2
3
4
5
var renderer = PIXI.autoDetectRenderer(
    512,
    256,
    document.getElementById("mydiv")
)

  • 图像资源对象，PIXI.Texture.fromImage();

  • 元素对象，sprite;

1
var Texture = PIXI.Texture.fromImage("tset.png");

  • PIXI.Sprite(sprite); //加载到sprite，如上面我们加载了一张图片存放到Texture里了，我们就可以创建到sprite实例

1
2
3
4
5
6
che = new PIXI.Sprite(Texture);
//放入sprite里我们就可以给他定义坐标位置了
che.position.x = 0;
che.position.y = 0;
//还记得我们刚才创建的舞台吗，我们要把这个实例放入到舞台里面去
stage.addChild(che);

  • render();//我们创建了渲染工具，等我们把舞台所有元素都实例化好了后，就开始渲染舞台

1
renderer.render(stage);

相关文章