ดาวน์โหลดโปรแกรมฟรี
       
   สมัครสมาชิก   เข้าสู่ระบบ
ไทยแวร์รีวิว
 

รีวิว มาดูวิธีการทำให้ตัวละครในเกมส์เคลื่อนไหวพร้อมกับการยิงกระสุน [เขียนเกมส์ด้วย HTML5 Part 2]

มาดูวิธีการทำให้ตัวละครในเกมส์เคลื่อนไหวพร้อมกับการยิงกระสุน [เขียนเกมส์ด้วย HTML5 Part 2]

เมื่อ :
|  ผู้เข้าชม : 14,233
เขียนโดย :
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+%E0%B8%A1%E0%B8%B2%E0%B8%94%E0%B8%B9%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B8%A5%E0%B8%B0%E0%B8%84%E0%B8%A3%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%AA%E0%B9%8C%E0%B9%80%E0%B8%84%E0%B8%A5%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%AB%E0%B8%A7%E0%B8%9E%E0%B8%A3%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A2%E0%B8%B4%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%B0%E0%B8%AA%E0%B8%B8%E0%B8%99+%5B%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%AA%E0%B9%8C%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2+HTML5+Part+2%5D
A- A+
แชร์หน้าเว็บนี้ :

711_150225113025m4

หลังจากตอนที่แล้ว เราได้ทำการออกแบบเนื้อเรื่อง, รูปแบบการเล่น, ตัวละคร, ฉาก, ไอเทม รวมถึงการติดตั้งโปรแกรมสำหรับเขียน HTML5 และ JavaScript ในบทนี้เราจะอธิบายถึงการเขียนฟังก์ชั่นให้วัตถุในเกมส์เคลื่อนที่และการปล่อยกระสุนในเกมส์ เราลองมาเริ่มต้นเขียนโค้ดกันเลยนะคะ
บทความเกี่ยวกับ HTML5 อื่นๆ

หมายเหตุ  สำหรับใครที่พลาดบทเรียนที่แล้วสามารถคลิกอ่านได้ที่นี่  รีวิว อยากเขียนเกมส์ มือใหม่เขียนเกมส์ ต้องทำอะไรบ้าง [เขียนเกมส์ด้วย HTML5 Part 1] 


การเขียนฟังก์ชั่นให้ตัวละครเคลื่อนที่และการปล่อยกระสุน

โดยในบทนี้เราลองมาทำให้วัตถุในเกมส์เคลื่อนไหว เริ่มแรกให้เราเข้ามาที่ XAMPP เลือกโฟลเดอร์ htdocs จากนั้นสร้างโฟลเดอร์ game โดยภายในโฟลเดอร์ game ให้สร้างไฟล์ index.html ขึ้นมา 1 ไฟล์ จากนั้นทำการดาวน์โหลดไฟล์ phaser.js จัดเก็บไว้ที่เดียวกันกับ index.html ต่อมาก็สร้างไฟล์ main.js ขึ้นมา ซึ่งไฟล์นี้คือไฟล์ที่เราจะใช้ในการเขียนเกมส์ สรุปก็คือ ในตอนนี้โฟลเดอร์ game ของเราจะมี 3 ไฟล์ ได้แก่ index.html, phaser.js และ main.js สุดท้ายให้สร้างโฟลเดอร์ assets แยกออกมาอีกเพื่อไว้สำหรับเก็บไฟล์รูปภาพ

ถัดมาเราก็จะมาในส่วนของ HTML โดยการเพิ่มโค้ดลงในไฟล์ index.html จะมีการเรียกใช้ไฟล์ phaser.js และ main.js โดยที่เราจะมีการเขียน function config เพื่อกำหนดขนาดของหน้าจอ กำหนดการวางวัตถุต่างๆ ในเกมส์ให้พอดีกับหน้าจอ

Phaser Full Screen Mobile Example
//เป็นการเรียกใช้ไฟล์.js
//ส่วนที่เราจะใช้ในการโชว์ตัวเกมส์
//ส่วนที่เราจะใช้ในการโชว์ตัวเกมส์

จากนัันก็มาจัดการเตรียมรูปที่เราจะใช้ โดยจัดเก็บไว้ในโฟลเดอร์ assets ที่สร้างเอาไว้ก่อนหน้านี้

miniboss

miniboss.png

 

bg

bg.png

 

bird

