游戏开发PixieJS

作者:zarte    发布时间: 2021-06-05

jspixie游戏

https://github.com/u2i/superstellar
https://juejin.cn/post/6844903794573049870
https://pixijs.io/examples/#/mesh-and-shaders/textured-mesh-basic.js

##pixi http://pixijs.download/release/docs/index.html
https://aitrade.ga/pixi.js-cn/
中文示例 https://aitrade.ga/pixi.js-cn.examples/#/interaction/dragging.js
https://github.com/Zainking/learningPixi#textureatlas

地图编辑Tilemap https://www.mapeditor.org/
纹理编辑 https://www.codeandweb.com/texturepacker

概念

PIXI应用

创建一个PIXI应用,也就是生成一个实例,可以传入相应的参数设置, 此时会生成一个canvas元素,这个元素就是app的view属性,然后需要将创建出来的元素添加到页面中

let app = new PIXI.Application({width: 256, height: 256}) document.body.appendChild(app.view)

配置项查看http://pixijs.download/release/docs/PIXI.Application.html

舞台/stage

在PIXI中舞台只有一个,即app.stage。舞台的本质是一个容器,所有容器有的属性舞台也有,舞台继承 自容器。舞台是所有需要被显示的内容的根容器,所有要被显示的对象最后都是要添加到舞台里去的。

app.stage.addChild(diaplayObject)

容器/container

container是用来装载多个显示对象的,使用PIXI.Container()方法来创建,一个舞台(stage)中可以包 含多个container。一般是在需要展示复杂的画面时,可以设置多个容器,将精灵分别放到对应的容器 里,再把容器放到舞台里去,这样就方便后续的操作。如果需要多场景切换时,每个场景就可以是一个 容器,每个场景都有自己的精灵,方便控制和管理

const container = new PIXI.Container() 
container.addChild(sprite)

加载器/loader

如果页面中需要加载大量的图片时,可能需要耗费很长的时间,所以需要一次性预加载所有的图片,同 时可以跟踪进度

const loader = new PIXI.Loader() 
loader.add('bunny', 'data/bunny.png')      
      .add('spaceship', 'assets/spritesheet.json')
loader.load((loader, resources) => { 
     //This code will run when the loader has finished loading the image
});
loader.onProgress.add(() => {}) 
loader.onError.add(() => {}) 
loader.onLoad.add(() => {}) 
loader.onComplete.add(() => {})

精灵/sprite

精灵是可以放在容器中的特殊图像对象,可用代码控制图像的基础,比如位置,大小等,也可以通过控 制其他属性来进行交互和动画

const sprite = PIXI.Sprite().from(imgUrl)

纹理/texture

因为PIXI.js是用WebGL和GPU渲染图像,所以需要将图片转化成GPU可以处理的格式,这种格式叫做纹 理。在精灵显示图片前,需要将普通的图片转换成WebGL纹理。为了更高的效率,PIXI使用纹理缓存来 存储和引用精灵需要的纹理,纹理的名称字符串就是图像的地址。

let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
let sprite = new PIXI.Sprite(texture);
或者
let sprite = new PIXI.Sprite(PIXI.loader.resources["images/anyImage.png"].texture);

加载图像转为纹理

PIXI.loader.add("images/anyImage.png").load(setup);

常用api

graphics

用于绘制原始形状(如线条,圆形和矩形)以及他们的上色和填充

const graphics = new PIXI.Graphics()
// 线框 
graphics.lineStyle(2, 0x0000FF, 1) graphics.drawRect(50, 250, 100, 100)
// 四边形 
graphics.drawRect(50, 50, 100, 100)
// 圆形 
graphics.drawCircle(100, 250, 50)
// 椭圆 
graphics.drawEllipse(600, 250, 80, 50)
// 圆角矩形 
graphics.drawRoundedRect(50, 440, 100, 100, 16)
// 星星 
graphics.drawStar(360, 370, 5, 50)
// 多边形 
graphics.drawPolygon(path)
// 贝塞尔曲线 
graphics.bezierCurveTo(100, 240, 200, 200, 240, 100)
// 圆弧 
graphics.arc(300, 100, 50, Math.PI, 2 * Math.PI)
app.stage.addChild(graphics)

