我的博客简单简洁 可能表达不清. 如有想法, 敬请留言.谢谢! 群:881784250

https://github.com/ccaleb/endless-runner/tree/master/javascript-pixi/pixi.js-master

1:pixi.js的优点

代码简单,性能高效,扩展性强

PixiJS的性能优势, pixi.js专注于渲染,在js2d游戏引擎中,其性能是相当彪悍的。(官网上说最强) 见测试 https://www.goodboydigital.com/pixijs/bunnymark/?base=pixijs&category=bunnymark

PixiJS有着"简单"的代码, 友好的API,loader.add().add().load(),    label.centerXY()

PixiJS易扩展,能发挥你无穷的想象力通过装一些插件,可以更方便的实现一些功能.龙骨功能,透视功能,都过插件都可以实现

PIXIJS一直在维护,一直在更新, 其模块化的思想相当先进.

2 核心是Sprite. PIXI.Sprite->PIXI.Container->PIXI.DisplayObject

Sprite对象是渲染到屏幕的所有纹理对象的基础,能轻轻松松改变纹理,只要.sprite.texture = ...

Sprite默认是不响应点击等事件的,必须 Interactive

怎样创建srptie呢?

new Sprite(texture?)         常用方式

Sprite.from(source);         快捷方式. @param source, 可以是url地址,canvas,纹理

Sprite.fromFrame(key);    快捷方式 @param key 为json中的key,或加载时定义的key

Sprite.fromImage(url, crossorigin?:, scaleMode?:);  快捷方式  @param url,不解释

常用属性pivot, anchor, position, scale,texture 是不是一看就知道是干嘛的.

3 Pixi只做三件事  Pixi helped me with 3 main things:

  • loading and displaying of assets
  • interactivity
  • game loop

4 一些有用的东西

可用命令行编译spritesheet  npm install sprietsheet -g

app.ticker()             loop及time

处理九宫格    Pixi.mesh.NineSlicePlane(texture, x, y, width, height)

pointer事件(鼠标和touch)   mouse事件(鼠标) tap事件(touch),  比较好的是, sprite.on('pointerdown', fun), fun中this会是sprite

获取全局坐标         app.renderer.plugins.interaction.mouse.global

PIXI inspector      An extension to the Chrome DevTools for inspecting Pixi.js games/applications.

loader.add(..........).on('progress", loadProgress).load(complete)  加载完成后的资源是保存在PIXI.loader.resources中,键值就是url或设置的key

PIXI.util里面包含了一些很有用东西. 比如isMobile,EventEmitter,TextureCache......

PIXI.extras需面也包含了一些有用的东西 例如 AnimatedSprite, BitmapText, Tiling等等,例如Tiling处理一些滚动效果是很高效的

5 pixi中常见的问题:

spriteA可以添加spriteB,spriteA宽高为1,这时需要用Container, sprite的宽高取决于sprite中纹理的宽高.

dis.stage为空, 需要注意.应用 app.stage

graphics 是继承容器的, 添加graphic有效没?

ui的问题,纯粹的用sprite,txt处理不复杂的界面搓搓有余.但是处理scroller和list是有点困难的.   用第三方ui框架 spown,ezgui都是有点问题的,通过egret编辑界面.然后导成pixi.js代码...

6 其他资料

多纹理渲染   http://phaser.io/tutorials/advanced-rendering-tutorial/part2

下面是老外的演讲的一些how

Things Audience Members Will Learn   观众会学到的东西

  • How to set up and get Pixi.js app running    怎样让pixi运行
  • How to use its basic features                        怎样用它的基本功能 
    • Sprites
    • Graphics
    • Interaction
  • How to use the more advanced features     怎样用它的先进功能
    • Filters
    • Custom Filters
    • Particles
    • Meshes
    • Ropes
    • RenderTextures
    • Exporting Data
  • How to optimise your scene for Pixi.js      怎样优化

性能测试:   multi texture batching         https://phaser.io/tutorials/advanced-rendering-tutorial/part2

pixi.js > phaser3 > phaser2  https://github.com/themoonrat/webgl-benchmark

线上例子   欢乐球球 是pixi.js和three.js开发的~

 var e = canvas.getContext("webgl", {
alpha: !1,
antialias: !1,
preserveDrawingBuffer: !1,
premultipliedAlpha: !1
});
e.colorMask(!0, !0, !0, !0), this.renderer3D = new THREE.WebGLRenderer({
context: e,
canvas: canvas,
premultipliedAlpha: !1,
alpha: !1
}), this.renderer3D.setPixelRatio(window.devicePixelRatio), this.renderer3D.setSize(window.innerWidth, window.innerHeight),
this.renderer3D.shadowMap.enabled = a.default.enableShadow, this.renderer3D.autoClear = !1,
this.state3D = this.renderer3D.state, a.default.stageWidth = canvas.width, a.default.stageHeight = canvas.height,
SPE.valueOverLifetimeLength = 3, (0, s.setSharedCanvasSize)(canvas.width, canvas.height),
PIXI.settings.isLittleGame = !0, PIXI.settings.MAX_TEXTURES = 4, PIXI.settings.MAX_VERTEX_ATTRIBS = 16,
PIXI.settings.RESOLUTION = 1, PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR,
PIXI.settings.CAN_UPLOAD_SAME_BUFFER = !0, PIXI.settings.SPRITE_BATCH_SIZE = 256,
PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL, PIXI.settings.MIPMAP_TEXTURES = !1,
e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, !1), this.pixiApp = new PIXI.Application({
view: canvas,
context: e,
width: window.innerWidth,
height: window.innerHeight,
resolution: window.devicePixelRatio,
forceCanvas: !1,
clearBeforeRender: !1,
roundPixels: !1,
transparent: !1,
legacy: !0,
sharedLoader: !0,
autoStart: !1,
sharedTicker: !0
}), this.pixiApp.ticker.autoStart = !1, this.pixiApp.ticker.stop(), this.pixiApp.removeRenderTick(),

  