pigbee.png

 

gun

gun.png

เมื่อเตรียมภาพเสร็จแล้ว ก็เริ่มลงมือเขียนโค้ดกันเลย โดยเปิดไฟล์ main.js ขึ้นมา แล้วพิมพ์โค้ดตามด้านล่างนี้ลงไป

var mainState = {
//ประกาศตัวแปรเป็น mainState มี 3 ฟังก์ชั่น
    preload: function() {
//preload เป็นฟังก์ชั่นที่จะทำงานก่อนเป็นอันดับแรก ใช้ในการโหลด ไฟล์ต่างๆ เข้าสู่เกมส์
    },
    create: function() {
//create เป็นฟังก์ชั่นที่ทำงานต่อจาก preload มีหน้าในการสร้างเกมส์ และ แสดง assets file ต่างๆ ที่โหลดเข้ามา
    },
    update: function() {
//update จะเป็นการเรียกใช้ฟังก์ชันการทำงานแบบถี่เช่น การชนของวัตถุในเกมส์
 
    }
};
 

mainState คือ State หลักทีใช้สำหรับเขียนฟังก์ชั่นการทำงานของเกมส์ ภายใน mainState ก็จะมี 3 ฟังก์ชั่น

  • preload จะทำหน้าที่โหลดไฟล์ต่างๆ (images, sound)
  • create จะทำหน้าที่ดึงไฟล์จาก preload มาโชว์บนหน้าจอ
  • update ไว้เขียนพวกฟังก์ชั่นการทำงานในเกมส์ ไม่ว่าจะเป็นเช็คการชนของวัตถุบนหน้าจอ

ต่อมาเราจะเขียนโค้ดเพื่อดึงไฟล์รูปภาพมาไว้ใช้ในเกมส์ โดยให้เพิ่มโค้ดด้านล่างเข้ามาไว้ใน preload

 game.load.image('miniboss','assets/miniboss.png');
 game.load.image('bg','assets/bg.png');
 game.load.image('pigbee', 'assets/pigbee.png');  
 game.load.image('gun','assets/gun.png');
//เป็นการโหลดไฟล์รูปภาพมาใช้ในเกมส์

หลังจากที่เราโหลดรูปภาพเรียบร้อยแล้ว ก็จะเริ่มที่การใส่ภาพพื้นหลังให้กับเกมส์ของเรา โดยการนำโค้ดด้านล่างไปเพิ่มในส่วนของ create กำหนดขนาดความกว้าง ความสูงของภาพให้เหมาะกับตำแหน่งของขนาดหน้าจอทั้งในแกน x และแกน y รวมทั้งกำหนดการเคลื่อนที่ของพื้นหลังในส่วนของ autoScroll 

this.bg = this.game.add.tileSprite(0, config.convertHeight(-448.5),game.stage.bounds.width, game.cache.getImage('bg').height, 'bg');
//tileSpriteเป็นการทำให้พื้นหลังเคลื่อนที่
         this.bg.tileScale.x = config.gameWidth/config.logicWidth;
//เป็นการกำหนดตำแหน่งแกน x
         this.bg.tileScale.y = config.gameHeight/config.logicHeight;
//เป็นการกำหนดตำแหน่งแกน y
         this.bg.autoScroll(config.convertWidth(-80),0);
//เป็นคำสั่งให้พื้นหลังเคลื่อนไหว

ผลลัพธ์ของการรันโค้ด
anigif3

เมื่อได้ฉากหลังแล้ว ต่อมาเราจะมาเริ่มใส่ตัว pigbee ซึ่งเป็นตัวละครหลักของเกมส์เรา โดยที่เราจะเปิดใช้ Physics ให้กับวัตถุ ซึ่งในเกมส์ตัว pigbee จะต้องมีการเคลื่อนไหวภายในเกมส์ มีการกำหนดความกว้าง ความสูงให้กับตัว pigbee และมีการ configsize ของตัว pigbee ตามที่เรากำหนดเอาไว้ โดยนำโค้ดด้านล่างมาใส่ต่อจาก bg ในฟังก์ชั่น create

game.physics.startSystem(Phaser.Physics.ARCADE);
//เป็นการเปิดใช้ระบบ Physics ให้กับวัตถุ (เปิดใช้คำสั่ง gravity)
        this.pigbee = this.game.add.sprite(config.convertWidth(100), config.convertHeight(245), 'pigbee');
        this.pigbee.width = 200;
