HTML5GAME :: HTML5GAME

달력

82025  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

이것은 나에게 여러 번 일어났습니다. 다시 Phaser 오디오 딜레이에 직면 해 있습니다! 나는 준비가되어있다. 예술 자산이 들어가고 점수 판이 작동하며 내일 게임을 시작해야합니다! 빨리 배경 음악을 넣고 반복하십시오. 게임은 시작되지만 음악은 어디에 있습니까 ???


3 초 기다려 ...


거기는! 그것은 성가신 지연이지만 우리는 그것을 무시하기 위해 시작해야합니다. 그 밖의 무엇을 할 수 있습니까?


이제 마감 기한을 넘기지 않고 다시 물러나서 무슨 일이 일어나는지 살펴 보겠습니다. 나는 왜 음악을 미리 불러 들여서 지연시킬까요?


나는 당신에게 문제를 보여주기 위해 표본을 모았다. 다음은 일반적으로 음악을로드하는 코드입니다. 이미지가 정상 속도로로드되는 것을 볼 수 있도록 이미지를 배치합니다. 또한 타이머가 포함되어 있으므로 지연되기 전에 몇 초가 지나야하는지 확인할 수 있습니다.

sdsd

var StateMain = {

    preload: function() {

        game.load.audio("music", "audio/music.mp3");

        game.load.image("title", "images/Cool-Game-Title.png");

    },

    create: function() {

        this.secs = 0;

        //create the music

        var music = game.add.audio("music");

        //play the music

        music.play();

        //

        //

        //

        //put the title on screen

        var title = game.add.image(game.width / 2, game.height / 2, "title");

        title.anchor.set(0.5, 0.5);

        //make the timer text

        this.timeText = game.add.text(game.width / 2, 100, "0",{fill:'#ffffff'});

        this.timeText.anchor.set(0.5, 0.5);

        //start counting seconds

        game.time.events.loop(Phaser.Timer.SECOND, this.tick, this);

    },

    tick: function() {

     this.secs++;

        this.timeText.text = this.secs;

    },

    update: function() {}

}

그럼 여기서 뭐하는거야? 어쨌든이 Phaser 오디오 지연의 원인은 무엇입니까? 미리로드 된 경우에도 재생하는 데 몇 초가 걸리는 이유는 무엇입니까? 음, 나는이 게시물에서 오디오가 디코딩되어야 할뿐만 아니라로드 될 필요가 있음을 지적하는 몇 가지 해답을 발견했습니다. 브라우저가 재생되기를 기다리는 동안 브라우저가 수행하는 작업입니다.


Phaser는 음악 파일이 디코딩되었는지 여부를 감지 할 수 있습니다.

game.cache.isSoundDecoded('music');


이 함수는 진실 또는 거짓을 돌려 줄 것입니다. 따라서 우리가 사용할 수있는 솔루션은 stateLoad라는 별도의 상태에서 모든 것을 로드하는 것입니다.

사전로드가 완료되면 업데이트 기능을 사용하여 음악이 디코딩되었는지 확인합니다.

그렇다면 상태를 stateMain으로 전환합니다. 사용자가 게임을 시작한 후보다 로딩 화면에서 기다리는 것이 게임 업계에서 잘 받아 들여지고 있습니다.

일반적으로 로딩 화면에는로드 바 또는 일부 메시지가 포함되지만 기술적 인 예에서는 충분합니다.


var StateLoad = {

        preload: function() {

            game.load.audio("music", "audio/music.mp3");

            game.load.image("title", "images/Cool-Game-Title.png");

        },

        create: function() {

         //only fires after preload is done

            var statText = game.add.text(game.width / 2, 100, "Decoding....", {

                fill: '#ffffff'

            });

            statText.anchor.set(.5, .5);

        },

        update: function() {

         //check to see if the audio is decoded

            if (game.cache.isSoundDecoded('music')) {

                    game.state.start("StateMain");

                }

            }

        }

var StateMain = {

    preload: function() {

       //moved loading here to stateLoad

    },

    create: function() {

        this.secs = 0;

        //create the music

        var music = game.add.audio("music");

        //play the music

        music.play();

        //

        //

        //

        //put the title on screen

        var title = game.add.image(game.width / 2, game.height / 2, "title");

        title.anchor.set(0.5, 0.5);

        //make the timer text

        this.timeText = game.add.text(game.width / 2, 100, "0",{fill:'#ffffff'});

        this.timeText.anchor.set(0.5, 0.5);

        //start counting seconds

        game.time.events.loop(Phaser.Timer.SECOND, this.tick, this);

    },

    tick: function() {

     this.secs++;

        this.timeText.text = this.secs;

    },

    update: function() {}

}


결과는 다를 수 있지만 내 로컬 호스트에서 음악은 두 번째 테스트에서는 0으로, 첫 번째 테스트에서는 약 3에서 재생됩니다.


Posted by 마스터킹
|