pixi.js 总结的更多相关文章

  1. (原)用pixi.js 实现 方块阵点击后原地自转效果

    源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法?  PS:问题已经解决,谢谢评论的大神@Antineutrino ...

  2. 让hammer完美支持Pixi.js - 2D webG库

    由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...

  3. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  4. pixi.js教程中文版--基础篇

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

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

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  6. pixi.js

    添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...

  7. 三星a9上测试egret与pixi.js的渲染性能

    for (let i = 0; i < 500; i++) { let shape = new egret.Shape(); shape.graphics.beginFill(0xff0000) ...

  8. pixi.js v5 快速了解

    pixi.js 追求简单,  性能,高价值. pixi.js v5将是一交比较大的升级,代码更加精简,性能更加强悍,功能更加丰富,扩展更加高效 pixi.js一步一脚印,版本持续稳定的更新, 深入学习 ...

  9. pixi.js + three.js

    three.js    最好的webgl 3d渲染库之一, pixi.js    最好的webgl 2d渲染库之一,也许可以把之一去掉 两个库都很精简,如果把两个库结合起来,一定很爽很爽,你说是吧! ...

  10. 如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?

    如何在PIXI.js里面使用json文件来管理瓦片集(tileset)? PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json ...

随机推荐

  1. springmvc 使用jq传递json数据时出现415错误

    出现415错误是因为解析json时出现了错误,通过排查几点就能解决. 样例: <script> function requestByJson() { var datatest = {&qu ...

  2. SQL Server 内存和换页(Paging)

    在进程开始执行时,进程首先申请虚拟地址空间VAS(Virtural Address Space),VAS是进程能够访问的地址空间,由于VAS不是真正的物理内存空间,操作系统必须将VAS隐射到物理内存空 ...

  3. IT程序员每天的困扰:这TM为啥不可以?这TM也行?

    如果有对 Python 感兴趣的程序员,可以加我们小助手的QQ:979950755 会免费送 Python 的视频教程噢! 随着IT互联网对社会的影响越来越重要,关乎人类的未来发展进程.所以现在很多媒 ...

  4. 电商打折套路分析 —— Python数据分析练习

    电商打折套路分析 ——2016天猫双十一美妆数据分析 数据简介 此次分析的数据来自于城市数据团对2016年双11天猫数据的采集和整理,原始数据为.xlsx格式 包括update_time/id/tit ...

  5. python002

    1.万恶的”+“号字符串拼接 字符串中的连接符+”会开辟一个新的空间,多一个“+“就会多开辟一个空间,影响性能 2.字符串格式化 ”%S“   :字符类型         ”%D“   ”数字类型  ...

  6. STM平台增加性能测试/稳定性测试部分【二】

    [一]方案 基本上测试针对产品的各项方案大体是如下的: 如上所示,针对产品的性能测试主要步骤如下: 1.造数据,在产品业务流上,产生所需的数据,数据量以(稳定性或者压测指标确定) 2.根据步骤1,设定 ...

  7. d-ary heap实现一个快速的优先级队列(C#)

    d-ary heap简介: d-ary heap 是泛化版本的binary heap(d=2),d-ary heap每个非叶子节点最多有d个孩子结点. d-ary heap拥有如下属性: 类似comp ...

  8. vue 组件-组件定义的4种方式

    一.组件命名的方式 ①kebab-case,单词之间采用  - (短横线)连接,例如:my-component ,在DOM中使用时,<my-component ></my-compo ...

  9. POJ 3468 A Simple Problem with Integers(分块入门)

    题目链接:http://poj.org/problem?id=3468 A Simple Problem with Integers Time Limit: 5000MS   Memory Limit ...

  10. 2013第四届蓝桥杯C/C++ B组

    题目标题: 高斯日记:Excel 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示 ...