//กำหนดความกว้าง 
        this.pigbee.height = 200; 
//กำหนดความสูง
        config.resizeB(this.pigbee);
//ปรับขนาดตามหน้าจอเกมส์
        game.physics.arcade.enable(this.pigbee);
//เป็นการใช้วัตถุให้สามารถเรียกใช้ฟังก์ชั่นได้
        this.pigbee.body.gravity.y = config.convertHeight(900);
//เป็นการทำให้วัตถุเกิดแรงโน้มถ่วง
        this.bird.body.collideWorldBounds = true;
//เป็นกำหนดให้วัตถุอยู่ในหน้าจอเกมส์
        this.bird.body.bounce.y = 0.5;
//ตั้งค่าให้วัตถุสามารถเด้งได้      

ผลลัพธ์ของการรันโค้ด
4

ส่วนตัว miniboss ซึ่งเป็นศัตรูของ pigbee ในเกมส์ของเรา นำโค้ดด้านล่างไปเพิ่มในส่วนของ create ต่อจาก pigbee โดยมีคำสั่งให้ Phaser เปิดใช้ Physics.ARCADE กำหนดให้ miniboss มีค่าเป็น true เพื่อไม่ให้เป็นค่าว่าง มีการกำหนดความกว้าง ความสูง ของ miniboss กำหนดการเคลื่่อนที่โดยใช้คำสั่ง tween และจะมีการ config ตำแหน่งในการเคลื่อนที่

 game.physics.startSystem(Phaser.Physics.ARCADE);
//เป็นการเปิดใช้ระบบ Physics ให้กับวัตถุ
        this.miniboss = game.add.sprite(config.convertWidth(1000),config.convertHeight (600), 'miniboss');
//เป็นกำหนดขนาดวัตถุ
          this.miniboss.enableBody = true;
//เปิดใช้วัตถุให้สามารถเรียกใช้ฟังก์ชั่นได้
          game.physics.arcade.enable(this.miniboss);
//เปิดใช้ระบบ Physics ให้กับ miniboss
          this.miniboss.width = 200; 
//กำหนดความกว้างของวัตถ
          this.miniboss.height = 200;
//กำหนดความสูงของวัตถุ
          config.resizeB(this.miniboss);
//ปรับขนาดตามหน้าจอเกมส์
game.add.tween(this.miniboss).to({y:config.convertHeight(300) }, 2000,
Phaser.Easing.Quadratic.InOut, true, 0, 1000, true); 
 //กำหนดการเคลื่อนที่ให้ miniboss     
 

ผลลัพธ์ของการรันโค้ด
 anigif1


เมื่อมีศัตรูแล้ว เราก็ต้องมีอาวุธไว้ต่อสู้ ใส่ตัวกระสุนให้กับ pigbee ของเราเอาไว้เพื่อยิงใส่ศัตรูในเกมส์ โดยจะกำหนดจำนวนกระสุนในการยิง กำหนดความกว้าง ความสูงให้กับลูกกระสุน ควบคุมการยิงโดนกดปุ่มคีย์บอร์ดที่ตัว z นำโค้ดด้านล่างนี้มาเขียนต่อจาก gun ในฟังก์ชั่น create

this.gun = game.add.group();
// สร้าง Group
        this.gun.enableBody = true;
//เปิดใช้วัตถุให้สามารถเรียกใช้ฟังก์ชั่นได้
        this.gun.physicsBodyType = Phaser.Physics.ARCADE;
//กำหนดให้ gun เปิดใช้ระบบ Physics 
        this.gun.createMultiple(100, 'gun');
//กำหนดจำนวนกระสุนในการยิง
this.gun.forEach(function(item) {
//สร้างฟังก์ชั่นกำหนดขนาดของกระสุน
           item.width =40;
//กำหนดความกว้างของกระสุน
           item.height = 20;
//กำหนดความสูงของกระสุน
            config.resizeB(item );  
//ปรับขนาดตามหน้าจอเกมส์
        },  this);
        var z= this.game.input.keyboard.addKey(Phaser.Keyboard.Z);
//กำหนดตัวแปรปุ่มยิงกระสุนเป็นปุ่ม z
        z.onDown.add(this.fire,this);
//กำหนดการยิงโดยใช้ปุ่ม z
 

