Poll

Do you find this tutorial useful?

Yup! Yup!
6 (100%)
Nope
0 (0%)

Total Members Voted: 6

Author Topic: Create a game with ActionScript 3 (Flash)  (Read 270 times)

0 Members and 1 Guest are viewing this topic.

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Create a game with ActionScript 3 (Flash)
« on: September 25, 2011, 12:35:00 PM »
Setelah lama sekali ane mengurungkan niat buat bikin tutorial ini, akhirnya ane bikin ini juga:

───────────────────────────────────────────────────────────────────────

FLASH GAME PROGRAMMING

───────────────────────────────────────────────────────────────────────


Pengantar (READ THIS FIRST)

Menyadari bahwa tutorial flash game programming hampir sulit dilakukan secara lisan, maka ane iseng bikin tutorial flash secara tertulis di sini juga, berhubung forum juga udah mulai rame :D
Well, sebenernya ane bukanlah seorang "master" atau "dewa". Ane cuma orang yang "bisa" bikin game pake flash. Dan di sini, ane mau berbagi ilmu buat siapa aja yang tertarik bikin game pake flash :D

Rencananya tutorial ini bakal ditulis part demi part, jadi yang mbaca nih tutorial bisa nyoba2 dulu, dan ane pun gak akan males ngetiknya ntar. Tapi tetap aja ane butuh feedback dari semuanya. Kalo responnya positif dan ternyata cukup banyak yang minat, ane bakal lanjutin part2, 3, 4, dan seterusnya. Mungkin bisa nyampe yang lebih advanced lagi, dan mungkin ampe bikin sebuah game yg bener2 jadi.
Kalo sebaliknya, ya ane gak akan update dulu sampe ada request :/

Harapannya, mudah-mudahan yang mbaca ini at least tau dasar-dasarnya buat bikin game flash, dan secara tidak langsung, membuat game dari scratch. Sekalian ane berharap mudah-mudahan tutorial ini bisa kembali menyentak orang lain buat berbagi ilmunya di sini >:D

So, first things first


KENAPAAAAAAAAAAA.... pake Flash?

