Basic Side Scrolling Game 2 ต่อ

จากตัวอย่างที่แล้ว 

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

ภายในซิมโบลตัวละครของเรา เราสร้างซิมโบลสี่เหลื่ยมขึ้นมาแล้วใส่ชื่อ instance เข้าไปแล้ววางตำแหน่งประมาณนี้ กล่องพวกนี้เราเอาไว้ให้ตัวละครของเราเช็คชนด้านต่างๆ

ตรงคีย์เฟรมแรกในตัวละคร ประกาศตัวแปรนี้ลงไป

var VelY = 0; // แรงเฉื่อยแนว Y

var VelX = _x; // แรงเฉื่อยแนว X

var OnAir = true; // ตัวแปรไว้เก็บค่าสำหรับเช็คว่าลอยอยู่กลางอากาศหรือเปล่า

ตรงซิมโบลกล่องสี่ส้มๆคือตัวเช็คชน สร้างเฟรมที่ 2 แล้วใส่คำสั่ง

_root.BlockList[_root.NumBlock] = this;

_root.NumBlock += 1;

stop();

เว้นเฟรมแรกไว้เฉยๆนะ

กลับมาดูที่ scene หลักสร้างฟังชั่นสำหรับเช็คชน 

function WorldCheck(obj) {

obj.OnAir = true;

obj._y += obj.VelY;

obj._x += (obj.VelX-obj._x)/10;

for (i=0; i<_root.BlockList.length; i++) {

if (obj.Bfloor.hitTest(_root.BlockList[i])) {

obj._y = _root.BlockList[i]._y;

obj.OnAir = false;

}

if (obj.Bhead.hitTest(_root.BlockList[i])) {

obj.VelY = Gravity;

}

if (obj.Bleft.hitTest(_root.BlockList[i])) {

obj.VelX = obj._x;

obj._x = obj._x+(2*obj._xscale/Math.abs(_xscale));

}

if (obj.Bright.hitTest(_root.BlockList[i])) {

obj.VelX = obj._x;

obj._x = obj._x-(2*obj._xscale/Math.abs(_xscale));

}

}

if (obj.OnAir) {

obj.VelY += _root.Gravity;

}

}

ที่ต้องสร้างเป็นฟังชั่นเพราะเผื่อไว้ให้พวกตัวละครอื่นๆ หรือ NPC ไว้เช็คชนด้วย

player คือชื่อ instance ของซิมโบลตัวละครเรา

ตรง Frame 1

var Speed:Number = 5;

var BlockList:Array = new Array(); // ตัวแปรไว้เก็บ list ของตัวเช็คชน

var Gravity = 1;

var NumBlock = 0;

เว้นเฟรมแรก 1 เฟรมแล้วสั่ง stop ที่ frame 2 เพราะว่าเอาไว้ประกาศตัวแปรเริ่มต้น

เช่น HP MP SP mana อะไรต่อมิอะไรที่เกมใช้และฟังชั่นต่างๆเป็นส่วน Initialize

onEnterFrame = function () {

if (Key.isDown(Key.LEFT)) {

_root.player._xscale = 100; 

_root.player.VelX -= Speed;

_root.player.gotoAndPlay("run");

}

if (Key.isDown(Key.RIGHT)) {

_root.player._xscale = -100;

_root.player.VelX += Speed;

_root.player.gotoAndPlay("run");

}

if (Key.isDown(Key.UP)) {

if (!_root.player.OnAir) {

_root.player.VelY = -20;

_root.player.OnAir = true;

}

}

if (_root.player._x>=800) {

_root.player._x = 10;

_root.player.VelX = _root.player._x;

_root.NumBlock = 0;

_root.nextFrame();

}

if (_root.player._x<=0) {

_root.player._x = 790;

_root.player.VelX = _root.player._x;

_root.NumBlock = 0;

_root.prevFrame();

}

_root.WorldCheck(_root.player);

//เรียกใช้ฟั้งชั่นเช็คชนที่เราทำไว้ ใส่ชื่อของตัวละครเราเข้าไป สำหรับพวก NPC อื่นๆ ก็แค่ประกาศ//ชื่อ instance ซะแล้วส่งค่าไปแบบ player นี้แหละ

};

http://www.ziddu.com/download/14575002/BasicSideScrollingPart2.rar.html

โหลดตัวอย่างไปดูดีกว่า

Basic Side Scrolling Game

เริ่มต้นด้วยของที่ง่ายสุดๆกับ การควบคุมตัวละครแนวแกน X หรือที่เรียกว่าเกมแนวมาริโอ้นั้นเอง นี่เป็นตัวอย่างที่ง่ายที่สุด

เอาของง่ายๆไปก่อนละกันนะคับ คือผมเชื่อว่ามีหลายคนกำลังมองหาอะไรคล้ายๆแบบนี้ แต่ในตัวอย่างต่อไปเราจะเพิ่มพวก Physic การเช็คชน และแรงโน้มถ่วงเข้าไป ตัวละครของเราจะได้กระโดดได้



var Speed:Number = 3;
onEnterFrame = function () {
if (Key.isDown(Key.LEFT)) {
_root.player._xscale = 100;
_root.player._x -= Speed;
_root.player.gotoAndPlay("run");
}
if (Key.isDown(Key.RIGHT)) {
_root.player._xscale = -100;
_root.player._x += Speed;
_root.player.gotoAndPlay("run");
}
};

โคทมีแค่นี้เอง พิมใส่ในเฟรมแรกของเรา อย่าลืมเซตเฟรมเรตไว้สัก 50 นะภาพจะได้ลื่นๆตา

_root.player คือ ชื่อ instance ที่เราตั้งให้ตรง properties

