บทนำ (Overview)
จากบทความที่แล้วกล่าวถึงการโหลด “/assets” เข้าไปใน “Game World” ของเรา (How to create the game with Phaser framework (Part2)) มาในคราวนี้เราจะลองทดสอบเรียกรูปภาพดังกล่าวที่โหลดไว้ผ่านหน้า “Web Browser
ขั้นตอน (Steps)
- เปิดไฟล์ “part3.html”
- ทดสอบเพิ่ม “game.add.sprite(0, 0, ‘star’);” ในส่วนของ “function create()” โดยมีพารามิเตอร์ดังนี้
game.add.sprite(ตำแหน่งแกน x, ตำแหน่งแกน y, 'ชื่ออ้างอิง');
โดย “ชื่ออ้างอิง” จะต้องสัมพันธ์กับชื่อที่ระบุในส่วนของ “function preload()”
- จะได้ “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>
- ทดสอบเปิดใน “Web Browser” จะพบว่า รูปดาวสามารถที่จะแสดง (rander) ภายใน “Game World”ของเราได้
บทความที่เกี่ยวข้อง
- How to create the game with Phaser framework (Part1) – Start Game World
- How to create the game with Phaser framework (Part2) – Function preload()
- How to create the game with Phaser framework (Part3) – Display Images
- How to create the game with Phaser framework (Part4) – Function create()
- How to create the game with Phaser framework (Part5) – Physics
- How to create the game with Phaser framework (Part6) – Collide
- How to create the game with Phaser framework (Part7) – Control
- How to create the game with Phaser framework (Part8) – Animation
- How to create the game with Phaser framework (Part9) – Star Shines
- How to create the game with Phaser framework (Part10) – Keep Star
- How to create the game with Phaser framework (Part11) – Count Score