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 ...
随机推荐
- 2016级算法第三次上机-B.Bamboo和巧克力工厂
B Bamboo和巧克力工厂 分析 三条流水线的问题,依然是动态规划,但是涉及的切换种类比较多.比较易于拓展到n条流水线的方式是三层循环,外层是第k个机器手,里面两层代表可切换的流水线 核心dp语句: ...
- HTML DOM--基础概述
DOM: Document Object Model(文档对象模型)的简写,那么,这是一种什么样的模型,简单点来说,就是将文档当成了一棵树.它独立于平台与语言,允许程序与脚本动态地访问.更新文档的结构 ...
- JAVA数据结构--AVL树的实现
AVL树的定义 在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为1,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下的时间复杂度都是.增 ...
- mAP(mean Average Precision)应用(转)
原文章地址来自于知乎:https://www.zhihu.com/question/41540197 1. precision 和 recall 的计算(没什么好说的,图片示例相当棒): 图1 图中上 ...
- 文献综述十四：基于Oracle11g的超市进销存管理系统设计与实现
一.基本信息 标题:基于Oracle11g的超市进销存管理系统设计与实现 时间:2016 出版源:技术创新 文件分类:对数据库的研究 二.研究背景 为超市设计开发的超市管理系统,采用的是 VC+ Or ...
- js面向对象（一）——封装
想写这个好久了,自己当时理解这个确实费了一番功夫,现在记录一下,哪怕对读者有一点点帮助,我也很开心,看着不爽大胆喷吧,我脸皮可厚了,闲话不说了,进入正题 ----------------------- ...
- thinkphp5+nginx的linux环境搭建
安装环境&工具安装php安装nginx运行服务器安装thinkphp安装Composer安装thinkphp配置nginx.conf配置php-fpm运行thinkphp注意事项 php7已经 ...
- Python爬虫抓取某音乐网站MP3（下载歌曲、存入Sqlite）
最近右胳膊受伤,打了石膏在家休息.为了实现之前的想法,就用左手打字.写代码,查资料完成了这个资源小爬虫.网页爬虫, 最主要的是协议分析(必须要弄清楚自己的目的),另外就是要考虑对爬取的数据归类,存储. ...
- 案例19-页面使用ajax显示类别菜单
1 版本一 版本只能在首页显示类别,当切换到了其它页面就不会显示 1 web层IndexServlet代码 package www.test.web.servlet; import java.io.I ...
- Linux下实现MySQL数据库自动备份
1.给mysql创建用户备份的角色,并且授予角色SELECT, RELOAD, SHOW DATABASES, LOCK TABLES等权限. mysql> create user 'backu ...