Maze game menggunakan actionscript – Part I

Maze game menggunakan actionscript – Part I

Hai, salam serabutan!

Pada tutorial ini, kita akan mendalami actionscript 3.0 untuk membuat sebuah game Flash sederhana. Kami harap Anda telah mengerti dulu dasar-dasar pemrograman seperti penggunaan sintaks selection (if-else), iteration (while, for), dan penggunaan function. Apabila Anda belum paham mengenai dasar-dasar pemrograman, ada baiknya Anda mempelajarinya karena dapat mempermudah hidup Anda, misalnya dapat memasukkan data secara otomatis dan masih banyak lagi… :D. Anda tidak perlu tahu cara membuat animasi tweening menggunakan Flash.

Siap? Jalankanlah aplikasi Adobe Flash. Apabila Anda belum memilikinya, Anda dapat mengunduhnya dari http://www.adobe.com/support/flash/downloads.html. Maka akan muncul tampilan seperti ini. Note: Tampilan ini belum tentu sama karena mungkin saja versi Adobe Flash Anda berbeda.

Pilih new ActionScript 3.0.

Kemudian, gambarlah sebuah persegi menggunakan toolbar yang ada di kanan.

Apabila toolbar tidak tersedia, maka keluarkan melalui menu Windows -> tools. Mungkin Anda juga harus mengubah layout workspace Anda menggunakan menu yang terletak di menu bar.

Kemudian buatlah sebuah kotak di stage. Stage merupakan tempat meletakkan objek dalam Flash. Objek yang diletakkan dalam stage akan muncul ketika ditampilkan.

Lalu, menggunakan selection tool (lihat toolbar di kanan)

Pilih seluruh kotak.

Kemudian tekan tab properties.

Ubahlah tinggi dan lebarnya menjadi 32 pixel.

Kemudian tekan F8, sehingga akan keluar jendela baru seperti berikut.

Isi persis dengan apa yang ada di gambar, terutama centang kotak Export for ActionScript dan nama Class: Dinding. Kemudian tekan OK. Apabila ada warning, tekan OK lagi.

Ini merupakan proses untuk mengubah suatu shape menjadi symbol. Dalam Flash, sebuah symbol dapat dimanipulasi menggunakan ActionScript, misalnya digerakkan, diperbesar, atau di-drag menggunakan mouse. Apabila Anda memiliki sesuatu yang ingin digerakkan (tanpa menggunakan tweening), maka Anda harus mengubahnya menjadi symbol terlebih dulu. Apabila benar, maka di tab Library akan muncul sebuah symbol yang baru Anda buat.

Test dengan menekan Ctrl + Enter. Apabila benar, akan muncul sebuah kotak kecil.

Kemudian, delete kotak Anda dari stage. Mengapa? Karena nanti Anda bisa menaruhnya lagi menggunakan ActionScript! Ingat, delete kotak dari stage, bukan dari library!

Sekarang saatnya scripting!

ActionScript 3.0 memperbolehkan Anda untuk ngoding di dua tempat: di timeline dan di dalam class. Menulis kode di timeline bukanlah hal yang dianjurkan karena mirip dengan membuat global variable. Konsep OOP disediakan oleh ActionScript, maka mengapa tidak kita gunakan?

Klik stage menggunakan selection tool, kemudian masuk ke jendela properties. Isi "Maze" pada Document Class. Lalu tekan gambar pensil di sebelahnya.

Akan muncul sebuah jendela baru. Save dan namakan Maze.as. Ini merupakan class utama untuk game kita, sehingga hampir seluruh mekanisme game akan kita atur menggunakan class ini. Untuk memulai, mari kita keluarkan kotak yang telah kita buat dari Library. Caranya adalah dengan mengetikkan

addChild(new Dinding());

Di dalam constructor (function Maze). Fungsi addChild berguna untuk menampilkan objek di layar. Sebagai parameternya, kita harus mengisikan sebuah objek yang ingin ditampilkan, tak lain merupakan objek dari class Dinding.

Untuk mengetes, save dan kembali ke file Maze.as. tekan Ctrl + Enter untuk melihat hasilnya. Apabila benar, maka akan tampak kotak seperti berikut.

Apabila kotak tidak keluar, yakinkan Anda untuk save dulu semua file, dan periksa lagi penamaan file dan class yang digunakan! Nama file dan nama class harus sama!

Secara default kotak tersebut akan menyangkut di pojok kanan atas (koordinat 0, 0). Kita dapat menggesernya dengan mengubah kode constructor, menjadi seperti ini.

public function Maze() {

  var dinding:Dinding = new Dinding();

  addChild(dinding);

  dinding.x = 100;

  dinding.y = 100;

}