Keunggulan dari Adobe Flash diantaranya:
1. Cross-platform. Sebuah movie yang dibuat menggunakan Adobe Flash bisa dibuka di komputer manapun asalkan diinstal flash player, tanpa peduli dia pake Windows, Linux, Mac, Solaris, dan DOS (i'm kidding about DOS of course)
2. Cocok buat bikin game-game kecil, dan cocok juga buat pemula yang ingin belajar game programming from scratch
3. Karena cocok buat game kecil, berarti cocok juga buat bikin game casual, yang notabene berjumlah sangat banyak di dunia ini
4. You can make what you want. Dengan flash, kita bisa bikin game apapun, genre apapun, dengan sistem apapun yang kita mau.
Tambahan dari Ruka:
Nice parah, dilanjutin gan o/

Tambahan kelebihannya kalian belajar Flash :

1. Dengan belajar programming AS3, kalian ga cuma hanya bisa main di platform Flash yang berbasis web. Kalian juga bisa nge-deploy langsung ke Adobe AIR, dan FYI game yang dibuat ke Adobe AIR itu juga bisa dimainkan di Platform IOS, Android, dll.

2. Ketika Flash Player 12 muncul, dia akan support native langsung ke hardware. Dengan kata lain, sekarang kita bisa main 3D (dengan baik) di Flash. Unity aja nanti di rilis barunya juga akan support nge-buat game yang bisa dimainin di Flash Player 12 o.o

3. Flash masih merupakan plugin yang sangat banyak disupport oleh pengguna internet (90%an?), dan portal game flash itu ada sangat banyak. Kalau kalian buat game berbasis flash, game kalian akan lebih mudah dimainkan oleh orang banyak.




Tapi tentu saja, ada beberapa kekurangan dari Flash:
1. Obviously gak cocok buat bikin proyek game dengan skala besar. Resource yang bisa dipakai oleh flash masih terbatas. Maksudnya, semakin besar/banyak asset atau komponen yang kita masukkan ke suatu game flash, semakin lambat pula gamenya.
2. Adobe Flash berbasis vektor, dan didesain untuk animasi yang berbasis vektor. Bukannya kita gak boleh masukin bitmap sih, hanya saja flash kurang efisien kalo dipake buat bikin animasi berbasis bitmap. (and yeah, some animu images are bitmap-based)
3. Ngga semua game flash bisa dimainkan di semua versi flash player. Tidak jarang kita mendapati error atau keanehan ketika kita mencoba memainkan game flash dengan flash player yang tidak terupdate
4. You may not be able to make what you want. Berkaitan dengan poin 1, karena resource yang bisa dimasukkan ke suatu game flash terbatas, otomatis kita akan kesulitan jika ingin membuat game dengan sistem yang kompleks. Game 3D, misalnya.


Useful Notes
1. Software2 yang kemungkinan akan dipake: Adobe Flash Professional CS3 (for now. Ane blom punya versi CS5 nya :( ) dan FlashDevelop 4.0. Adobe flash bisa minta ke gw, or someone. atau bisa juga beli depan salman. FlashDevelop bisa dilihat dan diunduh di sini: http://www.flashdevelop.org tapi dia butuh beberapa program yang harus diinstal terlebih dahulu semacam JRE 1.6, Flex SDK, etc. yang bisa diliat dan dibuka link donlotnya di sana. Tapi kalo malas donlot ya bisa minta ke ane semuanya.
 
2. Script yang akan dipake adalah ActionScript3, atau biasa disingkat AS3. Pertimbangan ane menggunakan script ini adalah karena AS3 merupakan yang paling banyak dipake sekarang. Tapi kalo emang dibutuhkan, ane bakal post juga versi AS2nya nanti. AS2 memang lebih mudah dipelajari daripada AS3, tapi AS2 memiliki kemampuan yang jauh lebih terbatas daripada AS3...

3. Help yang udah terintegrasi dengan Adobe Flash, beberapa dokumentasi dan tutorial2 di internet adalah temanmu di sini. Kalo ada yang sekiranya membingungkan, bisa dicari dulu di google atau di helpnya >:D
Informasi yang tertera di situ sudah sangat lengkap, jadi gak perlu khawatir.

4. Tutorial-tutorial ane tentu saja bukan 100% hasil kerja keras ane sendiri. Tutorial-tutorial di sini umumnya terinspirasi dari tutorial-tutorial flash yang sudah ada sebelumnya. Namun, sebagian besar terinspirasi dari tutorial-tutorial menyentak yang telah dibuat oleh Emanuele Feronato, seorang programmer flash dari Italia. Kalo mau lihat bisa kunjungi situsnya yang bikin tersentak di emanueleferonato.com


Requirements:
1. Semangat yang berapi-api
2. Waktu luang yang cukup
3. Komputer yang bisa dijalanin adobe flash atau flash develop
4. Programming background is recommended


Here comes the 1st chapter:

1. Hello World!.... Oh wait that's not it.
Difficulty: EASY

Read Chapter 1: ShowHide

Step 0: Siapkan semangat yang berapi-api
Langkah ini wajib dilakukan, karena hanya orang terpilih yang memiliki semangat berapi-apilah yang bisa ikut tutorial ini >:D

Step 00: Turning On Your Computer

*dihajar massa*
Hey, hey tenang dulu!! It's obvious isn't it? Gimana caranya coba kita bikin game pake flash kalo komputer kita ngga nyala :P

Oke, oke kali ini mulai serius

Step 000: Klik 2x di icon Adobe Fla.....*digebuk*

Iya, iya.... berisik amat sih. Serius nih gw


Step 1: Overview of Adobe Flash

Oke, jadi kita sudah mengklik 2x icon adobe flash di desktop...
Start with File--> New --> Flash File (Action Script 3.0). Ane bisa pastikan akan keluar tampilan seperti ini. Kalo yang keluar malah gambar aneh-aneh, apalagi blue screen berarti anda sedang tidak beruntung, nak.

Okay, sebelum kita maju ke game programming di Flash, ada baiknya kita mengerti beberapa konsep penting dalam Adobe Flash itu sendiri

Basic Tools: Peralatan2 yang bener2 standrad, like Box tool, Select tool, Line tool, fungsinya kurang lebih gak jauh beda dengan program2 image editor lainnya seperti Photoshop, Paint, dll. Karena kita di sini belajar coding, mungkin peralatan-peralatan ini bakalan jarang kita pakai

Layer: Dengan menggunakan sistem layer, kita bisa gambar suatu objek yg nimpa objek lain, tanpa menghapus objek yang ditimpa tersebut. Kegunaannya ya gak jauh beda lah sama photoshop.

Timeline: Di sini tempat kita ngatur flow dari suatu animasi. Timeline tersusun atas beberapa frame. Frame dibagi 3 lagi, ada yang namanya Keyframe, Blank Keyframe, dan tentu saja Frame biasaaaaa. Lebih detailnya:

Keyframe adalah yang dipake buat menyimpan data audio dan/atau visual, atau mungkin script. Gampangnya, misalkan di frame 1 ada keyframe berisi gambar :nah: dan di frame 2 ada keyframe berisi gambar :han: , playernya akan menampilkan gambar :nah: dulu, baru :han: .
Blank keyframe adalah keyframe yang belum terisi gambar/suara apapun. Biasanya dipake buat masukin script
Sedangkan frame biasaaaa adalah sebuah frame biasaaa, yang tidak bisa dimasukkan apapun. Fungsinya paling cuma sebagai skipper biasaaa aja

Library: Ini dipake buat menyimpan seluruh asset, berupa gambar, sprite, suara, video, simbol, dll. yang diperlukan buat animasi

Properties:

Title & Description: Self explanatory

Dimensions: Ukuran stage/animasi/movie dalam satuan pixel

Background color: Warna latar belakang

Frame rate: Menggambarkan jumlah frame yang digambar tiap 1 detik. Defaultnya 12 fps.


Step 2: Creating a hero character


Oke, jadi kita tadi udah baca sedikit mengenai konsep-konsep penting di flash. Dalam sebuah game biasanya terdapat karakter yang bisa kita kendalikan, atau bisa juga disebut hero. Kita akan menggunakan Oval Tool untuk membuat suatu karakter yang memiliki misi untuk menyelamatkan dunia dan menjaga manusia dari kepunahan yang menurut ramalan sudah ditakdirkan melawan iblis yang sudah menguasai dunia selama ratusan tahun, etc. etc. yang ternyata adalah sebuah.....

.....lingkaran.

Step 3: Making the hero to be a REAL hero

Langkah berikutnya adalah mengubah sang hero kita, yang berbentuk lingkaran, eh bener2 lingkaran maksudnya, menjadi sebuah Movie Clip. Untuk mengubahnya menjadi movie clip, klik kanan di lingkaran yang udah kita buat tadi lalu pilih Convert to Symbol... atau bisa juga dengan mengklik di lingkaran lalu menekan tombol F8 di keyboard.
Nama yang dimasukkan bebas, yang jelas pilihan Movie Clip harus terpilih. Jika berhasil, maka akan terbuat sebuah symbol baru di library.

Step 4: Give Life to the Hero
Baru saja kita telah memberikan sang hero bentuk yang tetap, lingkaran. Sekarang kita akan belajar gimana caranya kita memberikan kehidupan bagi sang hero, dan memberikannya misi untuk menyelamatkan dunia. Agar sang hero bisa hidup, dia butuh interaksi antara dia dan Tuhannya (player). Salah satu contohnya adalah, gerakan yang dibentuk ketika sang Tuhan mencet tombol panah di keyboard.

For those who don't get it: Kita akan mulai membuat interaksi sederhana antara player dan hero, dengan membuat hero bergerak ketika player menekan tombol panah di keyboard

Step 4.1: Introduce the Hero to the World
Sebelum kita melangkah ke action script, pertama-tama kita kasih nama hero yang barusan kita buat supaya bisa dikenal oleh ActionScript. Pertama-tama klik dulu lingkarannya, lalu beri sebuah nama di tab properties di bawah. Namanya tentu saja bebas, tapi buat contoh, ane kasih nama "hero" aja.



Step 4.2: Adding some alien language

Saatnya masuk ke action script (FUUUUU YEAH!!)

First things first, klik kanan di frame 1 (Baca lagi tentang frame dan keyframe yang ane udah tulis di atas kalo gak ngerti apa maksudnya)
Lalu klik --> Actions untuk memunculkan dialog seperti ini
Useful tips: Dialog Actions bisa juga dibuka dengan menekan tombol F9



Setelah itu, ketikkan kode di bawah ini di dialog action tersebut.


2   
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Import important flash libraries
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.display.MovieClip;

 
// Inisialisasi variabel buat mendeteksi tombol yang ditekan.
var kiri:Boolean = false;
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
 
// Ini buat bikin pelacak tombol. Kalo suatu tombol ditekan, fungsi yang ditentukan akan dijalankan.
stage.addEventListener(KeyboardEvent.KEY_DOWN, TombolDitekan);
stage.addEventListener(KeyboardEvent.KEY_UP, TombolDilepas);
 
// Dengan kode ini, fungsi yang bernama Main akan dimainkan terus menerus
addEventListener(Event.ENTER_FRAME,Main);
 
// Fungsi utama
function Main(e:Event){
   CheckKeys();
}
 
// Membuat fungsi TombolDitekan, yang berfungsi untuk ngecek tombol apa yang ditekan.
function TombolDitekan(e:KeyboardEvent){
   if(e.keyCode == 37){      // Ngecek apakah tombol kiri ditekan.
      kiri = true;
   }
   if(e.keyCode == 39){      // Ngecek apakah tombol kanan ditekan.
      kanan = true;
   }
   if(e.keyCode == 38){      // Ngecek apakah tombol atas ditekan.
      atas = true;
   }
   if(e.keyCode == 40){      // Ngecek apakah tombol bawah ditekan
      bawah = true;
   }
}
 
function TombolDilepas(e:KeyboardEvent){
   if(e.keyCode == 37){      // Ngecek apakah tombol kiri dilepas
      kiri = false;
   }
   if(e.keyCode == 39){      // Ngecek apakah tombol kanan dilepas
      kanan = false;
   }
   if(e.keyCode == 38){      // Ngecek apakah tombol atas dilepas
      atas = false;
   }
   if(e.keyCode == 40){      // Ngecek apakah tombol bawah dilepas
      bawah = false;
   }
}
 
function CheckKeys(){
   if(kiri){
      hero.x -= 5;          // Kalo tombol kiri ditekan, posisi hero pada sumbu x dikurangi 5 pixel
   }
   if(kanan){
      hero.x += 5;          // Kalo tombol kanan ditekan, posisi hero pada sumbu x ditambah 5 pixel
   }
   if(atas){
      hero.y -= 5;          // Kalo tombol atas ditekan, posisi hero pada sumbu y dikurangi 5 pixel
   }
   if(bawah){
      hero.y += 5;          // Kalo tombol bawah ditekan, posisi hero pada sumbu y ditambah 5 pixel
   }
}

Penjelasan:
- Line 2-4: Supaya beberapa metode bisa dijalankan, dibutuhkan yang namanya library. Di baris2 ini, flash player mengimpor library-library yang penting.
- Line 7-10: Di sini variabel-variabel di inisiasi. Adapun variabel2 yg diinisiasi di sini adalah 4 variabel bertipe Boolean. Boolean adalah suatu tipe variabel yang hanya mengandung nilai "Benar" atau "Salah". Atau kalau dalam bahasa matematika, 0 atau 1
- Line 13-17: Menginisiasi listener-listener. Listener yang dimaksud di sini adalah pendeteksi suatu event. Apabila event yang disebutkan terjadi, maka listener akan menjalankan sebuah fungsi yang telah ditentukan. Baris 13 dan 14 mendefinisikan 2 keyboard listener. Baris 13 mendefinisikan listener yang akan menjalankan fungsi bernama TombolDitekan ketika suatu tombol di keyboard ditekan. Sedangkan baris 14 adalah listener ketika tombol di keyboard dilepas. Di baris 17, didefinisikan Event Listener, yang akan mentrigger fungsi Main() setiap kali flash player berjalan. Ini berarti fungsi Main() akan diulang terus ampe flash playernya ditutup.
- Line 20-22: Fungsi bernama Main() didefinisikan di sini. Setiap fungsi ini dijalanin, fungsi CheckKeys(); juga dijalanin
- Line 25-38: FYI, angka 37-40 di situ maksudnya kode tombol keyboard. 37 adalah tombol kiri, 40 tombol bawah... Selengkapnya bisa dilihat di sini.
- Line 55-68: Karena fungsi Main() dijalankan berulang kali, maka fungsi ini pun akan dijalankan berulang kali. Selama ngejalanin fungsi ini, jika variabel kiri bernilai true, maka posisi hero terhadap sumbu X akan dikurangi 5 pixel (yang berarti bergerak 5 pixel ke kiri). Hal yang sama juga berlaku buat 3 arah lainnya...

Still confused? Feel free to ask in this thread (maklum ane males ngetik :/)

Kalo kodenya udah dimasukin, saatnya ngetes hasil kerjaan kita yang sangat epic ampe berdarah-darah (lebay)
Untuk mencoba, Pilih Control --> Test Movie (atau CTRL + Enter)

Diharapkan hasilnya adalah seperti yang tertera pada link ini:
http://www.swfme.com/view/1047502 (click on the movie if it's not working)

Kalo ternyata berbeda atau terdapat error, mungkin ada kesalahan di codingnya. Kalo ini terjadi, coba cek lagi scriptnya. Dan pastikan penamaan hero yang dijelaskan di step 4.1 sudah dilakukan.


That concludes my 1st tutorial


Coming next:
2. More Advanced Movements. Difficulty: EASY

Sampai jumpa lagi di tutorial berikutnya, yang akan dipost jika ternyata tutorial ini dianggap berguna :D
Kemungkinan akan dipost minggu depan, kalo ane lagi gak sibuk

Setelah ane menulis tutorial ini pun, ane merasakan bahwa tutorial ini masih jauh dari sempurna. Jadi, kalo ada yang ane salah tulis atau apapun, tolong dibenarkan :D
Thank you and Bye

Source code berupa file FLA terlampir.

« Last Edit: September 25, 2011, 02:10:34 PM by alamakboy »
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com

Offline Rukaister

  • Nerevarine
  • Hero Member
  • *****
  • Posts: 881
  • Detective
Re: Create a game with ActionScript 3 (Flash)
« Reply #1 on: September 25, 2011, 01:06:35 PM »
Nice parah, dilanjutin gan o/

Tambahan kelebihannya kalian belajar Flash :

1. Dengan belajar programming AS3, kalian ga cuma hanya bisa main di platform Flash yang berbasis web. Kalian juga bisa nge-deploy langsung ke Adobe AIR, dan FYI game yang dibuat ke Adobe AIR itu juga bisa dimainkan di Platform IOS, Android, dll.

2. Ketika Flash Player 12 muncul, dia akan support native langsung ke hardware. Dengan kata lain, sekarang kita bisa main 3D (dengan baik) di Flash. Unity aja nanti di rilis barunya juga akan support nge-buat game yang bisa dimainin di Flash Player 12 o.o

3. Flash masih merupakan plugin yang sangat banyak disupport oleh pengguna internet (90%an?), dan portal game flash itu ada sangat banyak. Kalau kalian buat game berbasis flash, game kalian akan lebih mudah dimainkan oleh orang banyak.

Offline ADIT

  • Superficially Busy Youkai
  • Administrator
  • *****
  • Posts: 820
  • Guys do their best now and are preparing
Re: Create a game with ActionScript 3 (Flash)
« Reply #2 on: September 25, 2011, 01:41:29 PM »
Waaaa,
+1 Nice read, will read again, keep it updated etc

Kalo pake Flash gw rasa mulai dari yng simpel kaya TD dulu, kalo platforer etc capek di resource

Spoiler: ShowHide
jadi pengen updae thread danmakufu


Seven Five Colored Puppeteer

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Re: Create a game with ActionScript 3 (Flash)
« Reply #3 on: September 25, 2011, 02:00:43 PM »
Nice parah, dilanjutin gan o/

Tambahan kelebihannya kalian belajar Flash :

1. Dengan belajar programming AS3, kalian ga cuma hanya bisa main di platform Flash yang berbasis web. Kalian juga bisa nge-deploy langsung ke Adobe AIR, dan FYI game yang dibuat ke Adobe AIR itu juga bisa dimainkan di Platform IOS, Android, dll.

2. Ketika Flash Player 12 muncul, dia akan support native langsung ke hardware. Dengan kata lain, sekarang kita bisa main 3D (dengan baik) di Flash. Unity aja nanti di rilis barunya juga akan support nge-buat game yang bisa dimainin di Flash Player 12 o.o

3. Flash masih merupakan plugin yang sangat banyak disupport oleh pengguna internet (90%an?), dan portal game flash itu ada sangat banyak. Kalau kalian buat game berbasis flash, game kalian akan lebih mudah dimainkan oleh orang banyak.

Woke, dan trims tambahannya. Ditambahin di post 1 gapapa kan? :cool:

Waaaa,
+1 Nice read, will read again, keep it updated etc

Kalo pake Flash gw rasa mulai dari yng simpel kaya TD dulu, kalo platforer etc capek di resource

Spoiler: ShowHide
jadi pengen updae thread danmakufu

Kalo menurutku sih TD ataupun platformer sama aja....
Yang lebih simple justru game shooting (putting touhou-like complex bullet pattern aside)

Ayo update lagi thread danmakufunya XD
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com

Offline acesofthesky

  • Loli Connoisseur
  • Hero Member
  • *****
  • Posts: 652
  • /アッカリ~ン\
    • Blog
Re: Create a game with ActionScript 3 (Flash)
« Reply #4 on: September 27, 2011, 02:59:03 AM »
Merasa ingin install lagi Flash di laptop...

Mau bikin base buat VN simpel biar bisa dipakai orang :v

Offline Psylo

  • Vampire
  • Commander
  • ******
  • Posts: 1.004
    • hitam dan putih
Re: Create a game with ActionScript 3 (Flash)
« Reply #5 on: September 27, 2011, 07:32:54 AM »
Nice gan,
ditunggu tutorial selanjutnya :D

Hohoho >:D

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Re: Create a game with ActionScript 3 (Flash)
« Reply #6 on: October 02, 2011, 12:04:06 PM »
2. More Advanced Movements
Difficulty: Easy

Sebelum kita maju ke main point dari tutorial ini, mari kita ubah penampilan hero kita terlebih dahulu, biar berapi-api >:D
(daripada cuma polos biru doang)

Mulai dengan membuka file FLA yang udah kita buat sebelumnya (it's obvious right :P)
Tunggu beberapa saat sampe loadingnya beres. Setelah itu, buka library (pencet CTRL+L kalo window library belom kebuka), dan klik 2x  movie clip yang udah kita buat.

Setelah klik 2x, akan muncul gambar bolanya di tengah2. Hias bola kita, terserah mau dihias seperti apa, yang jelas lebih bagus dari lingkaran polos biru. Gunakan brush tool atau oval tool kalo mau gampang


Hmm... looks good. Oh iya, sebelumnya kita harus mengatur ukuran bola kita. Jangan lupa nilai X dan nilai Y di tab properties harus seperti ini. Usahakan nilai X dan Y harus sama dengan 1/2 nilai lebar atau tinggi (W atau H). Kalo tinggi(H)nya 40, maka nilai X nya -20, sama seperti Y.
Hal ini supaya titik pusat massanya ada di tengah-tengah bola. (Di bab 1 ada script yang tertulis "hero.x" kan? Nilai X yang dikeluarkan adalah posisi titik ini pada sumbu X)
Untuk bisa mengakses tab properties untuk shape bola yang barusan kita buat, select bolanya, seperti kita select banyak unit dalam game RTS


Kalo sudah, simbol kita akan tampak seperti pada gambar dibawah ini

Perhatikan tanda yang mirip crosshair. Itu adalah posisi benda ini relatif terhadap keseluruhan stage :) Jika langkah yang sebelumnya dilakukan dengan benar, crosshair ini akan terletak tepat di tengah-tengah bola, bukan pinggir, sudut, atau apalah itu

Selanjutnya klik di tulisan Scene 1 untuk keluar dari editing mode

Sebenernya buat apa sih dihias-hias kayak gini? Ada alasan lain selain sekedar menghias. Nanti kita akan perjelas :P
Oke, saatnya kita kembali ke Action Script.

Sekarang kita akan mengaplikasikan gerakan-gerakan yang lebih lanjut lagi.

2.1. Menggerakkan hero dengan kecepatan yang ditentukan: ShowHide

Hmm kalo dipikir-pikir setelah kita berhasil menggerakan karakter kita di tutorial minggu lalu, pernahkah terpikir, bahwa gerakan sang hero terlalu monoton? Nah, gimana kalo saya mau menggerakkan karakter ini dengan kecepatan yang berubah-ubah?

Nah di sinilah sesuatu yang bernama variabel beraksi. Pertama-tama mari kita buat supaya hero bisa bergerak dengan kecepatan yang bisa diubah sesuai dengan nilai suatu variabel, bernama speed (kecepatan)

Ubah beberapa baris, atau tambahkan kode baru pada script:

7
8
9
10 

var kiri:Boolean = false;     
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
Ubah menjadi -->    7
8
9
10 
11
var kiri:Boolean = false;
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
var speed:Number = 5;
55 
56
57
58
59
60
61
62
63 
64
65
66
67
68
function CheckKeys(){     
   if(kiri){
      hero.x -= 5;
   }
   if(kanan){
      hero.x += 5;
   }
  if(atas){
      hero.y -= 5;
   }
  if(bawah){
      hero.y += 5;
   }
}
Ubah menjadi -->   56
57
58 
59
60
61
62
63
64
65
66
67
68
69
function CheckKeys(){
  if(kiri){
      hero.x -= speed;
   }
  if(kanan){
      hero.x += speed;
   }
  if(atas){
      hero.y -= speed;
   }
   if(bawah){
      hero.y += speed;
   }
}

Nah setelah ini, kecepatan hero bergerak akan dipengaruhi oleh nilai dari variabel speed xD
Coba aja ubah nilai speed jadi 3, 7, atau 10 misalnya buat coba-coba

Oh, jangan lupa buat nyoba pencet CTRL + ENTER


2.2. Menggerakkan hero dengan kecepatan yang berubah-ubah (percepatan): ShowHide

Sekarang kita akan coba membuat sebuah script yang bisa mengubah-ubah kecepatan hero secara teratur. Seperti subbab sebelumnya, ubah atau tambah baris baru pada script


8
9
10
11
var kiri:Boolean = false;     
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
var speed:Number = 5;
Ubah menjadi -->   7
8
9
10
11 
12
13
var kiri:Boolean = false;
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
var speed:Number = 0.08;
var xspeed:Number = 0;
var yspeed:Number = 0;
21 
22
23
function Main(e:Event){     
   CheckKeys();
}
Ubah menjadi -->   23 
24
25
26
function Main(e:Event){
   CheckKeys();
   MoveHero();
}
56 
57
58 
59
60
61
62
63
64
65
66
67
68
69
function CheckKeys(){
  if(kiri){
      hero.x -= speed;   
  }
  if(kanan){
      hero.x += speed;
  }
  if(atas){
      hero.y -= speed;
  }
  if(bawah){
      hero.y += speed;
  }
}
Ubah menjadi -->   59 
60
61
62
63
64
65
66
67
68
69
70
71
72
function CheckKeys(){
  if(kiri){
      xspeed -= speed;   
  }
  if(kanan){
      xspeed += speed;
  }
  if(atas){
      yspeed -= speed;
  }
  if(bawah){
      yspeed += speed;
  }
}

Lalu tambahkan beberapa baris ini:
74 
75
76
77
function MoveHero(){
   hero.x += xspeed;
   hero.y += yspeed;
}

Penjelasan:
Line 11-13: Di sini dideklarasikan 3 variabel: speed, xspeed, dan yspeed. xspeed adalah kecepatan relatif terhadap sumbu x, sedangkan yspeed adalah kecepatan terhadap sumbu y. Di sini xspeed dan yspeed akan bertambah sejumlah speed, selama suatu tombol arah ditekan. Makanya nilai speed bernilai kecil dulu, 0.08 misalnya.
Line 23-26: Sekarang fungsi Main() akan menjalankan fungsi CheckKeys() dan MoveHero(). Fungsi ini akan dijelaskan nanti
Line 59-72: Sekarang setiap tombol arah/panah ditekan, yang berubah bukan nilai x dan y sang hero, tapi xspeed dan yspeed. Jadi misalkan xspeed awalnya bernilai 0, lalu tombol kanan ditekan, nilai xspeed akan menjadi 0.08. Kalo tombol kanan ditekan lagi, nilai xspeed jadi 0.16. Begitulah seterusnya...
Line 74-77: Deklarasi fungsi MoveHero(). Di sini barulah posisi x dan y hero diubah. Perubahannya sesuai dengan nilai xspeed dan yspeed.

Setelah script diubah, movienya akan seperti ini:

klik movienya kalo ngga jalan. Kalo ga keliatan, coba refresh dan pastikan flash player terinstal
Gerakkan bolanya dengan tombol panah pada keyboard

Btw kalo animasinya kurang mulus, bisa ditambah frame ratenya menjadi 30 fps


To be continued...
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com

Offline X3

  • --|| Eiyuu ||--
  • Administrator
  • *****
  • Posts: 3.308
  • hehehe
    • It's Challenging, Not Difficult
Re: Create a game with ActionScript 3 (Flash)
« Reply #7 on: October 07, 2011, 09:46:14 AM »
[OOT: Astaga, avatarnya Psylo... ga ilang2 juga habitnya wkwkwkwk]

Ane like dulu yah Shif (+ rep :D)

Usul, untuk softwarenya dikasih minimumnya aja. Misal, di atas kan disebutin CS3, nggak perlu 'kemungkinan', anggap aja minimumnya. Nggak semua komputer kuat untuk menggunakan yang di atas itu juga kan :D .

Tapi ane bingung gan, knp movie di tutorial part 2 ga jalan... padahal Flash Player installed dan terupdate secara cukup rutin XD
Aquamarine.
Sebelum ngepost, silahkan baca: Peraturan Umum Forum Genshiken
It's Challenging, Not Difficult

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Re: Create a game with ActionScript 3 (Flash)
« Reply #8 on: October 07, 2011, 08:51:55 PM »
[OOT: Astaga, avatarnya Psylo... ga ilang2 juga habitnya wkwkwkwk]

Ane like dulu yah Shif (+ rep :D)

Usul, untuk softwarenya dikasih minimumnya aja. Misal, di atas kan disebutin CS3, nggak perlu 'kemungkinan', anggap aja minimumnya. Nggak semua komputer kuat untuk menggunakan yang di atas itu juga kan :D .

Tapi ane bingung gan, knp movie di tutorial part 2 ga jalan... padahal Flash Player installed dan terupdate secara cukup rutin XD

Emm yang dimaksud 'kemungkinan' sebenarnya ane masih belum pasti apakah ane bakal bikin tutorial yang menggunakan flash develop juga. Bukan versi adobe flashnya XD
Tapi oke deh, mungkin post ane di atas memang ambigu. Bakal diedit kalo ane ada waktu deh

Hmm kalo movie part 2 ngga jalan, coba refresh web browsernya. Ane juga entah kenapa sering error sih, tapi setelah direfresh muncul
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Re: Create a game with ActionScript 3 (Flash)
« Reply #9 on: December 18, 2012, 12:22:02 AM »
Hmm udah lama gw ga buka forum dan udah setaun lebih thread ini ga dilanjutin.

So... mulai sekarang aye bakal lanjutin lagi thread tutorial ini, sesepi apapun threadnya
Jadi wait for the next post(s). -w-
Mudah2an nanti sore/malam udah dipost part 3 nya
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com

Offline alamakboy

  • Self-Proclaimed Coder
  • Administrator
  • *****
  • Posts: 711
  • O.o/
    • alamakboy.wordpress.com
Re: Create a game with ActionScript 3 (Flash)
« Reply #10 on: December 19, 2012, 02:03:45 PM »
2. More Advanced Movements (cont.)
Difficulty: Easy
"Karena movements berarti lebih dari satu gerakan" :p

Well, akhirnya kita ketemu lagi di thread ini -w-
Jujur aja file2 tutorialnya udah pada pergi ke oblivion.... tapi aye bakal bikin ulang bab-babnya jadi ga usah cemas o.ob

Di bagian sebelumnya kita udah bikin hero nya jadi berapi-api sekaligus punya kecepatan. Apa itu aja cukup? Jelas tidak. Sesuai Hukum Newton I, sebuah benda akan mempertahankan keadaan diam atau bergerak lurus beraturan kecuali ada gaya yang tidak nol bekerja padanya. Ini berarti hero kita akan terus bergerak ga cuma ampe keluar batas screen, mungkin ampe kiamat pun bakal terus bergerak selama komputernya nyala.

Eh? Percepatan? Ah bener juga. Kita juga udah nambahin percepatan pada "hero" yang udah kita bikin lebih dari setahun yg lalu.
Dengan percepatan itu kita bisa mencegah gerakan hero yg ga terbatas dengan mencet tombol yang berlawanan arah dengan gerakan si hero, tapi itu bukan berarti heronya udah perfect. -w-
Atau mungkin bukan heronya yang perfect, tapi "fisika dunia" dari game yang kita buatlah yang belum perfect.

Jadi di bagian ini gw mau jelasin gimana caranya nerapin fisika sederhana kedalam sebuah game. Apa? Pusing berurusan dengan fisika? Jangan cemas, karena saya ngga pake rumus fisika apapun kok disini :D

2.3: Gaya Gesek: ShowHide


Anggap sebuah benda bergerak di atas bidang. Apa yang mencegah si benda jatuh dari bidang tsb?
Gaya gesek? Cerdas! Meskipun di judul spoiler udah ada jawabannya -w-

Pada kasus game ini, kita butuh penerapan gaya gesek pada bidang gerak si hero, biar dia bisa berhenti sendiri tanpa harus dikendaliin oleh directional arrow. Sebelumnya asumsikan si hero bergerak di udara, gerakannya dihambat oleh gesekan udara, dan tidak ada gaya gravitasi.
Prinsipnya sederhana: Buat sebuah perintah berulang yang berfungsi ngurangin kecepatan si hero tiap satuan waktu :p

Contoh kode: (Perhatikan yang di bold)

1     
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

// Import important flash libraries
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.display.MovieClip;
 
// Inisialisasi variabel buat mendeteksi tombol yang ditekan.
var kiri:Boolean = false;
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
var speed:Number = 0.08;
var xspeed:Number = 0;
var yspeed:Number = 0;
var friction:Number = 0.98;                 // Variabel besarnya pengurangan kecepatan oleh gaya gesek

// Ini buat bikin pelacak tombol. Kalo suatu tombol ditekan, fungsi yang ditentukan akan dijalankan.
stage.addEventListener(KeyboardEvent.KEY_DOWN, TombolDitekan);
stage.addEventListener(KeyboardEvent.KEY_UP, TombolDilepas);
 
// Dengan kode ini, fungsi yang bernama Main akan dimainkan terus menerus
addEventListener(Event.ENTER_FRAME,Main);
 
// Fungsi utama
function Main(e:Event){
   CheckKeys();
   MoveHero();
}
 
// Membuat fungsi TombolDitekan, yang berfungsi untuk ngecek tombol apa yang ditekan.
function TombolDitekan(e:KeyboardEvent){
   if(e.keyCode == 37){      // Ngecek apakah tombol kiri ditekan.
      kiri = true;
   }
   if(e.keyCode == 39){      // Ngecek apakah tombol kanan ditekan.
      kanan = true;
   }
   if(e.keyCode == 38){      // Ngecek apakah tombol atas ditekan.
      atas = true;
   }
   if(e.keyCode == 40){      // Ngecek apakah tombol bawah ditekan
      bawah = true;
   }
}
 
function TombolDilepas(e:KeyboardEvent){
   if(e.keyCode == 37){      // Ngecek apakah tombol kiri dilepas
      kiri = false;
   }
   if(e.keyCode == 39){      // Ngecek apakah tombol kanan dilepas
      kanan = false;
   }
   if(e.keyCode == 38){      // Ngecek apakah tombol atas dilepas
      atas = false;
   }
   if(e.keyCode == 40){      // Ngecek apakah tombol bawah dilepas
      bawah = false;
   }
}
 
function CheckKeys(){
   if(kiri){
      xspeed -= speed;          // Kalo tombol kiri ditekan, posisi hero pada sumbu x dikurangi 5 pixel
   }
   if(kanan){
      xspeed += speed;          // Kalo tombol kanan ditekan, posisi hero pada sumbu x ditambah 5 pixel
   }
   if(atas){
      yspeed -= speed;          // Kalo tombol atas ditekan, posisi hero pada sumbu y dikurangi 5 pixel
   }
   if(bawah){
      yspeed += speed;          // Kalo tombol bawah ditekan, posisi hero pada sumbu y ditambah 5 pixel
   }
}

function MoveHero() {
   hero.x += xspeed;
   hero.y += yspeed;
   xspeed *= friction;         // Kecepatan X dan Y dikurangi oleh pengurangan kecepatan dari gesekan
   yspeed *= friction;
   // Kalo kecepatan < 0.02 atau lebih besar dari 0.02, kecepatan X maupun Y diubah jadi 0
   if((xspeed > 0 && xspeed <= 0.02) || (xspeed < 0 && xspeed >= -0.02)) {
      xspeed = 0;
   }
   if((yspeed > 0 && yspeed <= 0.02) || (yspeed < 0 && yspeed >= -0.02)) {
      yspeed = 0;
   }

}

Penjelasan:
Line 14: Di sini sebuah variabel bernama "friction" dideklarasikan. Fungsi variabel ini adalah menentukan besarnya pengurangan kecepatan sang hero.
Line 78-79: Disinilah pengurangan kecepatan hero terjadi. Sebelumnya variable "friction" diset 0.98, berarti kecepatan awal hero entah itu xspeed ato yspeed akan dikalikan 0.98. Artinya kecepatan hero akan menjadi 98% kecepatan awalnya. Atau dengan kata lain Kecepatan hero dikurangi 2% setiap frame. Berarti kalo friction di set jadi 0.5, kecepatan hero akan berkurang 50% setiap frame :D
Line 80-86: Yang ini optional sih sebenernya. Dengan beberapa command ini, komputer bisa mencegah nilai xspeed atau yspeed sebesar, misalnya 0.00000041729784162. Ini berarti keliatannya si hero diam, tapi sebenernya bergerak karena masih punya kecepatan. Mungkin kalo diperhatikan sekilas ngga akan keliatan gerak. Tapi kalo movienya dibiarin nyala lama banget, mungkin bakal keliatan perpindahan posisinya.
 
Btw kalo2 blom ada yang tau, &&, == , dan || di contoh kode diatas adalah operator logika

  • == ini bukan emoticon ya :p Jadi artinya apa dong? Artinya ya... sama dengan o.o
    Contoh: 5 == 5 akan menghasilkan nilai true, sedangkan 4 == 6 akan menghasilkan false. Bedanya sama '=' apa? Kalo '=' dipakai untuk mengubah suatu nilai variabel, sedangkan '==' dipake untuk membandingkan 2 nilai
  • < , > , <=, >= sama kyk diatas, yaitu operator perbandingan. > berarti lebih besar, <= berarti lebih kecil atau sama dengan, dsb.
  • && artinya AND. Akan bernilai true kalo kedua parameter bernilai true. Contoh: true && false akan menghasilkan nilai false
  • || artinya OR. Akan bernilai true jika salah satu parameter bernilai true. Contoh true || false akan bernilai true

Kalo dilakukan dengan benar, game kita yang udah 1 tahun lebih ga diberesin bakal jadi begini. Speed counter ama tombol reset dijual terpisah -w- (Klik movie kalo ga jalan)
Ada masalah? Coba refresh page atau klik link ini kalo ga jalan --> https://dl-web.dropbox.com/get/Tutorial%20Assets/part2_extra.swf

Mmhmm.... looks good so far :D
Kalo mau nilai friction bisa diubah2 buat eksperimen :p
Happy programming!

Source File


2.4: Gaya Gravitasi: ShowHide

Sekarang kita anggap si hero bisa gerak di udara. Berarti kita butuh gaya gravitasi buat nunjukin kalo si karakter bisa jatuh (karena yg namanya gerak di udara pasti jatuh).

6       
7
8
9
10
11
12
13
14
15
// Inisialisasi variabel buat mendeteksi tombol yang ditekan.
var kiri:Boolean = false;
var kanan:Boolean = false;
var atas:Boolean = false;
var bawah:Boolean = false;
var speed:Number = 0.08;
var xspeed:Number = 0;
var yspeed:Number = 0;
var friction:Number = 0.98;
var gravitasi:Number = 0.04; // Pengurangan kecepatan di sumbu y oleh gravitasi
........................................
76
77
78
79
80
81
function MoveHero() {
   hero.x += xspeed;
   hero.y += yspeed;
   xspeed *= friction;         
   yspeed *= friction;
   yspeed += gravitasi;         // yspeed ditambah gravitasi (karena arah bawah adalah y positif :D)

Intinya disini kita cuma nambahin suatu variabel bernama gravitasi dan mengurangi kecepatan hero di sumbu y (yspeed). Mungkin ada yg bertanya, kenapa yspeed malah ditambah, bukannya dikurangi? Jawabannya simpel, yaitu karena dalam sistem koordinat flash (dan aplikasi-aplikasi pada umumnya) sumbu y positif adalah kearah bawah.

Yah, ga ada yang istimewa dari bagian ini, jadi gw yakin pasti pada paham :p


Klik disini kalo ga jalan


Source


2.5. Rotation: ShowHide

Oke, sekarang gerakan si karakternya udah cukup canggih. Udah ada gaya gesek ama gravitasi. Tapi gw yakin sebagian besar dari yg mbaca tutorial ini pasti merasa ada yang kurang. Apaan tuh? Karakternya terlalu statis? Tepat sekali.

Supaya ngga statis, mari kita coba buat si karakter utama benar-benar berbentuk bola. Yang namanya bola ngga bisa dibilang bola kalo ga bisa ngegelinding kan? :D
Di bagian tutorial ini kita bakal nyoba supaya si karakter utama bisa menggelinding di udara.

Prinsip dari suatu benda yang menggelinding sangat sederhana. Benda yang menggelinding mengalami perubahan torsi, atau rotasi tiap satuan waktu. Dalam flash, rotasi sebuah objek bisa diubah dengan menggunakan variabel rotation.

Di contoh script ini, sang karakter utama dibuat supaya rotasinya diubah2 sesuai dengan perubahan xspeed:
77
78
79
80
81
82
   hero.x += xspeed;
   hero.y += yspeed;
   hero.rotation += xspeed;
   xspeed *= friction;         
   yspeed *= friction;
   yspeed += gravitasi;


Nah. Lebih keliatan seperti bola beneran sekarang.
Inilah kenapa gw menganjurkan bikin efek pantulan cahaya di bolanya, biar keliatan kalo bolanya lagi muter

« Last Edit: February 02, 2013, 12:30:19 AM by alamakboy »
"A chain is as strong as its weakest link"
- random quote di Shinsekai Yori -w-

Do nice visit to my blog :w00t:
http://alamakboy.wordpress.com