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 ...
随机推荐
- Git更改提交
提交记录我们的工作历史记录,提交自身是一成不变的.Git提供了几个工具和命令,抓门用来帮助修改完善版本库中的提交. 实际工作中存在很多情况需要我们去修改或返工某个提交或者整个提交序列: 1,可以在某个 ...
- 关于Calendar的一些用法总结
import java.util.Calendar; import java.security.KeyStore.TrustedCertificateEntry; import java.text.D ...
- Git学习(一):版本控制介绍及安装
一.VCS(版本控制系统)的演变 1.集中式VCS的特点 1)有集中的版本管理服务器: 2)具备文件版本管理和分支管理能力: 3)集成效率较没有版本控制(如:进行文件夹标注的方式)有明显地的提高: 4 ...
- 关于C#调用WebServices的方法
2018-1-22 前情是我使用vs在引用高通的webservice时出现了下载错误导致无法引用这个服务,先是在网上查询了这个错误的问题及解决方案,将这个问题与解决方法发给了高通同事,可惜的是他也不清 ...
- vue教程(一)-html使用vue
前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包 2.启动new Vue({el:目的地,template:模板内容 ...
- C++ 八数码问题宽搜
C++ 八数码问题宽搜 题目描述 样例输入 (none) 样例输出 H--F--A AC代码 #include <iostream> #include <stdio.h> #i ...
- jsp数据交互(二).3
01.Application原理与应用 01.application对象的作用域范围是整个应用服务,而它在应用中所承担的责任就类似于一个全局变量.只要服务启动,则application对象就会存在. ...
- (技能篇)双机热备之Oracle切换故障处理
背景: 以前做的的一个项目中使用了某国产双机热备产品,但是在数据库做双机热备时出现了一些问题,没办法.不得不研究一番了!经过两天的研究终于问题得以解决.将问题处理步骤记录下来以备后用,也希望能帮助到需 ...
- 泥瓦匠 5 年 Java 的成长感悟(下)
继续<泥瓦匠 5 年 Java 的成长感悟(上)>,大致包括下面几点: 学技术的心态 学技术的学法 工作的心态 工作的硬技能 工作的软实力 听点雷子的民谣,我就安静地感概感概.上次说写的, ...
- 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk
一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...