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 ...

随机推荐

CocoaPods的PodSpec.json文件用法
最近有时候用最新的CocoaPod的第三方库,有时候发现CocoaPod.org能搜到那个Podfile,但是每次在终端Pod search xxx,每次都搜不到,原来是本地的Podspec没用更新, ...
如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？
代码: <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : < ...
java 使用idea将工程打成jar并创建成exe文件类型执行
https://blog.csdn.net/weixin_38310965/article/details/80392767
AC自动机模板题
AC自动机学习博客 AC自动机理解要点: 1)fail指针指向的是每个节点,在字典树上和这个节点后缀相同的最长单词,每次都这样匹配,必定不会漏过答案. 2)字典树建立后,会在bfs求fail阶段把字典 ...
用Laya制作简单的动画
(function () { var layaGameInit = window.layaGameInit || {}; var WebGL = Laya.WebGL; var Browser = L ...
使用 json_serializable (flutter packages pub run build_runner build) 问题
命令: flutter packages pub run build_runner build 使用 build_runner 生成 .g.dart 文件 flutter packages pub r ...
mybatis映射文件模板mapper.xml格式
1.定义基础的映射对象DO与数据库字段间的映射 <resultMap id="UserResult" type="UserDO"> <res ...
oracle12c之三控制PDB中CPU 资源使用
CPU资源隔离数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...
单元测试遇到的Mock重载方法问题
测试某个异常抛出情况,单元测试输出为验证Logger的一条记录,该异常情况日志记录LogInfo,但是LogInfo中平时都用一个参数,在catch这个异常时调用了两个参数的重载方法,导致一直Mock ...
判断弹出框存在（alert_is_ present）
系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了判断 alert 源码分析 class alert_is_present( ...

2d动画开发之PIXI开发

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

随机推荐

热门专题