Monthly Archives: November 2015

https://www.scirra.com/construct2

Construct 2, game engine keluaran Scirra Ltd, merupakan game engine yang dapat digunakan oleh siapapun tanpa harus menguasai bahasa pemrograman. Construct 2 saat ini hanya tersedia untuk sistem operasi Windows, namun game yang dihasilkan dapat dijalankan dalam berbagai platform, Android, iOS, Windows Phone, Linux, maupun Mac.

Scirra menyediakan dua macam versi lisensi yaitu lisensi gratis dan berbayar. Beberapa keterbatasan versi lisensi gratis misalnya, game yang telah dibuat hanya dapat publish melalui Windows Store, Chrome Store, Facebook dan Scirra. Eksport game menjadi aplikasi multiplatform Windows, Mac, Android, dan sebagainya hanya dapat dilakukan dalam versi berbayar.

construct2Tampilan Construct 2 Editor

Tampilan area kerja Construct 2 berupa layout editor berkonsep WSIWYG (What You See is What You Get) sehingga mudah dioperasikan bahkan oleh orang awam (bukan profesional dalam bidang game). Selain itu membuat game dengan Construct 2 dilakukan cukup dengan klik dan drag & drop. Tools yang dimiliki Construct 2 dapat dengan mudah digunakan oleh siapa pun tanpa harus menguasai bahasa pemrograman. Penataan objek dalam Construct 2 menggunakan prinsip layering sehingga penataan objek yang diperlukan menjadi lebih fleksibel bagi pengguna.

Pembuatan game dengan Construct2 dapat dimulai dengan memilih tombol New Project untuk membuat proyek game yang baru. Project akan tersimpan sebagai file dengan ekstensi .capx. Selanjutnya pengguna akan disuguhi tampilan layout yang masih kosong. Penambahan background ataupun objek game lainnya dapat dilakukan dengan klik kanan pada layout dan memilih menu “Insert New Object”. Game yang dibuat dengan Construct 2 biasanya tersusun atas “sprite object“. Apa itu sprite object? Silakan buka google.com. Penataan objek lebih lanjut dapat memanfaatkan layer. Layer dapat ditambah, dikurangi dan diatur menggunakan “Layer tabs” yang berada di sebelah “Project bar”.

Untuk menambah “behavior” bagi objek game, pengguna dapat memilih behavior yang telah disediakan Construct 2. Beberapa contoh behavior yang disediakan misalnya:

  • 8 direction movement: objek dapat digerakkan menggunakan arrow keys
  • bullet movement: objek bergerak sesuai sudut tertentu
  • scroll to: tampilan layar akan bergerak sesuai dengan pergerakan objek game

Pengaturan behaviour dilakukan melalui Properties bar. Klik objek yang akan dikenai behavior, kemudian pada Properties bar, klik Add/Edit pada kategori behavior. Behavior nantinya terkait juga dengan event. Event merupakan aksi yang dilakukan oleh objek game ketika menghadapi kondisi-kondisi tertentu. Construct 2 menyediakan berbagai macam event yang pada umumnya dibutuhkan.

Bagaimana dengan event yang berulang? Prinsip reusable, dalam penerapannya disebut instance, juga dikenal dalam Construct 2.  Penerapannya antara lain pada events dan variable. Variable digunakan untuk memberikan sifat bagi objek game. Variable juga diatur melalui Properties bar. Berdasarkan gambaran diatas, mudah bukan membuat game dengan Construct 2?

Selanjutnya apabila game telah siap, game dapat diekspor ke dalam berbagai format melalui menu File. Apabila ingin mempelajari lebih lanjut, scirra telah menyediakan dokumentasi dan tutorial online.

 


Saya sedang mencoba belajar tentang AR. Library yang saya coba pertama kali adalah ARToolKit. Tutorial ARToolKit yang cukup lengkap untuk pemula dapat ditemukan di sini. Tetapi melihat keterbatasan dari ARToolKit dan pengembangannya, akhirnya saya mencari-cari lib lain yang dapat saya pelajari. Akhirnya saya menemukan FLARToolKit.
Selanjutnya saya mulai mempelajari FLARManager, framework yang di dalamnya telah ada lib untuk tracking sekaligus ada 3D framework. FLARManager mendukung FLARToolKit sebagai tracking lib dan beberapa 3D framework untuk rendering model 3D yang ingin saya tampilkan.
Alat yang saya gunakan adalah:

  1. FlashDevelop sebagai IDE
  2. Adobe Flex sebagai compiler
  3. FLARManager sebagai framework untuk AR

Sesudah instalasi FlashDevelop, anda perlu meletakkan Adobe Flex di dalam direktori Tools yang ada di direktori tempat FlashDevelop terinstall (beri nama folder flexsdk). FLARManager yang saya gunakan saya dapatkan di sini. FLARManager tersebut telah mendukung multi marker dengan multi collada. Pemilik blog menggunakan Away3D.

