我发现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催化剂100+大主题功能梳理导读

    Excel催化剂历经1年4个月的开发时间,终于荣登100+个大主题功能,完成数据领域的功能大矩阵,可以说在日常的数据处理及分析上,绝大部分的共性场景已经囊括其中,是数据工作者难得一遇的优秀作品之一.因 ...

  2. c语言进阶4-有返回值函数

    一.         从函数返回 从函数返回就是返回语句的第一个主要用途.在程序中,有两种方法可以终止函数的执行,并返回到调用函数的位置.第一种方法是在函数体中,从第一句一直执行到最后一句,当所有语句 ...

  3. 总结暨JAVAWEB学习开篇(一)

    匆匆,距上一篇博客已经过去7月有余,遂作文一篇总结暨JAVAWEB学习开篇. 1. 啃英文新概念.在多方讨教英语大佬后改变学习方式,通过背诵英文书籍以及多听英文录音来学习,效果还不错(等真正有成效了跟 ...

  4. mysql8.0.15创建数据库和是删除数据库及删除用户

    ---恢复内容开始--- 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 1.首先安装mysql8.0.15 2.Mys ...

  5. 《C# 语言学习笔记》——事件

    对象可以激活事件,作为它们处理的一部分.给代码添加事件处理程序,这是一种特殊的函数,在事件发生时调用.还可以配置这个处理程序,以监听我们感兴趣的事件. 使用事件可以创建事件驱动的应用程序.许多基于Wi ...

  6. cookbook_数据结构和算法

    1.1将数据分解为单独的变量 list_a = [1,2,3,4,5,6,7,8,9] a,b,c,d,e,f,g,h,i = list_a print(a,b,c,d,e,f,g,h,i) #使用相 ...

  7. javaScript常用运算符和操作符总结

    javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接   +=字符串连接复合 布尔操作符 !. &&. ...

  8. ES 22 - Elasticsearch中如何进行日期(数值)范围查询

    目录 1 范围查询的符号 2 数值范围查询 3 时间范围查询 3.1 简单查询示例 3.2 关于时间的数学表达式(date-math) 3.3 关于时间的四舍五入 4 日期格式化范围查询(format ...

  9. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  10. 基于zookeeper集群的云平台-配置中心的功能设计

    最近准备找工作面试,就研究了下基于zookeeper集群的配置中心. 下面是自己设想的关于开源的基于zookeeper集群的云平台-配置中心的功能设计.大家觉得哪里有问题,请提出宝贵的意见和建议,谢谢 ...