How to create the game with Phaser framework (Part3)

หมวดหมู่ HTML5

บทนำ (Overview)

จากบทความที่แล้วกล่าวถึงการโหลด “/assets” เข้าไปใน “Game World” ของเรา (How to create the game with Phaser framework (Part2)) มาในคราวนี้เราจะลองทดสอบเรียกรูปภาพดังกล่าวที่โหลดไว้ผ่านหน้า “Web Browser

ขั้นตอน (Steps)

  1. เปิดไฟล์ “part3.html”
  2. ทดสอบเพิ่ม “game.add.sprite(0, 0, ‘star’);” ในส่วนของ “function create()” โดยมีพารามิเตอร์ดังนี้ 
    game.add.sprite(ตำแหน่งแกน x, ตำแหน่งแกน y, 'ชื่ออ้างอิง');

    โดย “ชื่ออ้างอิง” จะต้องสัมพันธ์กับชื่อที่ระบุในส่วนของ “function preload()”

  3. จะได้ “code” ทั้งหมดดังนี้ 
    <script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

function create() {

    game.add.sprite(0, 0, 'star');

}

function update() {
}

</script>
  4. ทดสอบเปิดใน “Web Browser” จะพบว่า รูปดาวสามารถที่จะแสดง (rander) ภายใน “Game World”ของเราได้game 4

    บทความที่เกี่ยวข้อง

ใส่ความเห็น