โหลดตัวอย่างไปเปิดดูเลย ครับ ในนี้ผมโพสคร่าวๆ คือเราจะไม่เน้นพาทำทีละขั้นแต่จะให้ค่อยๆแจกตัวอย่างให้ไปเปิดดูประกอบกันเองเลยเป็นวิธีที่ง่ายสุด

http://www.ziddu.com/download/14492685/BasicSideScrolling.rar.html  โหลดตัวอย่างไปลอง

เตรียมการแจก

ช่วงนี้งานยุ่งมากๆ งานเก่าๆ พวก Flash ก็มีน้องเข้ามาถามมาขอซอสโคทขอวิธีทำบ้าง เลยกะว่าจะเอาทั้งหมดที่มีมาอัพโหลดแจกเป็น tutorial ให้พี่ๆน้องๆที่สนใจนำไปศึกษาต่อยอดกันต่อไป แต่ต้องขอเวลาเตรียมการแปปนึงก่อนอื่นตอนนี้ก็เตรียมหมวดหมู่และเคลียขยะออกไปจากหน้าเวบให้หมด

เริ่มต้นจาก Flash

คนส่วนใหญ่มักจะมีคำถามประจำกันว่า อยากทำเกมจะเริ่มจากอะไรดีคับ ควรใช้โปรแกรมอะไร ต้องเรียนภาษาอะไรเพิ่มเติมบ้าง ต้องเก่งคณิตไหม สำหรับผมนั้นจริงๆแล้วตอนที่หัดทำเกมแรกๆก็ไม่ได้คิดอะไรมากขนาดนั้น ผมคิดแค่อะไรก็ได้ ขอให้มันเป็นเกมแล้วบังเอิญผมก็มาพบกับ Flash สุดยอดโปรแกรมสารพัดประโยชน์ ซึ่งผมก็อยากจะแนะนำสำหรับใครที่สนใจอยากลองทำเกมดูสักครั้ง ให้เริ่มจาก flash นี่แหละดีที่สุดเพราะคุณจะได้เรียนรู้ทั้งคอนเซปและวิธีการในการทำงานทั้งหมด โดยเฉพาะการเขียนโปรแกรม ซึ่งสำหรับเกมแล้วเป็นสิ่งที่ขาดไม่ได้เลยครับและแน่นอนว่ามันก็จะมีพวกคณิตศาสคร์สูตรคำนวนต่างๆ ตามมา แต่ อย่าเพิ่งไปกังวลอะไรตรงนั้นครับเพราะว่า เมื่อคุณเริ่มเรียนรู้จากการทำงานจริงๆซึ่ง flash นี่แหละคือการสอนให้เราได้ลองหยิบลองจับอะไรที่เป็นรูปธรรมจริงๆ แบบว่าเห็นภาพเขียนคำสั่งตรงนี่้ ก็ทำงานได้ทันที ไม่เหมือนการไปนั่งเริ่มต้นเรียนพวกภาษา C Java อะไรอื่นๆที่นอกจากจะยากเกินไปสำหรับผู้เริ่มต้นแล้ว แถมยังมองไม่ค่อยออกว่ามันใช้ทำอะไร มีแต่ Hello World อยู่เรื่อยไป เหมือนสมัยที่เราเรียนคณิตศาสตร์ตอนมัธยม พวกวิชาตรีโกณที่แสนยากเย็นการคำนวนมุมองศา สูตรต่างๆ ในเวลานั้นไม่รู้เลยว่ามันเอาไปทำอะไรได้บ้าง เรียนไปจบมาก็ลืม แต่การได้ลองทำงานจริงอย่างเช่นเขียนเกมด้วย Flash อย่างที่บอกเราจะต้องเจอเข้าสักวันกับปัญหาที่ว่า ทำยังไงดีน้า ให้ไอ้ภาพนี้มันหันหน้าตามเมาส์ ทำยังไงดีให้มันเคลื่อนที่เป็นรูปวงกลม เมื่อถึงตอนนั้นคุณจะค่อยๆเริ่มมองหาวิธีและคุณจะต้องใช้สูตรคณิตศาสตร์เข้าแก้และถึงเวลานั้นคุณก็จะค่อยๆเข้าใจความหมายของมันไปแบบไม่รู้ตัว ไม่ใช่ความเข้าใจแบบการท่องหนังสือก่อนเข้าห้องสอบแต่เป็นความเข้าใจแบบลึกซึ่ง เพราะคุณได้เอามันมาใช้จริงๆ 

สำหรับโปรแกรม Flash ที่ผมอยากแนะนำให้ได้ลองใช้ก่อน คือ Flash 8 ครับ หลายคนอาจบอกว่ามันเก่ามากเลยนะนั้น สำหรับส่วนตัวแล้วก็ลองใช้มาเยอะผมรู้สึกว่าเวอชั่นนี้เป็นเวอชั่นที่สมบูรณ์มากที่สุด เสถียรมากที่สุด ไม่แฮ้ง ไม่ค้าง ไม่ทรยศผู้ใช้แน่นอน เพราะเนื่อหาของผมมีปัญญาสอนแค่ ActionScripts 2.0 เท่านั้นเลยไม่เห็นความจำเป็นต้องใช้เวอชั่นที่สูงกว่านี้ให้หนักเครื่องเปลืองแรมเปลืองฮาทดิส อีกทั้งเพื่อความคล่องแคล่วในการใช้งาน ขอบอกมันพริ้วจริงๆนะครับเวอชั่นนี้  หากหามาลงได้ก็จะดีมาก แต่ถ้าใครมีเวอชั่นสูงกว่านี้ก็ไม่ว่ากันเอาเป็นว่าแล้วแต่ถนัดครับผม