PIXIJS的一些使用
我发现pixijs在国内简直就是一片静土啊,只有那么一点点的微弱的不能再微弱的声音。
我在这里整理了下我使用过程中解决和可能理解的一些问题吧,都是一个个点,而不是完整的示例。
先放官网示例: https://pixijs.io/examples-v4/#/demos-basic/container.js
官网文档:http://pixijs.download/release/docs/PIXI.Application.html (纯英文的,阅读起来还是有些吃力)
//创建一个示例
new PIXI.Application({
width: w,
height: h
});
这是必备的
//创建一个组,用于放置需要共同出现的精灵
new PIXI.Container({
width: w,
height: h
});
对场景切换一开始不了解,完全不知道怎么处理的。后来才知道是把精灵分组,控制组之前的显隐从而实现的场景切换。
//创建一个精灵,精灵就是每一个资源。我们的动画主要是操作它。如果整体的话就是组了
let sense_two_ticket = PIXI.Sprite.fromImage('sense_two_ticket')
对于精灵的一些属性使用(一部分同样使用于组)
anchor: 定位锚点, 默认是左上角,可以设置在精灵内的任意位置,常用于放大缩小的焦点。
pivot: 旋转时候的圆心位置,同理anchor。
position: 定位了。
width/height: 宽高了。
备注:
1、我用了pixijs才知道原来 0xFFFFFF 和 FFFFFF 是一个颜色,只是一个是16进制,一个是字符串。
2、我是参考了这位朋友的项目才理解的: 这是她的主页: http://www.chunling.online/#/
以上仅限于个人理解,无论对错。
PIXIJS的一些使用的更多相关文章
- PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎
Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...
- 使用PixiJS做一个小游戏
PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...
- 学JS的心路历程 - PixiJS -基础(三)
今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...
- 学JS的心路历程 - PixiJS -基础(一)
建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提 ...
- 学JS的心路历程Day26 - PixiJS -入坑
后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...
- pixijs shader 贴图溶解效果教程
pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...
- pixijs shader 案例
pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...
- pixijs shader fade 从左到有右淡入 从下到上淡入效果
pixijs shader fade 从左到有右淡入 从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...
- pixijs shader颗粒化显示贴图
pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...
随机推荐
- Catalan公式
f(n)=f(1)*f(n-1)+f(2)*f(n-2)+f(3)*f(n-3)+......+f(n-1)*f(1) 例用:一个长度为n的无重复序列入栈的所有出栈方式
- 调用百度API进行文本纠错
毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...
- 打包名命令:tar
将多个文件或目录包成一个大文件的命令功能,我们称它是一种"打包命令". tar的参数非常多,这里只列出几个常用的参数,更多的参数你可以自行man tar查询. [root@www ...
- Oculus Rift 没有声音的解决方法
If you do not hear any audio when using Rift, please try the following steps: Check the Rift audio s ...
- PHP与ECMAScript_2_数据类型
PHP ECMAScript 数据类型 基本:String.Integer.Float.Boolean 基本:String. Number. Boolean.NULL.undefined 复合:Arr ...
- LinkedHashMap的特殊之处
一.前言 乍眼一看会怀疑或者问LinkedHashMap与HashMap有什么区别? 它有什么与众不同之处? 由于前面已经有两篇文章分析了HashMap,今天就看看LinkedHashMap.(基于 ...
- 【Android】SDK Manager 设置代理
这里是 Mac 系统下,Windows 环境类似.打开 Android SDK Manager, Proxy Settings 设置如下所示: PS: 注意勾选 "Force https:/ ...
- 使用verilog编写锁存器与触发器
需要注意的地方有四点: 1.关于锁存器与触发器在原理上的不同点,以及代码的不同点 2.关于高电平有效与低电平有效之前的区别 3.理解实现复位与实现D触发器之间的区别 4.理解同步与异步之间的区别 锁存 ...
- 图像反转(一些基本的灰度变换函数)基本原理及Python实现
1. 基本原理 获取像素值在[0, L]范围内的图像的反转图像,即为负片.适用于增强图像中白色或者灰色的区域,尤其当黑色在图片中占主地位时候 $$T(r) = L-r$$ 2. 运行结果 图源自ski ...
- 前端笔记之微信小程序(四)WebSocket&Socket.io&摇一摇案例&地图|地理位置
一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯 ...