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 ...
随机推荐
- 个人永久性免费-Excel催化剂功能第100波-透视多行数据为多列数据结构
在数据处理过程中,大量的非预期格式结构需要作转换,有大家熟知的多维转一维(准确来说应该是交叉表结构的数据转二维表标准数据表结构),也同样有一些需要透视操作的数据源,此篇同样提供更便捷的方法实现此类数据 ...
- Excel催化剂开源第9波-VSTO开发图片插入功能,图片带事件
图片插入功能,这个是Excel插件的一大刚需,但目前在VBA接口里开发,如果用Shapes.AddPicture方法插入的图片,没法对其添加事件,且图片插入后需等比例调整纵横比例特别麻烦,特别是对于插 ...
- C++多小球非对心弹性碰撞(HGE引擎)
程序是一个月前完成的,之前一直没正儿八经的来整理下这个程序,感觉比较简单,不过即使简单的东西也要跟大家分享下. 源码下载:http://download.csdn.net/detail/y851716 ...
- three出现状态200的报错
报错代码如下: {status: 200, data: {…}} "sa_SpringUserFindOneView_findPbUserByUserId"header.vue?1 ...
- dz6.0的一个sql注入漏洞
今天开始着手分析第一个漏洞,找了一上午靶机,发现一个含有成人内容的违法网站是用dz6.0搭的,今天就看看dz这个版本的洞了 问题函数位置:my.php第623行 if(is_array($descri ...
- TypeScript环境安装,以及配置idea开发环境
安装前准备 安装typescript需要用到npm管理工具,而npm是随同Node.js一起安装的包管理工具,所以要先安装Node 1.前往Node官网下载最新版安装包:http://nodejs.c ...
- 二进制文件安装安装flannel
二进制文件安装安装flannel overlay网络简介 覆盖网络就是应用层网络,它是面向应用层的,不考虑或很少考虑网络层,物理层的问题. 详细说来,覆盖网络是指建立在另一个网络上的网络.该网络中的结 ...
- 【POJ - 2456】Aggressive cows(二分)
Aggressive cows 直接上中文了 Descriptions 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x ...
- spring实战学习笔记(一)spring装配bean
最近在学习spring boot 发现对某些注解不是很深入的了解.看技术书给出的实例 会很疑惑为什么要用这个注解? 这个注解的作用?有其他相同作用的注解吗?这个注解的运行机制是什么?等等 spring ...
- Java课堂 动手动脑5
1.了解棋盘打印:利用二维数组输出一个15*15的棋盘,棋盘的原素为“+”,就是输出一个横纵都是15个“+”的二维数组,然后再以坐标形式输入棋子“●”,替换掉原来棋盘里的“+”.再编写代码. 电脑随机 ...