2d动画开发之PIXI开发
简单的移动小游戏只要引入pixi.min.js就可以,
如果要用spine动画(龙骨也支持导出spine格式的)就要引入pixi-spine.js
如果还有声音的支持引入pixi-sound.js
学习网址:
- 官网http://www.pixijs.com
- 入门资料https://github.com/kittykatattack/learningPixi
- pixi中文翻译教程https://www.bookstack.cn/read/LearningPixi/loading/
- spine动画https://github.com/pixijs/pixi-spine
- 声音https://github.com/pixijs/pixi-sound
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {padding: 0; margin: 0}
body{
font-size: 12px;
}
#app{
width: 19.2rem;
height: 10.8rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -9.6rem;
margin-top: -5.4rem; }
</style>
</head>
<body style="background:black;">
<div id="app"></div>
</body>
<script>
function setHtmlFontSize() {
var w = document.body.getBoundingClientRect().width||document.documentElement.getBoundingClientRect().width;
var fontSize = ''
fontSize = w/1920*100
document.getElementsByTagName('html')[0].style.fontSize = fontSize+'px';
}
setHtmlFontSize()
window.onresize=function(){
setHtmlFontSize()
}
// document.getElementById('app').style.cursor="url('static/assets/images/default.png'),auto";
</script>
<script src="../pixi/pixi.min.js"></script>
<script src="../pixi/pixi-spine.js"></script>
<script src="../pixi/pixi-sound.js"></script>
<script> //设置别名
var Application = PIXI.Application;
var loader = PIXI.loader;
var Sprite = PIXI.Sprite;
var resources = PIXI.loader.resources;
var Container = PIXI.Container;
var Graphics = PIXI.Graphics; //实例化PIXI，并设置画布
var app = new Application({
width:1920,
height:1080,
antialias:true,
transparent:false,
resolution:1,
autoResize:true
}) //设置画布的rem，自适应画布
app.view.style.width = '19.2rem';
app.view.style.height = '10.8rem'; window.stage = app.stage;
// 设置画布全屏展示
// app.renderer.view.style.position = "absolute";
// app.renderer.view.style.display = "block";
// app.renderer.autoResize = true;
// app.renderer.resize(window.innerWidth,window.innerWidth/1920*1080)
// app.renderer.resize.width=window.innerWidth; document.getElementById('app').appendChild(app.view); //添加纹理，promise保证json文件load结束，然后执行下面的其他渲染及动画逻辑
new Promise((resolve, reject) => {
loader.add('question','static/content.json');
loader.add('resources','static/resource.json');
loader.load(() => {
let content = resources["resources"].data;
// console.log(content)
// console.log(content)
content.forEach(value => {
// console.log(value.key, value.path)
//添加其他资源
loader.add(value.key, value.path); // //监听image/audio
if(value.key.indexOf('image')>-1){
var newImg = new Image();
newImg.src = value.path;
newImg.onerror = function(e){
console.log(e);
}
}else if(value.key.indexOf('audio')>-1){
var newAudio = new Audio();
newAudio.src = value.path;
newAudio.onerror = function(e){
console.log(e)
}
} });
loader.load((l,r) =>{
// // window.res = r;
// console.log(l,r)
resolve(r)
});
loader.onError.add((e) => {
console.log("loader加载错误");
});
loader.onProgress.add((e) => {
// console.log("loader加载进程中");
// document.getElementsByClassName('runner')[0].style.width = e.progress*6.8/100+'rem'
});
loader.onComplete.add((e) => {
// console.log("loader加载完成");
}); })
})
.then(()=>{
// console.log(res)
setup(resources)
}) //加载的资源
function setup(res) { var gameScene;
window.res=res
window.question = res.question.data; /**
* 添加声音
*/
var bgSound = res.audio_Bg.sound
var rightSound = res.audio_right.sound
var wrongSound = res.audio_wrong.sound
var finishSound = res.audio_finish.sound
// bgSound.play() // 全部页面容器
var allPage = new Container();
app.stage.addChild(allPage) //开始
var startPage = new Container();
allPage.addChild(startPage)
//背景
var startBg = new Sprite.fromImage(res.image_startBg.url);
startPage.addChild(startBg); // btn按钮
var startBtnAnimationUI = new PIXI.spine.Spine(res.animation_btn.spineData)
var startBtnAnimation = startBtnAnimationUI.state.setAnimation(0,'animation',true)
startBtnAnimationUI.x=960;
startBtnAnimationUI.y=843;
startBtnAnimationUI.cursor = 'pointer'
startBtnAnimationUI.interactive = true;
startBtnAnimationUI.on('pointerdown',function(){
// console.log(1)
startPage.visible = false;
gameScene.visible = true;
bgSound.play()
bgSound.loop = true;
})
startPage.addChild(startBtnAnimationUI) //游戏页面
gameScene = new Container();
gameScene.visible = false;
allPage.addChild(gameScene); //背景
var bgImage = new Container();
var gameBg = res.question.data.sources[0].bgImage
var gameBgRes = res[gameBg.image.name].url;
var gameBg = new Sprite.fromImage(gameBgRes);
bgImage.addChild(gameBg);
gameScene.addChild(gameBg); //母鸡
var hen = new Container()
var exNoAnimationCon = new PIXI.spine.Spine(res.animation_animates.spineData);
let exNoAnimation = exNoAnimationCon.state.setAnimation(0, 'wait', true);
exNoAnimationCon.x = 960;
exNoAnimationCon.y = 543;
hen.addChild(exNoAnimationCon);
gameScene.addChild(hen); //鸡蛋
var eggs = new Container();
gameScene.addChild(eggs); //结果页
var result = new Container();
gameScene.addChild(result);
var resultBg = new Sprite.fromImage(res.image_resultAn.url);
//设置背景色
let rectangle = new Graphics();
rectangle.alpha = 0.5
rectangle.beginFill(0x1b1919);
rectangle.drawRect(0, 0, 1920, 1080);
rectangle.endFill();
rectangle.x = 0;
rectangle.y = 0;
let style = new PIXI.TextStyle({
fontFamily: "Arial",
fontSize: 80,
fill: "white",
stroke: 'yellow',
strokeThickness: 4,
dropShadow: true,
dropShadowColor: "#000000",
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
});
//设置文字
var resultText = new PIXI.Text('2',style)
resultText.position.set(1000,620) var resultTextOver = new PIXI.Text('Game over！',style)
resultTextOver.position.set(750,900) result.addChild(rectangle);
result.addChild(resultBg);
result.addChild(resultText);
result.addChild(resultTextOver);
result.visible = false; // 引入的数据 var eggEvent = []
var answers=['A','B','C','D']
for(let j=0;j<question.sources[0].answer.flags.length;j++){
let egg = new Sprite.fromImage(res[question.sources[0].answer.flags[j].image_name].url);
//坐标位置
egg.x = question.sources[0].answer.flags[j].x;
egg.y = question.sources[0].answer.flags[j].y; egg.startX = question.sources[0].answer.flags[j].x;
egg.startY = question.sources[0].answer.flags[j].y;
egg.answer = answers[j]
// console.log(question.sources[0].answer.flags[j].x)
//设置锚点位置为中心
egg.anchor.set(0.5);
eggEvent.push(egg);
//这个循环不行
// egg.interactive = true;
// 设置鸡蛋的抓取
// egg.on('pointerdown',eggPointerDown)
// egg.on('pointermove',eggPointerMove)
// egg.on('pointerup',eggPointerUp)
// egg.on('pointerupoutsize',pointerUpOutsize)
eggs.addChild(egg); } /**
* 测试得出map forEach 可以添加方法 for循环不可以
*/
eggEvent.map(function(value,index){
value.interactive=true;
value.on('pointerdown',eggPointerDown)
value.on('pointermove',eggPointerMove)
value.on('pointerup',eggPointerUp)
value.on('pointerupoutsize',pointerUpOutsize)
/**
*
*/
var appDomStyle = document.getElementById('app').style
var flag=false;
function eggPointerDown(ev){
flag = true;
var pointerPosition = ev.data.getLocalPosition(this.parent)
//鼠标位置与egg锚点的距离
this.posX = pointerPosition.x-this.x
this.posY = pointerPosition.y-this.y
// console.log(this.posX,this.posY)
appDomStyle.cursor = "url('static/assets/images/drag.png'),auto";
}
function eggPointerUp(ev){
flag = false;
appDomStyle.cursor = "url('static/assets/images/default.png'),auto";
// console.log(exNoAnimationCon.x)
// console.log(this.x)
// console.log(exNoAnimationCon.width/2)
console.log(this.answer)
if(Math.abs(exNoAnimationCon.x-this.x ) <= exNoAnimationCon.width/2 && Math.abs(exNoAnimationCon.y-this.y )<= exNoAnimationCon.height/2){
// alert(1)
if(this.answer==="A") {
rightSound.play()
exNoAnimationCon.state.setAnimation(0, 'right', true);
//禁止交互行为
eggs.children.forEach((item,index)=>{
item.buttonMode = false;
item.interactive = false; });
this.visible=false;
finishSound.play()
// bgSound.paused = true
exNoAnimationCon.state.addAnimation(0, 'finish', false); setTimeout(()=>{
bgSound.stop()
result.visible = true;
},6500) } else {
wrongSound.play()
exNoAnimationCon.state.setAnimation(0, 'wrong', false);
exNoAnimationCon.state.addAnimation(0, 'wait', true);
this.position.x = this.startX
this.position.y = this.startY
}
} else {
exNoAnimationCon.state.setAnimation(0, 'wait', true);
this.position.x = this.startX
this.position.y = this.startY
}
}
function pointerUpOutsize(ev){
flag = false;
appDomStyle.cursor = "url('static/assets/images/default.png'),auto";
}
function eggPointerMove(ev){
var pointerPosition = ev.data.getLocalPosition(this.parent)
// console.log(pointerPosition)
// console.log(flag)
if(flag) {
appDomStyle.cursor="url('static/assets/images/drag.png'),auto";
this.position.x = pointerPosition.x - this.posX;
this.position.y = pointerPosition.y - this.posY;
if(Math.abs(exNoAnimationCon.x-this.x ) <= exNoAnimationCon.width/2 && Math.abs(exNoAnimationCon.y-this.y )<= exNoAnimationCon.height/2){
// alert(1)
exNoAnimationCon.state.setAnimation(0, 'drag', true);
}else{
exNoAnimationCon.state.setAnimation(0, 'wait', true);
}
}
}
}) } </script>
</html>
2d动画开发之PIXI开发的更多相关文章
- Java进击C#——应用开发之WinForm开发
本章简言 上一章笔者介绍了关于WinForm环境.这一章笔者将继续讲WinForm.只不过更加的面向开发了.事实就是在学习工具箱里面的控件.对于WinForm开发来讲,企业对他的要求并没有那么高.但是 ...
- 应用开发之WinForm开发
本章简言 上一章笔者介绍了关于WinForm环境.这一章笔者将继续讲WinForm.只不过更加的面向开发了.事实就是在学习工具箱里面的控件.对于WinForm开发来讲,企业对他的要求并没有那么高.但是 ...
- Android 开发之 Android 开发的起步
前言 Android 开发的起步 我们可以先来看看百科上面怎么说? 百度百科上 Android的介绍 一.Windows环境下在线搭建Android环境. 1. 下载 Android开发工具. JD ...
- 新人大餐：2018最新Office插件开发之ExcelDNA开发XLL插件免费教学视频，五分钟包教包会
原始链接:https://www.cnblogs.com/Charltsing/p/ExcelDnaVideoCourse.html QQ: 564955427 先解释一下,为什么要做这个视频: 我在 ...
- bsp开发之OAL开发
windows ce 操作系统移植主要包含两个方面:一个是基于cpu级的.还有一个是基于开发板级的.cpu级的主要由微软或者芯片制造商来完毕.开发板级的移植主要是由OEM来完毕的,而OAL的开发正是O ...
- 多端开发之uniapp开发app
最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯 ...
- PDMS二次开发之PML开发一些常见查询语句
1.查找session 以及session number var !DBname DBname !db = object db(!DBname) !session = !db.lastsession( ...
- iOS开发之XMPPFramework开发基础介绍
1 使用iPhoneXMPP实例 2 修改xmppstream设置 3 基础协议的介绍 协议 协议简介 XEP-0009 在两个XMPP实体间传输XML-RPC编码请求和响应 XEP-0006 使能与 ...
- ESP32开发之Windows开发环境
电脑出了问题linux系统下的环境不知道怎么就挂了,在一次搭建,总是出错,没办法,只能在win10下一试. 1 下载交叉编译工具,最新版 找到并下载最新的工具链: https://dl.espress ...
随机推荐
- 2018 ICPC Asia Jakarta Regional Contest
题目传送门 题号 A B C D E F G H I J K L 状态 Ο . . Ο . . Ø Ø Ø Ø . Ο Ο:当场 Ø:已补 . : 待补 A. Edit Distance Thin ...
- Codeforces - tag::flows 大合集 [完坑 x14]
589F 题意:给出n个时间区间,每个区间挑定长的非连续区间,求不同个区间不存在时间冲突的最大定长,输出乘上n 二分图模型+二分长度,左顶点集为区间编号,右顶点集为时间编号(1...10000),汇点 ...
- python3 zip压缩
参考: https://docs.python.org/3/library/zipfile.html https://zhidao.baidu.com/question/149840976436638 ...
- openstf安装手记
一款基于nodejs+jade模板开发的手机群控框架,你可以在此基础上拿来测试设备,或者群操作等等. 主要核心技术在于如何在不root的情况下实时流畅录屏,以及远程操作手机. 官方git https: ...
- (转)Linux企业运维人员常用的150个命令分享
Linux企业运维人员常用的150个命令分享 原文:http://www.jb51.net/article/127014.htm 本文将向大家介绍Linux企业运维人员常用的150个命令,如有不足之处 ...
- Rational Rose2007下载和安装
网上关于Rational Rose2007安装包,网上找了一堆大多都是垃圾,最后找到一个可用的(带激活文件),保存在自己的网盘里,这里分享出来:https://pan.baidu.com/s/1bpb ...
- Java学习之路(三)：Java中的数组
数组的概述和定义的格式 数组的作用: 用来存储同种数据类型的多个值 数组的基本概念: 数组是存储同一种数据类型多个元素的集合.就相当于一个容器. 注意:数组既可以存储基本数据类型,也可以存储引用数据类 ...
- unittest之断言
在测试用例中,执行完测试用例后,最后一步是判断测试结果是 pass 还是fail,自动化测试脚本里面一般把这种生成测试结果的方法称为断言(assert).用 unittest 组件测试用例的时候,断言 ...
- 加载 Firefox 配置
有小伙伴在用脚本启动浏览器时候发现原来下载的插件不见了,无法用 firebug在打开的页面上继续定位页面元素,调试起来不方便 .加载浏览器配置,需要用 FirefoxProfile(profile_d ...
- hadoop集群搭建过程中遇到的问题
在安装配置Hadoop集群的过程中遇到了很多问题,有些是配置导致的,有些是linux系统本身的问题造成的,现在总结如下. 1. hdfs namenode -format出现错误:hdfs namen ...