Dalam ActionScript, tipe data diletakkan dibelakang nama variable dan dipisahkan menggunakan titik dua. Untuk mendeklarasikan variable baru, ActionScript menggunakan keyword var. Untuk mendeklarasikan function baru, ActionScript menggunakan keyword function.

Tes menggunakan Ctrl + Enter. Kotak akan berpindah ke tengah.

Untuk menjadikan sebuah maze game, tentunya kita memerlukan Array 2D (atau bahkan 3D, jika kita ingin membuat 3D maze!) untuk menampung lokasi dinding. Oleh karena itu, mari kita buat variable array ini. Ketikkan kode berikut (dalam file Maze.as, bukan dalam timeline).

package  {

  import flash.display.MovieClip;

  public class Maze extends MovieClip {

    var maze:Array;

    var panjang:int, lebar:int;

   

    public function Maze() {

      //mengisi array

      maze = new Array(

        new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1),

        new Array(1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1),

        new Array(1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1),

        new Array(1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1),

        new Array(1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1),

        new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1),

        new Array(1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1),

        new Array(1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1),

        new Array(1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 1),

        new Array(1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1),

        new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1)

      );

      lebar = maze.length;

      panjang = maze[0].length;

     

      //menampilkan ke layar

      for(var i:int=0; i<lebar; i++){

        for(var j:int=0; j<panjang; j++){

          if(maze[i][j] == 0) continue;

          var dinding:Dinding = new Dinding();

          dinding.y = i*dinding.height + 30;

          dinding.x = j*dinding.width + 60;

          addChild(dinding);

        }

      }

    }

  } 

}

Kode ini menggunakan array untuk menimpan lokasi dinding, kemudian ditampilkan menggunakan nested loop, ke arah y dan x. Nilai 0 pada array berarti tidak ada dinding, sedangkan nilai 1 berarti ada. Perhatikan bahwa untuk membangkitkan maze yang kecil sekalipun, kita perlu meng-hardcode banyak nilai. Oleh karena itu, kita nanti akan memperbaikinya. Kapan? Nanti… Tunggu tutorial mendatang yah!

Tes dan lihat hasilnya.

Naah, sekian dulu untuk tutorial kali ini. Tunggu edisi selanjutnya yaa.. :D

Pada edisi selanjutnya, kita akan membahas bagaimana caranya:

• Bernavigasi di dalam maze
• Membangkitkan maze secara acak
• Membuat maze solver otomatis
• Bermain vs. CPU

Kode dan file untuk tutorial ini dapat diunduh di sini (Ditulis menggunakan Adobe Flash 5.5, kompatibel dengan Flash 5.0 maupun Flash 6.0).

Salam Serabutan.

Perhatian: Serabutan Dotcom menerima jasa programming, dan masih banyak lainnya lho! Murah, cepat, dan gampang, silakan kunjungi laman ini untuk melihat semua jasa yang kami tawarkan. Terima kasih ..!

Menjalankan Program Secara Diam-Diam (Background Process)

Pernahkan Anda ingin menjalankan suatu program secara diam-diam (background process)? 

 Background process tidak akan muncul di taskbar, sehingga cukup aman untuk dijalankan tanpa diketahui orang lain. Program sejenis ini dapat digunakan jika Anda tidak ingin orang lain secara tidak sengaja (maupun dengan sengaja) menutup aplikasi anda. Atau Anda ingin mengeluarkan gambar seram secara tiba-tiba untuk menakuti teman Anda? Atau Anda ingin merekam semua keypress yang dilakukan oleh orang yang Anda benci, misalnya untuk mengambil password :D?

DISCLAIMER: Tutorial ini tidak ditujukan untuk tindakan kejahatan apapun. Segala macam tindak kriminal yang dilakukan menggunakan tutorial ini merupakan sepenuhnya di luar tanggung jawab kami!

Oke, sekian basa-basinya. Berikut ini akan dijelaskan langkah-langkah untuk membuat sebuah program berjalan secara background process, menggunakan C++. Tutorial ini dilakukan pada OS Windows 7. Apabila ada masalah dengan OS lain, silakan tulis komentar Anda di bawah.

1. Pertama, Anda perlu mengetahui function CreateProcess(). Fungsi ini berguna untuk menjalankan proses lain. Parameternya ada banyak, tetapi biasanya cukup 2 saja yang Anda perlu ketahui.

Parameter pertama merupakan filepath menuju executable yang Anda inginkan, sedangkan parameter kedua merupakan command-line parameter yang dapat Anda eksekusi melalui command prompt. Parameter kedua akan digunakan apabila parameter pertama bernilai NULL. Untuk referensi lebih lanjut, silakan kunjungi http://msdn.microsoft.com/en-us/library/windows/desktop/ms682425%28v=vs.85%29.aspx

