使用PixiJS做一个小游戏

最新推荐文章于 2025-09-25 14:45:57 发布

原创

最新推荐文章于 2025-09-25 14:45:57 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何利用PixiJS这个基于WebGL的2D渲染引擎制作一个小游戏。主要内容包括PixiJS的基本概念，如舞台、资源加载、精灵和动画精灵的创建，以及游戏设计中的初始化、地图设计、滑动事件处理、障碍物和气球的动态行为。通过实例演示，详细讲解了一个躲避下落物体的游戏实现过程。

PixiJS

PixiJS使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。

官方网址: http://www.pixijs.com/

知识点

做一个小游戏，我们使用到PixiJS的功能不多，只需要了解以下几个点即可快速上手。

PIXI.Application 创建一个游戏时第一个要初始化的对象。
stage 舞台，我们可以看做是所有对象的根节点，类似于document。
PIXI.loader 资源加载和管理器。
PIXI.Texture 材质，通常是指我们加载的图片。
PIXI.Sprite 精灵，就是游戏中的一个对象，结合PIXI.Texture 材质使用。
PIXI.extras.AnimatedSprite 动画精灵，可以设置多个图片，按序播放。
PIXI.Container 精灵容器，我们可以把多个精灵结合在一起组成一个更复杂的对象。

了解以上内容我们就可以直接做小游戏了，其它知识可以去官网查看。

游戏制作

此为一个躲避下落物体的小游戏，体验地址 (移动端)：https://jiamao.github.io/pixigame/game.html

初始化PixiJS

var opt = {

width: window.innerWidth,

height: window.innerHeight,

antialias: true, // default: false

transparent: false, // default: false

resolution: 1 // default: 1

};

//生成app对象，指定宽高，这里直接全屏

var app = new PIXI.Application(opt);

app.renderer.backgroundColor = 0xffffff;

app.renderer.autoResize = true;

//这里使用app生成的app.view(canvas)

document.body.appendChild(app.view);

//这里是APP的ticker，会不断调用此回调

//我们在这里去调用游戏的状态更新函数

app.ticker.add(function(delta) {

//理论上要用delta去做时间状态处理，我们这里比较简单就不去处理时间问题了

//每次执行都当做一个有效的更新

game.update(delta);

});

资源加载

加载资源使用PIXI.loader，支持单个图片，或雪碧图的配置json文件。

PIXI.loader
.add(name1, 'img/bg_1-min.jpg')
.add(name2, 'img/love.json').load(function(){
    //加载完
});

雪碧图和其json配置文件可以用工具TexturePackerGUI来生成，格式如下:

{"frames": {

"bomb.png":

{

"frame": {"x":0,"y":240,"w":192,"h":192},

"rotated": false,

"trimmed": false,

"spriteSourceSize": {"x":0,"y":0,"w":192,"h":192},

"sourceSize": {"w":192,"h":192}

},

...//省略多个

"x.png":

{

"frame": {"x":576,"y":240,"w":192,"h":192},

"rotated": false,

"trimmed": false,

"spriteSourceSize": {"x":0,"y":0,"w":192,"h":192},

"sourceSize": {"w":192,"h":192}

}},

"animations": {

"m": ["m1.png","m2.png"]

},

"meta": {

"app": "https://www.codeandweb.com/texturepacker",

"version": "1.0",

"image":

最低0.47元/天解锁文章