2d动画开发之PIXI开发

简单的移动小游戏只要引入pixi.min.js就可以,

如果要用spine动画(龙骨也支持导出spine格式的)就要引入pixi-spine.js

如果还有声音的支持引入pixi-sound.js

学习网址:

- 官网http://www.pixijs.com

- API http://pixijs.download/release/docs/index.html

- 入门资料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 ...

随机推荐

干掉Vivado幺蛾子（1）-- Xilinx Tcl Store
目录 1. 安装Xilinx Tcl Store 2. 手动更新 2.1 下载库 2.2 修改环境变量参考文献: 最近在跟着高亚军老师的分析文章来学习Xilinx最近发布的<UltraFast ...
【杂记】linux下各种软件安装方法（持续记录）
1.安装jdk: 网上一堆说先从windows下压缩包,然后通过共享文件夹copy到linux系统里,然后解压安装,emmmmm 首先进入usr文件夹,新建java文件夹: mkdir java 直接 ...
L2-2 小字辈（25 分）
本题给定一个庞大家族的家谱,要请你给出最小一辈的名单. 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号.随后第二行 ...
js复习知识点
null和undefined具体在什么时候使用? 如果定义的变量准备用来保存对象,那么最好用将改变量初始化为null而不是其他值如果未定义的值可以用空字符 undefined是null派生出来的,所 ...
javascript 正则表达式校验方式写法
if(/[0-9]/.test(value)){return true; } if(/[a-z]/.test(value)){return true; } if(/[A-Z]/.test(value) ...
学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说 ...
MySQL where 表达式
where 条件表达式对记录进行过滤,如果没有指定where子句,则显示所有记录. 在where表达式中,可以使用MySQL支持的函数或运算符.
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
激活条件编译支持. @cc_on 备注 @cc_on 语句激活脚本引擎中的条件编译. 强烈推荐在注释中使用 @cc_on 语句,以使不支持条件编译的浏览器将您的脚本视为有效语法而接受它: /*@cc_ ...
StringUtils 中 isEmpty 和 isBlank 的区别
在项目的工作学习中经常用到了 apache commons 中的 StringUtils 的 isBlank 和 isEmpty 来判断字符串是否为空,这个方法都是判断字符串是否为空做判断的,以至于 ...
开启Unity项目中VS工程的属性面板
https://www.cnblogs.com/CodeGize/p/7859656.html Unity生成的VS工程一般是无法打开属性面板的.但是事实上,如果使用VS for unity,通过配置 ...

2d动画开发之PIXI开发

2d动画开发之PIXI开发的更多相关文章

随机推荐

热门专题