Maka, untuk menjalankan calculator, Anda dapat melakukan seperti ini

CreateProcess("C:\\Windows\\System32\\calc.exe", NULL, NULL, NULL, FALSE, 0, NULL, NULL, &si, &pi );

Perhatikan untuk parameter pertama, backslash harus ditulis ganda, karena dalam C++, backslash digunakan untuk meng-escape karakter

2. Parameter StartupInfo dan ProcessInformation pada function CreateProcess() tidak boleh diisi NULL, tetapi harus diisi sesuai dengan tipe datanya. Maka Anda perlu menambahkan baris ini sebelum mengeksekusi CreateProcess().

  STARTUPINFO si;

  PROCESS_INFORMATION pi;

  ZeroMemory( &si, sizeof(si) );

  si.cb = sizeof(si);

  ZeroMemory( &pi, sizeof(pi) );

3. Untuk menyembunyikan jendela executable, cukup tambahkan 3 baris berikut.

  HWND hwnd;

  hwnd = FindWindowA("ConsoleWindowClass", SW_HIDE);

  ShowWindow(hwnd, 0);

4. Sekarang, saatnya menggabungkan poin-poin penting yang telah dijelaskan. Misalnya kita akan membuat sebuah aplikasi yang dapat menampilkan gambar setiap satu jam (pukul 6, 7, 8, …). Untuk itu kita perlu membuat sebuah function untuk menangani waktu ini. Berikut adalah contoh function yang dimaksud.

void Tunggu(){

  time_t now;

  while(true){

    time(&now); //ambil waktu sekarang

    if(now % 3600 <=1){ // setiap 1 jam

      KeluarGambar();

      _sleep(3000); // pastikan hanya 1 gambar di detik yg sama

    }

    _sleep(1000); // jangan makan CPU terlalu banyak

  }

}

Function KeluarGambar() bertugas membuat proses baru yang mengeluarkan gambar. Untuk itu, kita perlu memanggil aplikasi yang dapat menampilkan gambar. Untuk tutorial ini, kita akan menggunakan Windows Photo Viewer. Windows tidak memberikan file executable untuk windows photo viewer, melainkan hanya sebuah file .dll yang diberikan pada directory C:\Program Files\Windows Photo Viewer. Untuk itu kita perlu mengeksekusi rundll32.exe terlebih dahulu. Berikut merupakan function yang dimaksud.

void KeluarGambar(){

  STARTUPINFO si;

  PROCESS_INFORMATION pi;

  ZeroMemory( &si, sizeof(si) );

  si.cb = sizeof(si);

  ZeroMemory( &pi, sizeof(pi) );

 

  char cmd[260] = "rundll32.exe \"C:\\Program Files\\Windows Photo Viewer\\PhotoViewer.dll\", ImageView_Fullscreen ";

  strcat(cmd, FILEPATH);

  CreateProcess(NULL, cmd, NULL, NULL, FALSE, 0, NULL, NULL, &si, &pi );

}

Untuk FILEPATH dapat diisi sesuai lokasi file gambar. Lebih baik jika FILEPATH dideklarasikan di awal menggunakan preprocessor, sehingga mudah diganti. Misalnya seperti berikut:

#define FILEPATH "C:\\Program Files\\test.png"

Perhatikan bahwa lokasi file disesuaikan menurut komputer Anda! Penggunaan backslash ganda wajib karena backslash merupakan escape character dalam C++.

Terakhir adalah function main() sebagai entry program.

int main(){

  Sembunyi();

  Tunggu();

}

Library yang perlu di-include dalam pekerjaan ini adalah <windows.h>, <string.h>, dan <time.h>.

Compile hasil pekerjaan Anda. Karena ini merupakan background process, perhatikan bahwa untuk mengakhiri process tidak dapat di-close seperti biasa. Salah satu cara mengakhiri process adalah menggunakan task manager.

Source code dapat didownload di sini.  

Note: source code mengeluarkan gambar setiap 1 menit untuk mempermudah pengecekan. Silakan ubah konstanta waktu dari 60 menjadi 3600, seperti yang telah dibahas di tutorial.

*Apabila gambar tidak keluar, pastikan Anda telah meletakkan file sesuai path!

Ada pertanyaan / komentar / saran? Silakan masukkan di kotak di bawah ini… :D

Perhatian: Serabutan Dotcom menerima jasa programming, dan masih banyak lainnya lho! Murah, cepat, dan gampang, silakan kunjungi laman ini untuk melihat semua jasa yang kami tawarkan. Terima kasih ..!