1.关于

一个关于HTML5 2D渲染引擎,它的独特之处在于其拥有了canvas回调功能的WebGL,速度快,能够兼容所有设备,简单得说也就是跨平台了,我用的开发工具是WebStorm

2.参考API

https://github.com/kittykatattack/learningPixi

3.基本使用

创建一个PIXI的实例,并展示出来,通常需要以下几步:

  1.创建一个画布 (render)

    Pixi的渲染器对象将默认为WebGL,

   renderer = new PIXI.CanvasRenderer(256, 256);  OR  renderer = new PIXI.WebGLRenderer(256, 256);
   renderer.view为<canvas>对象
  // 通过自动选择的方式创建画布(800x500)
  // 并设置背景为黑色(16进制),第三个参数(options对象)是可选的
  // 然后将其添加到body中
  var renderer = PIXI.autoDetectRenderer(800, 500, {backgroundColor : 0x000000});
document.body.appendChild(renderer.view);

  2.创建一个舞台 (stage)  

// 之后的对象都存在于舞台之上
var stage = new PIXI.Container();  

   3.创建一个精灵 (sprite)      

    // 使用图片方式创建背景精灵
var background = new PIXI.Sprite.fromImage('assets/img/back.png');

  4.把精灵加入画布

    // 将背景精灵放置于舞台之上
stage.addChild(background);
5.渲染 Container
  renderer.render(stage);

4.支持的动作

ActionMove
PIXI.action.MoveTo(x, y, time);
PIXI.action.MoveBy(x, y, time);

ActionScale
PIXI.action.ScaleTo(scale_x, scale_y, time);
PIXI.action.ScaleBy(scale_x, scale_y, time);

ActionRotate
PIXI.action.RotateTo(rotation, time);
PIXI.action.RotateBy(rotation, time);

ActionBlink
PIXI.action.Blink(count, time);

ActionFade
PIXI.action.FadeIn(time);
PIXI.action.FadeOut(time);

ActionSkew
PIXI.action.SkewTo(x, y, time);
PIXI.action.SkewBy(x, y, time);

ActionPivot
PIXI.action.PivotTo(x, y, time);
PIXI.action.PivotBy(x, y, time);

ActionTint
PIXI.action.TintTo(tint, time);
PIXI.action.TintBy(tint, time);

ActionSequence
PIXI.action.Sequence(actions);

ActionRepeat
PIXI.action.Repeat(action, count);

RepeatForever
PIXI.action.Repeat(action);

ActionDelay
PIXI.action.Delay(time);

pixi.js(入门)的更多相关文章

  1. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  2. HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  3. (原)用pixi.js 实现 方块阵点击后原地自转效果

    源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法?  PS:问题已经解决,谢谢评论的大神@Antineutrino ...

  4. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  5. 让hammer完美支持Pixi.js - 2D webG库

    由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...

  6. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  7. pixi.js教程中文版--基础篇

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

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

随机推荐

  1. Mybatis连接配置文件详解

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...

  2. Codeforces 483 - A/B/C/D/E - (Done)

    题目链接:http://codeforces.com/contest/483 A - Counterexample - [简单构造题] Your friend has recently learned ...

  3. Gradle依赖无法下载问题

    之前一直在使用maven构建框架,对gradle还比较陌生.最近碰到依赖一直无法下载的问题.我采用了以下步骤进行排查: 1. 查看gradle本地仓库是否有依赖(肯定没有) 2. 查看私服是否有依赖( ...

  4. mysql in 排序 也可以按in里面的顺序来排序

    SQL: select * from table where id IN (3,9,6);这样的情况取出来后,其实,id还是按3,6,9,排序的,但如果我们真要按IN里面的顺序排序怎么办?SQL能不能 ...

  5. zabbix报错排错大全

    zabbix报错 https://www.cnblogs.com/losbyday/category/876878.html作者总结的很全棒 1.在启动zabbix-agent 时系统日志输出 PID ...

  6. ext 的controller中的refs的使用方法

    通过ext api 可以知道ext 的controller中有个refs的属性,对于这个属性 文档上是这么说的:配置数组构建页面上的视图的引用. 我并看不懂,接下来说的是我对这个refs的理解. 对这 ...

  7. bootstrap 下拉菜单自动向上向下弹起

    .别人的解决方案 2.别人的解决方案 3.我哒 div class="btn-group" style="margin-top:500px;" > < ...

  8. java框架之Hibernate(2)-持久化类&主键生成策略&缓存&事务&查询

    持久化类 概述 持久化:将内存中的对象持久化到数据库中的过程就是持久化.Hibernate 就是用来进行持久化的框架. 持久化类:一个 Java 对象与数据库的表建立了映射关系,那么这个类在 Hibe ...

  9. 安装和使用ZFS

    一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358

  10. pytorch预训练模型的下载地址以及解决下载速度慢的方法

    https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...