Game Programmer 22

Published on April 3rd, 2013 | by gedebuk

Game dengan Starling[Load Gambar dari Sprite Sheet]

Pada artikel kali ini, kita akan mencoba untuk mengganti gambar yang kemarin sudah kita buat pada menu awal, dengan sprite sheet. Sprite sheet merupakan kumpulan dari gambar” berurutan, yang membentuk animasi. Dengan menggunakan spritesheet, kita dapat menghemat jumlah file yang ada, seperti pada gambar di bawah, gambar-gambar dari button yang sudah kemarin kita masukkan berada pada 1 spritesheet.

mySpritesheet

Selain spritesheet, kita juga butuh file xml, yang akan digunakan untuk menyimpan posisi dari gambar-gambar yang ada di dalam spritesheet.Supaya tidak panjang lebar, mari kita langsung buat game kita :)

  • Buat function untuk load gambar dari spritesheet
tambahkan baris berikut di dalam class Assets
private static var gameTextureAtlas:TextureAtlas;		

[Embed(source = "../media/graphics/mySpriteSheet.png")]
public static const AtlasTextureGame:Class;

[Embed(source = "../media/graphics/mySpriteSheet.xml", mimeType = "application/octet-stream")]
public static const AtlasXmlGame:Class;

public static function getAtlas():TextureAtlas
{
	if (gameTextureAtlas == null )
	{
	var texture:Texture = getTexture("AtlasTextureGame");
	var xml:XML = XML(new AtlasXmlGame());
	gameTextureAtlas = new TextureAtlas(texture,xml);
	}
	return gameTextureAtlas;
}
 beberapa baris pertama berfungsi untuk menentukan letak spritesheet dan xml di dalam folder  project. lalu function getatlas berfungsi untuk load gambar dari spritesheet.
  • hapus variabel yang sudah tidak diperlukan
karena gambar-gambar button sudah ada di dalam spritesheet, hapus baris berikut
[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;
  • mengganti cara load gambar pada main menu
Karena variabel gambar button sudah kita hapus, dan kita akan load gambar dari spritesheet, maka kita perlu mengganti function Assets.getTexture(“”), dengan Assets.getAtlas().getTexture(“”) dan menyesuaikan nama source gambar sesuai nama yang ada di dalam xml.
Buka class Welcome.as, lalu rubah isi dari function drawScreen, menjadi seperti berikut
private function drawScreen():void
{
	bg = new Image(Assets.getTexture("BgWelcome"));
	this.addChild(bg);
	title = new Image(Assets.getAtlas().getTexture("welcome_title"));
	title.x = 440;
	title.y = 20;
	this.addChild(title);
	hero = new Image(Assets.getAtlas().getTexture("welcome_hero"));
	this.addChild(hero);
	playBtn =  new Button(Assets.getAtlas().getTexture("welcome_playButton"));
	playBtn.x = 500;
	playBtn.y = 260;
	this.addChild(playBtn);
	aboutBtn = new Button(Assets.getAtlas().getTexture("welcome_aboutButton"));
	aboutBtn.x = 410;
	aboutBtn.y = 380;
	this.addChild(aboutBtn);
}
Jika sudah save semua file, lalu coba jalankan, sekarang gambar-gambar button sudah kita load melalui spritesheet. di artikel selanjutnya kita akan membuat animasi dari karakter utama game kita.

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



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