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 ...
随机推荐
- 补充:CSS选择器样式的规范!
css----页面样式,美化页面 css样式的三个规则 1内联式:直接写在html标签中 <p style="color:red"> 直接对html标签使用 style ...
- Python学习之旅(二十八)
Python基础知识(27):常用内建模块(Ⅲ) 1.urlblib urllib提供了一系列用于操作URL的功能 url是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...
- Web开发——jQuery基础
参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
- npm笔记
#执行npm start时是运行的哪个js文件? 打开package.json看看scripts属性中start配置的是什么运行脚本,这里配置的就是你执行npm start时跑的脚本 #设置npm的源 ...
- listview添加数据
1. 添加数据: ListView1.ViewStyle:=vsReport; ListView1.Columns.Add; ListView1.Columns[0].Caption:='aaaa'; ...
- mybatis+oracle实现简单的模糊查询
第一种 concat select * from cat_table where cat_name like concat(#{catName},'%') --单个百分号 select * from ...
- springMVC(五): 通过 HandlerMapping 获取 HandlerExecutionChain
请求具体过程 一.HandlerMapping Interface to be implemented by objects that define a mapping between request ...
- pycharm中代码整体缩进
整体缩进 : 1.选中需要缩进的代码 2.Tab键 反向缩进: shift+Tab
- 在vue2.x项目中怎么引入Element UI
参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...
- linux----------linux下配置内网ip
1./etc/sysconfig/network-scripts/ifcfg-eth1 创建这个文件里面的内容如下 TYPE="Ethernet" BOOTPROTO=&quo ...