我发现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. pymysql指南

    1 引言 mysql应该说是如今使用最为普遍的数据库了,没有之一,而Python作为最为流行的语言之一,自然少不了与mysql打交道,pymysql就是使用最多的工具库了. 2 创建库.表 我们先从创 ...

  2. 《SQL错题》

    (选择一项) A: B: C: D: 正确答案是 D                   (选择一项) A: B: C: D: 正确答案是 A           (选择一项) 8 A: B: C: ...

  3. Ubuntu启动Apache

    划重点:最重要的是找到一个文件--------startup.sh 如果你是按照百度上的方法下载的Apache2,那么就按照百度的方式来 但是异曲同工 如果你是自己在网上下载的Apache到的磁盘 找 ...

  4. Python3数据驱动ddt

    对于同一个方法执行大量数据的程序时,我们可以采用ddt数据驱动的方式,来对数据规范化整理及输出 一.需要使用python的ddt库,ddt,data,unpack方法 1.仅使用ddt和data,代码 ...

  5. input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法

    <el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...

  6. __int64与long long、long的区别

    首先来看一看int.long.long long的取值范围 int                  所占字节数为:4                   表示范围为:-2147483648~2147 ...

  7. Maven安装和配置环境变量

    Maven配置 1.下载 下载maven 3.5.4 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.5.4 ),下载完成后,解压到某个目录( ...

  8. 自定义SWT控件四之其它下拉框

    4.其它下拉框 4.1 添加联动二级多选择框(有添加按钮和删除按钮) package com.view.control.select; import java.util.ArrayList; impo ...

  9. WebGL简易教程(一):第一个简单示例

    目录 1. 概述 2. 示例:绘制一个点 1) HelloPoint1.html 2) HelloPoint1.js (1) 准备工作 (2) 着色器 (3) 顶点着色器 (4) 片元着色器 (5) ...

  10. <<Modern CMake>> 翻译 2.4 项目目录结构

    <<Modern CMake>> 翻译 2.4 项目目录结构 本节内容有点跑题.但我认为这是一个很好的方法. 我将告诉你如何规划项目的目录. 这是基于惯例,但将帮助您: 轻松阅 ...