วันอาทิตย์ที่ 5 มิถุนายน พ.ศ. 2554

การทำ Save game



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


_root.NAME = "test";
_root.NUM1 = 1;
_root.NUM2 = 2;
_root.NUM3 = 3;
_root.NUM4 = 4;

function SaveGame(savename) {
myLSO = SharedObject.getLocal(savename, "/");
myObj = {};
myObj.objArray = new Array(9);
myObj.objArray[0] = _root.NAME;
myObj.objArray[1] = _root.NUM1;
myObj.objArray[2] = _root.NUM2;
myObj.objArray[3] = _root.NUM3;
myObj.objArray[4] = _root.NUM4;
myLSO.data.myObj = myObj;
trace("saved !!");
}


function LoadGame(savename) {
myLSO = SharedObject.getLocal(savename, "/");
if (myLSO.data.myObj.objArray[0] != undefined) {
trace("loading succes!!");
_root.NAME = myLSO.data.myObj.objArray[0];
_root.NUM1 = myLSO.data.myObj.objArray[1];
_root.NUM2 = myLSO.data.myObj.objArray[2];
_root.NUM3 = myLSO.data.myObj.objArray[3];
_root.NUM4 = myLSO.data.myObj.objArray[4];
} else {
trace("loading fail!!");
}
}

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

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


วันศุกร์ที่ 3 มิถุนายน พ.ศ. 2554

ทำ particle ด้วยคำสั่ง attachMovie







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


attachMovie(ชื่อจาก link", ชื่อใหม่, Depth);




โคทของเราง่ายๆ



_root.attachMovie("ball", "ball"+BallNum, BallNum, {_x:spawner._x, _y:spawner._y});
BallNum += 1;




ในส่วนนี้ {_x:spawner._x, _y:spawner._y} คือการระบุค่าพารามิเตอจำเป็นเริ่มต้นให้ทุกๆอินสเตนที่เราปั้มออกมา ในตัวอย่างนี้คือพิกัดของซิมโบลที่instance ชื่อ spawner คือเราจะให้สิ่งที่เราจะปั่มออกมาพุ่งออกจากเจ้า spawner นี้


ball คือชื่อที่เราทำการ link มันมาจาก library เอาไว้เรียกใช้ด้วยคำสั่ง attachMovie


          วิธี link คลิกขวาที่ซิมโบลของเราในไลบรารี่ เลือกคำสั่ง Linkage



จากนั้น ตั้งชื่อ ในตัวอย่างนี้ชื่อว่า ball


กด ok เสร็จแล้ว




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


Download ตัวอย่าง

ใช้อะไรทำเกมดี

ไม่ว่าคุณจะใช้ภาษาหรือโปรแกรมอะไรก็ตาม สิ่งสำคัญๆที่เครื่องมือ หรือภาษาเหล่านั้นต้องทำได้คือ

1. การแสดงผลของภาพ สามารถเอารูปเข้าไปแสดงได้
2. การเคลื่อนที่ของภาพ หรือวัตถุ X Y Z
3. การเช็คชน
4. การควบคุมด้วยคีย์บอร์ทหรือเมาส์ หรืออื่นๆ

ถ้าทำหลักๆ 4 ข้อนี้ได้แค่นี้เราก็สามารถทำเกมง่ายๆได้แล้ว

การเคลื่อนที่แบบง่าย ( ตามเมาส์ )





การเคลื่อนที่ในบทนี้ผมจะนำเสนอวิธีพื้นฐานในการเคลื่อนย้ายวัตถุตามเมาส์ ตามสมการเส้นตรง
โดยหลักการง่ายๆของสมการเส้นตรงที่เราเอามาใช้คือ


ตำแหน่งเป้าหมาย - ตำแหน่งวัตถุ  


แค่นี้เองเรามาดูโคทกันว่ามันทำงานยังไง




VelX = ball._x;// ตัวแปรนี้เอาไว้เก็บค่าต่ำแหน่งเป้าหมายแนว x
VelY = ball._y;// ตัวแปรนี้เอาไว้เก็บค่าต่ำแหน่งเป้าหมายแนว y
delay = 10;
onEnterFrame = function () {
ball._x += (VelX-ball._x)/delay; //ตรงนี้คือที่เราเอาสมการเส้นตรงมาใช้
ball._y += (VelY-ball._y)/delay;


target._x = VelX;// ส่วนนี้ไม่มีไร แค่สั่งให้ซิมโบลที่ชื่อ instance ว่า target มีตำแหน่งเท่ากับพิกัดเป้าหมายของเรา
target._y = VelY;
};




onMouseDown = function () {// ฟังชั่นสำหรับเช็คการกดของเมาส์
VelX = _xmouse;
VelY = _ymouse;
};


โคททั้งหมดใน Frame 1 ก็มีแค่นี้




วันอังคารที่ 12 เมษายน พ.ศ. 2554

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 นี้แหละ


};




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






วันพุธที่ 6 เมษายน พ.ศ. 2554

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 ให้พี่ๆน้องๆที่สนใจนำไปศึกษาต่อยอดกันต่อไป แต่ต้องขอเวลาเตรียมการแปปนึงก่อนอื่นตอนนี้ก็เตรียมหมวดหมู่และเคลียขยะออกไปจากหน้าเวบให้หมด