How to create the game with Phaser framework (Part3)

บทนำ (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

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

ใส่ความเห็น