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 ...
随机推荐
- Mybatis连接配置文件详解
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...
- Codeforces 483 - A/B/C/D/E - (Done)
题目链接:http://codeforces.com/contest/483 A - Counterexample - [简单构造题] Your friend has recently learned ...
- Gradle依赖无法下载问题
之前一直在使用maven构建框架,对gradle还比较陌生.最近碰到依赖一直无法下载的问题.我采用了以下步骤进行排查: 1. 查看gradle本地仓库是否有依赖(肯定没有) 2. 查看私服是否有依赖( ...
- mysql in 排序 也可以按in里面的顺序来排序
SQL: select * from table where id IN (3,9,6);这样的情况取出来后,其实,id还是按3,6,9,排序的,但如果我们真要按IN里面的顺序排序怎么办?SQL能不能 ...
- zabbix报错排错大全
zabbix报错 https://www.cnblogs.com/losbyday/category/876878.html作者总结的很全棒 1.在启动zabbix-agent 时系统日志输出 PID ...
- ext 的controller中的refs的使用方法
通过ext api 可以知道ext 的controller中有个refs的属性,对于这个属性 文档上是这么说的:配置数组构建页面上的视图的引用. 我并看不懂,接下来说的是我对这个refs的理解. 对这 ...
- bootstrap 下拉菜单自动向上向下弹起
.别人的解决方案 2.别人的解决方案 3.我哒 div class="btn-group" style="margin-top:500px;" > < ...
- java框架之Hibernate(2)-持久化类&主键生成策略&缓存&事务&查询
持久化类 概述 持久化:将内存中的对象持久化到数据库中的过程就是持久化.Hibernate 就是用来进行持久化的框架. 持久化类:一个 Java 对象与数据库的表建立了映射关系,那么这个类在 Hibe ...
- 安装和使用ZFS
一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358
- pytorch预训练模型的下载地址以及解决下载速度慢的方法
https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...