1. 编程号首页

2d动画开发之PIXI开发

编程小号 • • 未分类

2d动画开发之PIXI开发简单的移动小游戏只要引入pixi.min.js就可以,如果要用spine动画(龙骨也支持导出spine格式的)就要引入pixi-spine.js如果还有声音的支持引入pixi-sound.js学习网址:-官网http://www.pixijs.com-入门资料https://github.com/kittykatattack/learningPixi…

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.οnresize=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>

　　

转载于:https://www.cnblogs.com/yiyi17/p/10554268.html

今天的文章2d动画开发之PIXI开发分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/32335.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注