Pada awalnya saya menggunakan source code yang saya dapatkan mentah-mentah, namun hasilnya tidak memuaskan. Warna dasar dari collada yang saya gunakan tidak dapat ditampilkan dengan baik. Solusinya harus membuat tekstur material untuk ditempelkan di collada.

Teman saya menganjurkan untuk menggunakan method load() yang dimiliki class DAE. Tetapi masalahnya, class DAE adalah milik Papervision (PV3D), sementara source code menggunakan Away3D. Setelah berpusing ria memodifikasi kode MultiMarkerMultiCollada.as yang awalnya menggunakan Away3D, untuk diubah menjadi menggunakan Papervison, akhirnya saya menyerah.

Saya mencoba solusi lain:
Di dalam folder Example dari FLARManager, ada contoh kode yang digunakan untuk papervision, yaitu FLARManagerTutorial_Collada_PV3D.as. Saya mencoba memodifikasi kode di dalamnya, yang awalnya hanya untuk 1 marker menjadi multimarker, menggunakan acuan kode di dalam MultiMarkerMultiCollada.as, dan berhasil… Akhirnya saya bisa menampilkan multi collada menggunakan multi marker dengan PaperVision.
Kode hasil modifikasi saya mirip dengan yang ada di lOOney dOOdle. Karena MultiMarkerMultiCollada.as yang saya jadikan acuan adalah hasil modifikasi dari kode lOOney dOOdle.

Kuncinya ada di fungsi-fungsi berikut:

        private function onMarkerAdded (evt:FLARMarkerEvent) :void
       {
            trace(“[“+evt.marker.patternId+”] added”);
           
            //this.modelContainer.visible = true;
            //this.activeMarker = evt.marker;
           
            if (evt.marker.patternId == 0) {
                markerAdded(0);
                this.activeMarker = evt.marker;
            }
           
            if (evt.marker.patternId == 1) {
                markerAdded(1);
                this.activeMarker1 = evt.marker;
            }
           
            if (evt.marker.patternId == 2) {
                markerAdded(2);
                this.activeMarker2 = evt.marker;
            }
        }
       
        private function onMarkerUpdated (evt:FLARMarkerEvent) :void
       {
            trace(“[“+evt.marker.patternId+”] updated”);
            //this.modelContainer.visible = true;
            //this.activeMarker = evt.marker;
           
            if (evt.marker.patternId == 0) {
                markerAdded(0);
                this.activeMarker = evt.marker;
            }
           
            if (evt.marker.patternId == 1) {
                markerAdded(1);
                this.activeMarker1 = evt.marker;
            }
           
            if (evt.marker.patternId == 2) {
                markerAdded(2);
                this.activeMarker2 = evt.marker;
            }
        }
       
        private function onMarkerRemoved (evt:FLARMarkerEvent) :void
       {
            trace(“[“+evt.marker.patternId+”] removed”);
            //this.modelContainer.visible = false;
            //this.activeMarker = null;
           
            if (evt.marker.patternId == 0) {
                markerRemoved(0);
            }
           
            if (evt.marker.patternId == 1) {
                markerRemoved(1);
            }
           
            if (evt.marker.patternId == 2) {
                markerRemoved(2);
            }
           
            this.activeMarker = null;
            this.activeMarker1 = null;
            this.activeMarker2 = null;
        }
       
        private function onEnterFrame (evt:Event) :void {
            // apply the FLARToolkit transformation matrix to the Cube.
            if (this.activeMarker) {
                this.modelContainer.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker.transformMatrix);
            }
           
            if (this.activeMarker1) {
                this.modelContainer1.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker1.transformMatrix);
            }
           
            if (this.activeMarker2) {
                this.modelContainer2.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker2.transformMatrix);
            }
           
            // update the Papervision3D view.
            this.renderEngine.render();
        }
       
        private function markerAdded(markerId:int):void
       {
            switch(markerId) {
                case 0: {
                    if (modelContainer.visible == false) {
                        modelContainer.visible = true;
                        break;
                    } else {
                        break;
                    }
                }
                case 1: {
                    if (modelContainer1.visible == false) {
                        modelContainer1.visible = true;
                        break;
                    } else {
                        break;
                    }
                }
                case 2: {
                    if (modelContainer2.visible == false) {
                        modelContainer2.visible = true;
                        break;
                    } else {
                        break;
                    }
                }
            }
        }
       
        private function markerRemoved(markerId:int):void
       {
            switch(markerId) {
                case 0: {
                    if (modelContainer.visible == true) {
                        modelContainer.visible = false;
                        break;
                    } else {
                        break;
                    }
                }
                case 1: {
                    if (modelContainer1.visible == true) {
                        modelContainer1.visible = false;
                        break;
                    } else {
                        break;
                    }
                }
                case 2: {
                    if (modelContainer2.visible == true) {
                        modelContainer2.visible = false;
                        break;
                    } else {
                        break;
                    }
                }
            }
        }

File collada yang saya gunakan sebagai contoh saya dapatkan dari internet, untuk objek mario saya masih menggunakan contoh collada dari sini

Thanks to: Phat Cool atas sharing ilmunya