.png)
ActionScript 3.0: Creating Simple MiniMap
Untuk kali ini saya akan membahas yang simpel-simpel aja…
Yap, sesuai judulnya, di sini akan dijelaskan bagaimana membuat sebuah minimap dalam game namun yang simpel aja. Maksudnya simpel yaitu ya background map ya polosan doank (bisa diganti ama gambar sih) dan marker objectnya cuma berupa lingkaran kecil doank. Walaupun begitu udah lumayan lah daripada ga ada minimapnya , dan dari sini juga bisa dikembangin jadi minimap yang lebih kompleks (kalo mau)…
Code
Ga perlu panjang lebar lagi, langsung aja kita masuk ke codingannya
MiniMap.as
1: package
2: {
3: import flash.display.Sprite;
4:
5: public class MiniMap extends Sprite
6: {
7: private var myMainClass:Main;
8:
9: private var miniMapBGLayer:Sprite;
10: private var objectLayer:Sprite;
11:
12: private var bg:Sprite;
13:
14: private var objectArray:Array = new Array();
15:
16: private var scaleFactorX:Number;
17: private var scaleFactorY:Number;
18:
19: public function MiniMap(objectArray:Array, mainClass:Main)
20: {
21: myMainClass = mainClass;
22:
23: this.objectArray = objectArray;
24:
25: initLayer();
26: initBG();
27:
28: scaleFactorX = bg.width / myMainClass.stage.stageWidth;
29: scaleFactorY = bg.height / myMainClass.stage.stageHeight;
30: }
31:
32: private function initLayer():void
33: {
34: miniMapBGLayer = new Sprite();
35: addChild(miniMapBGLayer);
36:
37: objectLayer = new Sprite();
38: addChild(objectLayer);
39: }
40:
41: private function initBG():void
42: {
43: bg = new Sprite();
44: bg.graphics.beginFill(0x00ff00);
45: bg.graphics.drawRect(0, 0, 200, 100);
46: bg.graphics.endFill();
47:
48: miniMapBGLayer.addChild(bg);
49: }
50:
51: public function update():void
52: {
53: objectLayer.graphics.clear();
54:
55: for (var i:int = 0; i < objectArray.length; i++)
56: {
57: var x:Number = objectArray[i].x * scaleFactorX;
58: var y:Number = objectArray[i].y * scaleFactorY;
59:
60: objectLayer.graphics.beginFill(0xff0000);
61: objectLayer.graphics.drawCircle(x, y, 2);
62: }
63: }
64: }
65: }
7: variabel myMainClass, berhubung class ini perlu info mengenai stage.stageWidth dan stageHeight, dan yang punya info tesb tidak lain dan tidak bukan adalah mainclass Main, maka perlu dibuat dulu instance dari mainclass tsb
9: miniMapBGLayer, layer di mana bekgron dari map akan diletakkan.
10: objectLayer, layer di mana nantinya marker akan dibuat.
Kenapa harus dibuat layer2xan segala, alasannya biar ga perlu setting2x depth untuk child objectnya. Kalo dibikin layer kyk gini kan jelas siapa yang berada di atas siapa.
12: var bg, bekgron dari minimap
14: objectArray, jelas, menyimpan object2x yang akan ditampilkan berupa marker
16: scaleFactorX, skala panjang antara minimap dengan kondisi realnya
17: scaleFactorY, skala lebar antara minimap dengan kondisi real
28-29: scaleFactorX dan Y, untuk mendapatkan nilai dari keduanya cukup membagi saja masing2x panjang dan lebar map (object bg) dengan panjang dan lebar stage
32: method initLayer(). KIta inisiasi dulu layer2xnya tadi. Untuk layer yang posisinya paling bawah diinisiasi terlebih dahulu. Jadi pertama kita instantiate object miniMapBGLayer terlebih dahulu baru kemudian dilanjutkan dengan objectLayer
41: method initBG(), menginstantiate object bg dan menggambar sebuah rectangle untuk dijadikan sebagai bekgron dari minimap tsb
51: method update(), mengupdate minimap tiap frame, di sini tiap marker tidak dibuat sebagai object tersendiri, melainkan hanya sebuah circle yang digambar di objectLayer dengan drawing API bawaan flash.
Kelebihannya, jelas lebih ringan karena tidak membuat banyak object. Kekurangannya hanya bisa menggambar bentuk lingkaran dan kotak doank. Kalaupun mau membuat bentuk yang lebih kompleks juga bakalan lebih ribet.
Dan berhubung marker2x ini gak bisa digerakkan, maka metode yang dilakukan untuk update posisi adalah dengan: membuat marker –> delete all marker –> membuat marker lagi, dst. Dan untungnya di drawing API milik flash ini ada method clear() untuk membersihkan semua hasil gambar.
53: Seperti yang telah dijelaskan tadi, baris ini untuk menghapus marker yang sudah tergambar sebelumnya, sehingga tiap update, posisi marker akan berubah, dan seolah2x marker2x tsb bergerak.
57-58: mendefinisikan posisi x dan y untuk tiap2x marker, di mana nilai x dan y tersebut adalah nilai x dan y object di stage dikalikan dengan skalanya (scaleFactorX dan scaleFactorY)
60-61: menggambar lingkaran berwarna merah untuk tiap2x marker
Main.as
1: package
2: {
3: import flash.display.Sprite;
4: import flash.events.Event;
5:
6: public class Main extends Sprite
7: {
8: private var myBotVehicle:BaseVehicle;
9: private var botVehicleArray:Array = new Array();
10:
11: private var myMiniMap:MiniMap;
12:
13: public function Main():void
14: {
15: if (stage) init();
16: else addEventListener(Event.ADDED_TO_STAGE, init);
17: }
18:
19: private function init(e:Event = null):void
20: {
21: removeEventListener(Event.ADDED_TO_STAGE, init);
22: // entry point
23:
24: addEventListener(Event.ENTER_FRAME, update, false, 0, true);
25:
26: for (var i:int = 0; i < 10; i++)
27: {
28: myBotVehicle = new BaseVehicle(BaseVehicle.RED, this);
29: myBotVehicle.x = Math.random() * stage.stageWidth;
30: myBotVehicle.y = Math.random() * stage.stageHeight;
31: addChild(myBotVehicle);
32:
33: botVehicleArray.push(myBotVehicle);
34: }
35:
36: myMiniMap = new MiniMap(botVehicleArray, this);
37: myMiniMap.x = 0;
38: myMiniMap.y = stage.stageHeight - myMiniMap.height;
39: addChild(myMiniMap);
40: }
41:
42: private function update(event:Event):void
43: {
44: for (var i:int = 0; i < botVehicleArray.length; i++)
45: {
46: botVehicleArray[i].update();
47: botVehicleArray[i].getSteering().wander();
48: }
49:
50: myMiniMap.update();
51: }
52: }
53: }
36-39: Selanjutnya tinggal menginstantiate object miniMap tadi ke MainClass. Dan pada parameternya kita masukkan array dari object yang ingin dimasukkan dalam minimap, dalam kasus ini array yang digunakan adalah botVehicleArray.
Set posisi x dan y nya, dan inisiasi minimap selesai…
50: dan panggil method update pada minimap di mainloop game anda….
Preview
Donlot Source Code
Aneh, pas mau keluar stage, object kok mesti shaking dulu?
ReplyDeleteEmang bug kalo yg itu... dan kebetulan gw males ngebenerinnya... xD
Delete