我发现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波-透视多行数据为多列数据结构

    在数据处理过程中,大量的非预期格式结构需要作转换,有大家熟知的多维转一维(准确来说应该是交叉表结构的数据转二维表标准数据表结构),也同样有一些需要透视操作的数据源,此篇同样提供更便捷的方法实现此类数据 ...

  2. Excel催化剂开源第9波-VSTO开发图片插入功能,图片带事件

    图片插入功能,这个是Excel插件的一大刚需,但目前在VBA接口里开发,如果用Shapes.AddPicture方法插入的图片,没法对其添加事件,且图片插入后需等比例调整纵横比例特别麻烦,特别是对于插 ...

  3. C++多小球非对心弹性碰撞(HGE引擎)

    程序是一个月前完成的,之前一直没正儿八经的来整理下这个程序,感觉比较简单,不过即使简单的东西也要跟大家分享下. 源码下载:http://download.csdn.net/detail/y851716 ...

  4. three出现状态200的报错

    报错代码如下: {status: 200, data: {…}} "sa_SpringUserFindOneView_findPbUserByUserId"header.vue?1 ...

  5. dz6.0的一个sql注入漏洞

    今天开始着手分析第一个漏洞,找了一上午靶机,发现一个含有成人内容的违法网站是用dz6.0搭的,今天就看看dz这个版本的洞了 问题函数位置:my.php第623行 if(is_array($descri ...

  6. TypeScript环境安装,以及配置idea开发环境

    安装前准备 安装typescript需要用到npm管理工具,而npm是随同Node.js一起安装的包管理工具,所以要先安装Node 1.前往Node官网下载最新版安装包:http://nodejs.c ...

  7. 二进制文件安装安装flannel

    二进制文件安装安装flannel overlay网络简介 覆盖网络就是应用层网络,它是面向应用层的,不考虑或很少考虑网络层,物理层的问题. 详细说来,覆盖网络是指建立在另一个网络上的网络.该网络中的结 ...

  8. 【POJ - 2456】Aggressive cows(二分)

    Aggressive cows 直接上中文了 Descriptions 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x ...

  9. spring实战学习笔记(一)spring装配bean

    最近在学习spring boot 发现对某些注解不是很深入的了解.看技术书给出的实例 会很疑惑为什么要用这个注解? 这个注解的作用?有其他相同作用的注解吗?这个注解的运行机制是什么?等等 spring ...

  10. Java课堂 动手动脑5

    1.了解棋盘打印:利用二维数组输出一个15*15的棋盘,棋盘的原素为“+”,就是输出一个横纵都是15个“+”的二维数组,然后再以坐标形式输入棋子“●”,替换掉原来棋盘里的“+”.再编写代码. 电脑随机 ...