Game Programmer 22

Published on January 15th, 2013 | by gedebuk

2

Game dengan Starling-[Memasukan Image ke dalam Game]

part1-Setting Flash Develop dengan Starling

part2-Membuat Kerangka Dasar Game

part3-Memasukkan Image ke Dalam Game

Selamat malam teman”, setelah kemarin kita membuat kerangka untuk game kita,  sekarang kita akan mencoba memasukkan Image ke dalam game kita.

Image yang akan kita gunakan dapat di download di sini. Kalau sudah di download ekstrak file media.rarnya ke dalam folder game kita.

1

Coba buka folder Graphics di sana ada beberapa gambar yang akan kita gunakan, yaitu

  • bgWelcome
  • welcome_aboutButton
  • welcome_hero
  • welcome_playButton
  • welcome_title
gambar” di atas akan kita susun menjadi tampilan menu seperti gambar di bawah,

22
Nah, sekarang kita bisa memulai coding :D
Buka kembali flash develop dan project game kita. Lalu tambahkan baris” berikut :

  • Membuat class Assets

Buat class baru dengan nama Assets (untuk class yang ini propertiesnya cukup nama saja, jadi tidak punya base class dan constructor)

3

  • Menuliskan path/ letak gambar pada folder  
Pertama-tama,  hapus dulu constructor pada class Assets
public function Assets() 
		{

		}
lalu masukkan baris berikut di dalamnya
[Embed(source = "../media/graphics/bgWelcome.jpg")]
public static const BgWelcome:Class;
pada baris pertama kita mendefinisikan lokasi gambar yang kana kita pakai, lalu di baris kedua, kita membuat constanta yang nantinya akan kita gunakan untuk mengambil lokasi pada baris pertama.

tambahkan lagi beberapa baris berikut di bawahnya

[Embed(source = "../media/graphics/welcome_hero.png")]
public static const WelcomeHero:Class;
[Embed(source = "../media/graphics/welcome_title.png")]
public static const WelcomeTitle:Class;
[Embed(source = "../media/graphics/welcome_playButton.png")]
public static const WelcomePlayBtn:Class;
[Embed(source = "../media/graphics/welcome_aboutButton.png")]
public static const WelcomeAboutBtn:Class;
  • Buat variebel gameTextures

tambahkan baris berikut di dalam class Assets

private static var gameTextures:Dictionary = new Dictionary();
variabel gameTextures berfungsi untuk menyimpan gambar-gambar yang sudah di load oleh flash.
  • Buat function getTexture
buat function getTexture seperti di bawah
public static function getTexture(name:String):Texture
{
}
lalu tambahkan baris” berikut ke dalamnya
if (gameTextures[name] == undefined) 
{
var bitmap:Bitmap = new Assets[name]();
gameTextures[name]=Texture.fromBitmap(bitmap);
}
return gameTextures[name];
function getTexture berfungsi untuk menyimpan dan mengambil gambar ke dalam gameTextures.
  • Membuat class Welcome di dalam package Screens
Buat class baru dengan nama Welcome, lalu isikan properties package dengan nama Screens, Base Class dengan starling.display.Sprite, dan centang checkbox constructor

*package adalah istilah folder di dalam java
  • Mendeklarasikan objek dari class Welcome di dalam class Game
tambahkan baris berikut di dalam class Game
private var screenWelcome:Welcome;
pada baris di atas, kita mendeklarasikan objek screenWelcome dari class Welcome, karena class Welcome dan Game berbeda folder maka kita perlu menambahkan import import Screen.Welcome;
  •  membuat objek screenWelcome di dalam function onAddedtoStage
tambahkan baris” berikut di dalam function onAddedtoStage
screenWelcome = new Welcome();
this.addChild(screenWelcome);
screenWelcome.initialize();

baris pertama berfungsi untuk membuat objek screenWelcom, lalu di baris kedua, this.addChild befungsi untuk menambahkan objek ke dalam stage, lalu di baris tiga kita menjalankan function intialize yang ada di screenWelcome

  • Mendeklarasikan gambar dan tombol
buka class welcome, lalu tambahkan baris berikut
private var bg:Image;
private var title:Image;
private var hero:Image;

private var playBtn:Button;
private var aboutBtn:Button;
untuk mendeklarasikan gambar-gambar dan tombol-tombol  yang akan kita gunakan
  • Menambahkan event di constructor

tambahkan baris berikut di dalam constructor

this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedtoStage);

baris di atas berfungsi untuk menjalankan function onAddedtoStage saat objek ditambahkan ke Stage.

  • Membuat function onAddedtoStage

buat function onAddedtoStage, tambahkan juga baris-baris kode di dalamnya, seperti berikut

private function onAddedtoStage(event:Event):void
{
	trace("Welcome Screen Initalized");
	drawScreen();
}
  • Membuat function drawScreen

Lalu buat juga function drawScreen

private function drawScreen():void
{

}

setelah itu tambahkan baris berikut di dalamnya

bg = new Image(Assets.getTexture("BgWelcome"));
this.addChild(bg);
title = new Image(Assets.getTexture("WelcomeTitle"));
title.x = 440;
title.y = 20;
this.addChild(title);
hero = new Image(Assets.getTexture("WelcomeHero"));
hero.x = 80;
hero.y =  100;
this.addChild(hero);
playBtn =  new Button(Assets.getTexture("WelcomePlayBtn"));
playBtn.x = 500;
playBtn.y = 260;
this.addChild(playBtn);
aboutBtn = new Button(Assets.getTexture("WelcomeAboutBtn"));
aboutBtn.x = 410;
aboutBtn.y = 380;
this.addChild(aboutBtn);

perintah bg = new Image(Assets.getTexture(“BgWelcome”)); berfungsi untuk memasukkan gambar ke dalam objek bg melalui class Assets, lalu title.x title.y  berfungsi untuk menentukan koordinat gambar. perintah this.addChild memiliki fungsi sama seperti sebelumnya, yaitu memasukkan objek ke dalam stage.

  • Membuat function intialize

terakhir kita buat function intialize, dan isinya seperti berikut

public function initialize():void
{
	this.visible = true;						
}

Jika sudah coba jalankan index.html-nya, nanti di browser akan terlihat seperti gambar di bawah

22

Jika inging souce code dapat di download di sini.

sumber


Ikuti channel Gedebuk di Youtube untuk mendapatkan berbagai video tutorial pembuatan game! Klik saja tombol Subsribe di bawah ini.


Lebih suka tutorial tertulis seperti artikel ini?





About the Author



Back to Top ↑