pixi.js(入门)
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(入门)的更多相关文章
- HTML5游戏开发引擎Pixi.js新手入门讲解
在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...
- HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析
前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...
- (原)用pixi.js 实现 方块阵点击后原地自转效果
源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法? PS:问题已经解决,谢谢评论的大神@Antineutrino ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 让hammer完美支持Pixi.js - 2D webG库
由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...
- 利用pixi.js制作精灵动画
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...
- pixi.js教程中文版--基础篇
前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
随机推荐
- 四、XML语言学习(1)
XML语言 1.XML是什么?XML是指可扩展标记语言XML是指可扩展标记语言(eXtensible Markup Language),它是一种标记语言,很类似HTML.它被设计的宗旨是传输数据,而非 ...
- linux主要目录
/:根目录,一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home ,其实是在告诉电脑,先从 / (根目录)开始,再进入到 home 目录/ ...
- Python学习之旅(三十二)
Python基础知识(31):图形界面(Ⅱ) Python内置了turtle库,可以在计算机上绘图 运动控制: 1.画笔定位到坐标(x,y):turtle.goto(x,y) 2.向正方向运动 dis ...
- css学习_css定位
1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute (拼爹型: ...
- Prometheus监控学习记录
官方文档 Prometheus基础文档 从零开始:Prometheus 进阶之路:Prometheus —— 技巧篇 进阶之路:Prometheus —— 理解篇 prometheus的数据类型介绍 ...
- Postman 进阶(pre-request scripts&test script)
Postman 进阶 1. pre-request scripts pre-request scripts是一个关联了收藏夹内request,并且在发送request之前执行的代码片段.这对于在r ...
- 点击图片img提交form表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- pycharm新建py文件时,自动补充文件头注释信息
步骤: 1.File -->Settings 2.选择 File and Code Templates -> Files -> Python Script 文件头注释信息代码样式: ...
- Python 运维
1.python解释器提供提供的小工具 1.1 一秒钟启动一个下载服务器 进入要下载文件的目录(shift+鼠标右键可以很快的在当前目录打开一个cmd) python2: python2 -m Sim ...
- [js]面向对象2
delete删除属性 删除对象的属性 删除未用var定义的变量. delete返回布尔 删除不存在的属性,返回true 无法删除原形中的属性 如 delete obj.toString() resu= ...