대부분 우리가 Phaser에서 게임을 만들때 우리는 스프라이트, 텍스트 또는 버튼 같은 간단한 객체를 사용하고 있습니다. Phaser에 글쓰기를 정말 좋아하지만 플래시 게임을 만들 때 사용하지 않을 때가 있습니다. 수업 내에서 다양한 요소를 만들 수 있습니다. Phaser로는 똑같은 일을 할 수는 없지만 복잡한 대상을 만드는 함수를 만드는 것이 가능합니다. 복잡한 객체는 단순히 자식 요소가 포함 된 그룹을 설명하는 데 사용하는 구문입니다. 이런 식으로, 나는 기본적으로 내가했던 것과 똑같은 결과를 얻을 수있었습니다.


이 예제에서는 버튼 객체를 만드는 함수를 작성했습니다. 이 경우 Phaser 프레임 워크에 내장 된 버튼이 아니라 텍스트 필드와 스프라이트가 포함 된 그룹입니다. 이것은 필요한 버튼이 무엇인지 모르는 상황에서 유용하기 때문에 한 줄의 코드로 새로운 버튼을 제작 할수 있습니다.


나는 최근에 한 게임에서 우주선 내부의 글자와 다른 게임에서의 거품으로 된 글자로 알파벳을 배우는 아이들을 위해 쓰고있는 몇 가지 게임에 대해이 기술을 사용했습니다. 나는 단순히 makeBubble 또는 makeShip 함수를 작성하고 필요한 모든 것을 만들기 위해 알파벳을 반복했습니다.


이 기술을 사용하려면 4 가지 작업을 수행해야합니다.

1. 스타일 (텍스트, 색상, 크기, 프레임)에 대한 매개 변수가있는 함수 만들기

2. 그 스타일 선택을 반영하는 자식 요소 만들기 (스프라이트, 텍스트 필드)

3. 그룹을 만들고 그 안에 요소들을 넣으십시오.

4. 그 그룹을 객체로 반환한다.


makeButton 함수로이 작업을 수행하고 create 함수에 버튼을 만들었습니다.





var StateMain = {

    preload: function () {

     game.load.spritesheet("colors","images/colors.png",150,50);

    },

    create: function () {      

       var btnYes=this.makeButton("YES",1);

       btnYes.y=game.height*.25;

       btnYes.x=game.world.centerX;

       var btnNo=this.makeButton("NO",0);

       btnNo.y=game.height*.75;

       btnNo.x=game.world.centerX;

       this.statusText=game.add.text(game.world.centerX,game.world.centerY,"");

       this.statusText.fill="#ffffff";

       this.statusText.anchor.set(0.5,0.5);      

    },

    makeButton:function(text,color)

    {

     //create the back for the button

     var back=game.add.image(0,0,"colors");

     back.frame=color;

     //create the label for the button

     //and set the text to the text parameter passed down

     var label=game.add.text(0,0,text);

     back.anchor.set(0.5,0.5);

     label.anchor.set(0.5,0.5); 

     //create the group

     var buttonGroup=game.add.group(); 

     //add the sprite and the label to the group

     buttonGroup.add(back);

     buttonGroup.add(label); 

     //groups can not take input so we need to add the

     //listener for the click

     back.inputEnabled=true;

     back.events.onInputDown.add(this.buttonClicked,this);

     //return the group as the button

     return buttonGroup;

    },

    buttonClicked:function(target)

    {

     //since the target is the sprite

     //we get the parent of the target

     //

     var group=target.parent;

     //the label is the second child we added to the

     //group so we can find it at index 1

     //the back sprite is found at index 0

     var label=group.getChildAt(1); 

     this.statusText.text=label.text; 

    },

    update: function () {

    }

}


Posted by 마스터킹
|

모바일의 부상으로, 나는 더 자주 객체의 크기를 조정해야한다는 것을 알게되었습니다. 이것은 화면 크기의 차이를 보완하기위한 것입니다. 높이나 너비와 같은 속성 하나를 변경하는 것은 쉽지만 이미지 비율이 비례해야하는 것이 더 좋으므로 다음과 같은 공식이 필요합니다.

new_width = old_width*(new_height/old_height);


가로 세로 비율 유지하기

Phaser에서 걱정할 필요가 없습니다.스프라이트의 높이나 너비를 변경하면 스케일 객체 속성이 업데이트됩니다. 예를 들어 스프라이트의 너비를 변경하면 scale.x 속성이 변경됩니다.


너비를 변경하면 scale.x를 scale.y로 복사합니다.

mySprite.scale.y=mySprite.scale.x;


높이를 변경하면 반대로 하면됩니다.

mySprite.scale.x=mySprite.scale.y;



실제 샘플 코드 입니다.

var StateMain = {

 

    preload: function () {

     game.load.image("doughnut","images/doughnut.png");

    },

 

    create: function () {

        

     this.makeDoughnuts();

     game.input.onDown.add(this.makeDoughnuts, this);

    },

    makeDoughnuts:function()

    {

     for (var i = 0; i < 5; i++) {

     var doughnut=game.add.sprite(game.world.randomX,game.world.randomY,"doughnut");

 

     doughnut.width=game.rnd.integerInRange(50, 150);

     //when we change the width, we automatically change the scale.x

     //setting the scale.y to scale.x will make the

     //object proportional

     doughnut.scale.y=doughnut.scale.x;

     }

    },

    update: function () {

 

    }

 

}


Posted by 마스터킹
|