我发现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. 「数据分析」Sqlserver中的窗口函数的精彩应用-问题篇

    最近看到PowerBI圈子在讨论最大连续区间段的问题,即某人最大的全勤时间,某人的最长的连续打卡时间等问题的计算,佐罗老师给出了10万倍性能的答案.这个问题也引发了笔者一些兴趣,隐约记得以前看过Sql ...

  2. 个人永久性免费-Excel催化剂功能第75波-标签式报表转标准数据源

    数据处理永远是数据分析工作中重中之重的任务,大部分人深深地陷入在数据处理的泥潭中,今天Excel催化剂再接再厉,在过往已提供了主从结构报表数据源的数据转换后,再次给大家送上标签式报表数据源的数据转换操 ...

  3. Android/AndroidStudio/idea使用教程之git使用(详细)(码云)

    已经安装好了AndroidStudio,安装教程 本教程是作者自己摸索出来的,有不足之处还请大家海涵.多多拍砖,互相学习. 第一步:下载git,安装git客户端 直接百度git,下载git ​ 安装g ...

  4. Spark-windows安装

    Spark 目的:达到能在pycharm中测试 1.安装必要的文件: JDK AnaConda spark hadoop jdk测试:java -version Anaconda测试: 打开Anaco ...

  5. Python字符串格式化-学这些就够用了

    一.思考❓❔ 1.什么是字符串格式化? 将变量(对象)的值填充到字符串中 在字符串中解析Python表达式 对字符串进行格式化显示 左对齐.右对齐.居中对齐 保留数字有效位数 2.你学过的字符串格式化 ...

  6. Linux 安装MySql——ubuntu版

    这里简单地阐述一下rpm.deb.tar.gz的区别. rpm格式的软件包适用于基于Red Hat发行版的系统,如Red Hat Linux.SUSE.Fedora. deb格式的软件包则是适用于基于 ...

  7. C/C++指针函数和函数指针

    一.指针函数 当一个函数声明其返回值为一个指针时,实际上就是返回一个地址给调用函数,以用于需要指针或地址的表达式中. 格式: 类型说明符 * 函数名(参数) 当然了,由于返回的是一个地址,所以类型说明 ...

  8. 今天来聊Java ClassLoader

    背景 类加载机制作为一个高频的面试题经常会在面试中被问到,前几天一个电话面试就问到,之前有了解过,但是没有梳理成自己的体系,所以说的有点凌乱,今天花点时间整理一下,分享给大家同时自己也好好梳理一下,顺 ...

  9. DedeCms常用内容调用标签实例大全

    一.调用顶级栏目标签 <a href="{dede:global.cfg_cmsurl/}/" class="ahov">首页</a> ...

  10. Linux 下实践 VxLAN:虚拟机和 Docker 场景

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复 「1024」 即可领取,欢迎大家关注,二维码文末可以扫. 在上篇文章 ...