我发现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的一些使用的更多相关文章

  1. PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎

    Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...

  2. 使用PixiJS做一个小游戏

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

  3. 学JS的心路历程 - PixiJS -基础(三)

    今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...

  4. 学JS的心路历程 - PixiJS -基础(一)

    建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提 ...

  5. 学JS的心路历程Day26 - PixiJS -入坑

    后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...

  6. pixijs shader 贴图溶解效果教程

    pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...

  7. pixijs shader 案例

    pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...

  8. pixijs shader fade 从左到有右淡入 从下到上淡入效果

    pixijs shader fade 从左到有右淡入     从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...

  9. pixijs shader颗粒化显示贴图

    pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...

随机推荐

  1. 个人永久性免费-Excel催化剂功能第33波-报表形式数据结构转标准数据源

    一般来说,如果有标准的数据源结构,对后续的分析工作将会带来极大的方便.但现实中,许多的原始数据并不预期那样,一个主题的数据已经干净地存放在一个工作表中.今天Excel催化剂再次送上批量化操作,将不规则 ...

  2. jsp页面中将CST时间格式化为年月日

    引入: <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> 格式化: ...

  3. C语言入门9-1-分类函数

    分类函数 ASCII字符可以分为英文字母.数字.控制字符.空白字符.大小写字母以及标点符号,分类是指对字符进行属性判定,判断字符属于哪些范畴,这些属性的判定在程序中非常常见,尤其是通信协议的字符处理部 ...

  4. C语言入门7-程序设计方法基础-循环结构

    程序设计方法基础-循环结构 循环三要素: 初值   循环判断条件   步长(循环增量) 循环结构在有些书籍上也称为重复结构,  即反复执行某一部分的操作. 循环三要素: 初值   循环判断条件   步 ...

  5. python虚拟环境管理 Pipenv 使用说明

    安装 pip install pipenv 检查是否安装成功 pipenv --version 创建虚拟环境(在工程文件夹下) pipenv install 默认下,Pipenv统一管理所有虚拟环境 ...

  6. fjnu2016-2017 低程 PROBLEM C 汪老司机

    动态规划 方程 #include <iostream>#include <iomanip>#include <cmath>#include <algorith ...

  7. 终极版Servlet——我只能提示您路过别错过

    终极版Servlet 前言:这两天看了SSM框架,本来是想往后继续学的,脑门一转又回来了,不能就这么不声不响的走了,看了这么多天的Servlet,再写最后一篇做个告别吧,这篇起名为终极版,是我现在所能 ...

  8. 脱壳0-FSG壳-详细流程

    目录 @ 1 拿到当前加壳程序,用exeinfo/PeID 看一下信息 可以看出是很老的壳FSG. 分析: ​ Entry Point : 000000154,熟悉PE结构的知道,入口点(代码)揉进P ...

  9. Eclipse Other Projects小问题

    Eclipse 不知什么时候多了个 "Other Projects" 文件夹,所有的项目又多了一层目录,如图所示: 虽然对功能没任何影响,但每次打开有些麻烦,多少感觉有些不爽…… ...

  10. JDK的命令行工具系列 (三) jhat、jstack

    jhat: heapdump文件分析工具 在前两篇系列文章JDK的命令行工具系列 (一) jps.jstat.JDK的命令行工具系列 (二) javap.jinfo.jmap中, 我们已经介绍过了jp ...