ในส่วนของของ update จะเป็นการกำหนดการทำงานของเกมส์ ไม่ว่าจะเป็นการยิง การชน โดยในโค้ดส่วนนี้จะเขียนต่อจาก create โดยจะมีการเรียกใช้ให้กระสุนยิง miniboss และกำหนดการบินของ pigbee โดยกดปุ่ม spacebar

update: function() {
    if (this.pigbee.inWorld == false)
//เป็นการกำหนดให้ pigbee อยู่ในจอเกมส์
            this.restartGame();
            game.physics.arcade.overlap(this.gun,this.miniboss,this.collision, null,this);
//เป็นเรียกใช้การยิงกระสุน กับ miniboss
    var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
//สร้างตัวแปร spaceKey ให้มีค่าเท่ากับปุ่ม Spacebar
        if(spaceKey.isDown)
        {this..body.velocity.y = config.convertHeight (-300);
//กำหนดการบินของ pigbee โดยกดปุ่ม spacebar
        }
    },

ต่อมา เราจะมีตั้งค่าวิถีกระสุน โดยเริ่มจากการกำหนดให้กระสุนปล่อยออกจากตัว pigbee ยิงไปที่ miniboss จะกำหนดระยะการยิงที่ตำแหน่ง แกน x แกน yโดยจะเขียนฟังก์ชั่นใหม่ขึ้นมาสำหรับในการปล่อยกระสุนคือฟังก์ชั่น fire ซึ่งเขียนต่อจากฟังก์ชั่น update

//ฟังก์ชั่นยิงกระสุน
fire: function() {
var gg = this.gun.getFirstExists(false);
       if(gg){
        gg.reset(this.pigbee.body.x + 16, this.pigbee.body.y + 16);
    game.physics.arcade.velocityFromRotation(this.miniboss.rotation, 800, gg.body.velocity);
    }
        
  },

สุดท้ายสำหรับบทนี้ ให้เพิ่มฟังก์ชั่น restartGame ซึ่งจะทำงานเมื่อตัวละครในเกมส์ตายแล้วจบการเล่น ก็จะทำการวนกลับมาเล่นใหม่ โดยเขียนต่อจากฟังก์ชั่น fire

//กำหนดให้เกมส์กับมาเริ่มใหม่
restartGame: function() {
        game.state.start('main');
    }
   

ผลลัพธ์ของการรันโค้ดทั้งหมด

anigif4


ก็จบไปแล้วสำหรับการเขียนฟังก์ชั่นให้วัตถุเคลื่อนไหวพร้อมกับการปล่อยกระสุน เป็นอย่างไรไม่ยากอย่างที่คิดใช่ไหมคะ สำหรับในบทต่อไปจะเป็นการเขียนฟังก์ชั่นในเกมส์กันต่อ ซึ่งก็อาจจะเขียนยากขึ้นไปอีก ไว้พบกันใหม่ในบทต่อไปนะคะ

 


 

0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+%E0%B8%A1%E0%B8%B2%E0%B8%94%E0%B8%B9%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B8%A5%E0%B8%B0%E0%B8%84%E0%B8%A3%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%AA%E0%B9%8C%E0%B9%80%E0%B8%84%E0%B8%A5%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%AB%E0%B8%A7%E0%B8%9E%E0%B8%A3%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A2%E0%B8%B4%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%B0%E0%B8%AA%E0%B8%B8%E0%B8%99+%5B%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%AA%E0%B9%8C%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2+HTML5+Part+2%5D
แชร์หน้าเว็บนี้ :
Keyword คำสำคัญ »
 
 
 

รีวิวที่เกี่ยวข้อง

 


 

แสดงความคิดเห็น

ความคิดเห็นที่ 1
28 สิงหาคม 2558 16:16:44
Profile Pictureสมาชิก : Member
Comment Bubble Triangle
ผมได้รับแนวทางเยอะมากจากข้อมูลที่นำเสนอมาครับ แต่พอลองรันดูปรากฎว่ารันไม่ได้
ผมจึงคิดว่า อาจเป็นเพราะขาดไฟล์2ตัวนี้ด้วยหรือป่าวครับจากหน้า html
<script src="lib/ScaleManager2.js"></script>
<script src="Boot.js"></script> ขอความกรุณาแบ่งปันไฟล์นี้ให้ด้วยครับ
ขอบคุณครับ