graphics.clear()

text

// 基础文字 
const basicText = new PIXI.Text('6666666')
// 自定义文字样式 
const 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
}) 
const richText = new PIXI.Text('6666666', style) 
app.stage.addChild(richText)

sprite

渲染页面中已加载的所有纹理对象的基础,texture相当于拿到了一个图像,作为纹理被 sprite加载 sprite 具有zIndex属性,当容器的sortableChildren属性为true时容器中的所有子元素按照zIndex大小 排序

const bunny = PIXI.Sprite.from('examples/assets/bunny.png')
bunny.anchor.set(0.5) 
bunny.x = app.screen.width / 2 
bunny.y = app.screen.height / 2
app.stage.addChild(bunny)

如果有多个纹理需要处理,可以使用spritesheet来达到更高的效率

PIXI.Loader.shared.add("assets/spritesheet.json").load(setup);
function setup() {  
  let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;  
  let sprite = new PIXI.Sprite(sheet.textures["image.png"]);  
  ... 
}

texture

用于存储图像或者图像的一部分信息,不能直接被加载到页面中去,而是作为sprite的纹理被加 载,texture创建之后可被重复多次使用;要注意的是由svg制成的纹理在文件处理未完成前不能被使用, 可以通过检查_textureID这个属性来验证文件是否处理完成,完成后该属性不为undefined

let texture = PIXI.Texture.from('assets/image.png') 
let sprite1 = new PIXI.Sprite(texture) 
let sprite2 = new PIXI.Sprite(texture)
let texture1 = PIXI.Texture.from('assets/image.svg')
销毁纹理 texture.destroy()
刷新纹理 texture.update()

交互

同时兼容移动端和pc端,在绑定事件之前需要开启交互模式 graphics.interactive = true 在pc端需要出现cursor: pointer的效果 graphics.buttonMode = true
简单示例

graphics.on('click', onClick) 
function onClick() { 
    graphics.scale.x *= 1.25 
    graphics.scale.y *= 1.25 
}

拖拽功能

const texture = PIXI.Texture.from('examples/assets/bunny.png') 
const bunny = new PIXI.Sprite(texture)
bunny    
  .on('pointerdown', onDragStart)    
  .on('pointerup', onDragEnd)    
  .on('pointerupoutside', onDragEnd)    
  .on('pointermove', onDragMove)     
function onDragStart(event) {    
  this.data = event.data    
  this.alpha = 0.5    
  this.dragging = true 
}
function onDragEnd() {    
  this.alpha = 1    
  this.dragging = false    
  this.data = null 
}
function onDragMove() {    
  if (this.dragging) {        
    const newPosition = this.data.getLocalPosition(this.parent)        
    this.x = newPosition.x        
    this.y = newPosition.y    
  } 
}

离开页面时需要手动清理内存,否则无法释放WebGL内存
app.destroy(true)

常用事件

//兼容鼠标和触摸屏的共同触发 type InteractionPointerEvents = "pointerdown" | "pointercancel" | "pointerup" | "pointertap" | "pointerupoutside" | "pointermove" | "pointerover" | "pointerout";
//触摸屏触发事件 type InteractionTouchEvents = "touchstart" | "touchcancel" | "touchend" | "touchendoutside" | "touchmove" | "tap";
//鼠标触发事件 type InteractionMouseEvents = "rightdown" | "mousedown" | "rightup" | "mouseup" | "rightclick" | "click" | "rightupoutside" | "mouseupoutside" | "mousemove" | "mouseover" | "mouseout";

上一篇:  git使用教程大全

加载更多