Category: Serius

ESRB dan Positifnya Main Game

Sabtu kemarin gue jadi tamu di acara Clevio Coder Camp di Cibubur. Di seminar yang berjudul “Mengubah Game Addiction menjadi Motivasi Belajar” itu dibahas segala permasalahan orang tua bagaimana menghadapi anak yang ketagihan bermain games.

Ada satu materi yang bikin gue duduk betah berlama-lama mendengarkan materinya. ESRB (Entertainment Software Rating Board). Ini adalah hal yang sering dilupakan oleh orang tua ketika membelikan anaknya video games. Ini juga yang dilupakan oleh RCTI ketika membuat tayangan Dua Sisi tentang game namun hanya menyoroti dampak negatifnya saja dari games.
Games pada dasarnya berbeda dengan Toys. Toys adalah mainan seperti boneka atau mobil mobilan yang anak – anak bebas memainkannya. Tapi games beda, games tidak hanya digital, games memiliki story, goals, rules, feedback system, dan voluntary. Itulah yang menurut gue juga bikin games jadi lebih luas daripada movie.
Jika di movie, kita mengenal rating Semua Umur, Bimbingan Orang Tua, dan lainnya (bisa baca disini), maka di games, ada ESRB. Kode ESRB ada di bagian belakang kemasan di pojok kiri bawah. Ada 6 tingkatan ESRB yang selama ini banyak digunakan di games
Early Childhood
Konten dalam game ini ditujukan untuk anak – anak. Tidak memuat konten yang bebau kekerasan sama sekali.
Everyone
Konten dalam game dengan rating ini cocok untuk segala usia. Baik dari anak – anak hingga dewasa dapat memainkannya. Rating ini setara dengan “Semua Umur” pada rating di film.
Everyone 10+
Hanya untuk orang diatas umur 10 tahun. Mungkin akan berisi sedikit fantasi atau kekerasan ringan dengan gambar kartun. Misalnya Lego Marvel Super Hero yang berisi pertarungan superhero melawan perjahat.
Teen
Untuk usia diatas 13 tahun. Mungkin akan berisi violence, humor – humor sederhana bagi usia remaja, penggunaan bahasa yang jarang digunakan, atau sudah ada ‘darah’ meskipun hanya sedikit.
Mature
Untuk usia diatas 17 tahun. Akan berisi lebih banyak darah dan konten – konten seksual. Atau juga penggunaan bahasa kasar dan kekerasan yang terlihat jelas. Misalnya GTA V yang didalamnya terdapat adegan mencuri mobil
Adults Only
game dengan rating ini hanya boleh dimainkan oleh orang dewasa. Rating ini setara dengan rating dewasa dalam Film. Game dengan rating ini sama dengan rating M hanya mungkin akan lebih kuat atua memuat unsur perjudian. Seperti game poker online dengan menggunakan transaksi uang yang nyata.
Rating – rating tersebut harusnya sudah dipahami dengan baik dan diaplikasikan oleh para orang tua yang memiliki anak yang kecanduan game. Kebanyakan orang tua, masih menganggap bahwa game adalah mainan anak kecil. Padahal kenyataanya game – game yang sekarang banyak beredar seperti GTA V diperuntukkan untuk orang dewasa.

Para orang tua juga sudah seharusnya mengerti dan mengikuti perkembangan jaman. Harus tau apa yang anak – anak mereka mainkan. Tidak sekedar melarang, karna games merupakan dunia dari anak – anak yang masih asik bermain.Games juga mempunyai banyak hal positif seperti Critical Thinking yang dibangun ketika mereka bermain game strategi yang menuntut mereka untuk berfikir lebih kritis agar mengalahkan lawan mereka. Decision Making yang dibangun ketika mereka harus menentukan satu tindakan untuk mengalahkan lawan mereka. Educational yang terbangun ketika mereka bermain game dengan konten / materi yang banyak berkaitan dengan hal – hal disekeliling mereka. Dan Build Relationship ketika mereka bermain game yang terkoneksi dengan social media sehingga mereka bisa berinteraksi dengan teman – temannya.Tapi agar hasil positif tersebut maksimal tentu kembali lagi ke pendampingan yang dilakukan orang tua terhadap anak – anaknya. Pendampingan tersebut bisa berwujud aturan – aturan yang disepakati bersama mengenai waktu bermain dan tanggung jawab yang harus diselesaikan oleh sang anak.Jadikan game sebagai alat sekaligus sahabat, karna game juga dapat digunakan untuk memotivasi anak – anak untuk belajar.

All kids need is a little help, a little hope and somebody who believes in them.
– Magic Johnson

We do not stop playing because we grow old, we grow old because we stop playing!
– Benjamin Franklin

Gagambar, Plugin WordPress

Download

Kali ini saya membuat satu buah plugin untuk menampilkan gambar secara bergantian dengan efek transisi yang sederhana. Plugin ini sengaja tidak menggunakan jQuery dengan banyak efek agar lebih simpel dan sangat ringan.

Efek transisi yang digunakan hanya menggunakan CSS3 Opacity dan Transition. Kode utama dari efek ini yaitu :

selanjutnya tinggal diatur opacity dari setiap gambar dengan menggunakan Javascript. Karena menggunakan CSS3, maka efek plugin ini pun hanya dapat berjalan pada browser dengan update terbaru yang sudah mendukung CSS3.

Gagambar akan mengambil gambar dari featured-image setiap postingan yang tersedia. Gagambar akan tampil dengan meletakkan kode

pada bagian tema wordpress yang diinginkan.

Screenshoot 1

Screenshoot 2

Download Gagambar Plugin WordPress Disini

Simple Ngatweet, Plugin untuk menampilkan twitter pengguna di WordPress

Belakangan ini saya mencoba untuk konsen kembali untuk mempelajari WordPress. Dan setelah belajar dari berbagai hal (blog, buku, bertanya) tentang konsep pembuatan plugin dan widget di wordpress, akhirnya saya mencoba untuk membuat 1 buah plugin. Plugin ini digunakan untuk menampilkan twitter pengguna di WordPress berupa widget yang dapat dipasang di sidebar maupun tempat lainnya.

Plugin ini sangat sederhana. Hanya berisi 1 buah file PHP, 1 buat file CSS, dan readme.txt.

Berikut penampakan dari plugin Simple Ngatweet yang telah dipasang di WordPress

Sedangkan ini adalah tampilan pada saat pengaturan Widgetnya

Untuk mempelajari kode sumber atau memasangnya di WordPress, silahkan download disini

Dasar HTML

HTML merupakan akronim dari Hyper Text Markup Language. Html tidak termasuk dalam bahasa pemograman, melainkan bahasa markah (markup language). Bahasa markah adalah bahasa yang deklaratif dan menggunakan berbagai tags dan atribut untuk menggambarkan tampilan dari sebuah dokumen.

Misalkan saja terdapat dokumen dengan teks

contoh dokumen html

untuk membuat teks tersebut tampil dengan huruf yang tebal, maka ditambahkan tag <b> di antara teks yang akan ditebalkan. Misal

contoh <b>dokumen</b> html

akan tampil di browser menjadi

contoh dokumen html

teks ‘<b>’ disebut dengan opening tag, sedangkan ‘</b>’ disebut sebagai closing tag. Setiap end tag, selalu dimulai dengan garis miring (slash, / ). Namun ada juga jenis tag yang lain, yang disebut dengan self-closing tag. Yaitu tag yang berdiri sendiri dan tidak membutuh kan closing tag. Tag seperti langsung menggunakan slash di akhir kode tagnya. Misalkan ‘<br />’ untuk ganti baris, atau ‘<hr />’ untuk membuat garis horisontal.

Membuat Dokumen HTML Pertama

HTML merupakan bahasa yang berbasis pada teks. Kita dapat menggunakan berbagai teks editor untuk membuat dokumen HTML. Namun, saya menyarankan untuk menggunakan Bluefish. Selain karena open source, bluefish juga bersifat gratis dan multiplatform. Bluefish memang editor yang dirancang khusus untuk progammer dan web developer. Bluefish mendukung banyak bahasa pemograman dan bahasa markup.

Buat sebuah dokumen baru menggunakan bluefish, lalu copy paste baris kode berikut :

<!DOCTYPE html>

<html>

<body>

<h1>Hallo, HTML</h1>
<p>Ini adalah contoh halaman HTML</p>

</body>

</html>

Lalu simpan dokumen tersebut dengan format .html. Maka tampilan dari dokumen yang telah disimpan akan menjadi seperti ini :

Dengan menggunakan bluefish, file html yang telah disimpan dengan format .html, akan berwarna berbeda pada setiap tag nya. Hal ini karena secara otomatis bluefish bekerja dengan Language Mode Generic HTML.

Sekarang kita coba buka file HTML yang telah kita simpan dengan menggunakan browser. Dan inilah yang akan terlihat:

Teks yang muncul pada browser, memiliki ukuran yang berbeda. Tag ‘<h1>’ merupakan tag untuk style Header 1. Sedangakan tag ‘<p>’ merupakan tag untuk style Paragraf. Teks yang diapit dengan tag Header 1 akan berukuran sesuai dengan standar ukuran Header pada browser, begitupula dengan teks yang diapit tag Paragraf.

Baris pertama pada dokumen html kita menjelaskan tipe dari dokumen tersebut.

<!DOCTYPE html>

Browser yang digunakan untuk membuka dokumen kita membutuhkan informasi ini untuk mengetahui jenis dokumen yang dibuka.

Selanjutnya yaitu baris opening tag

<html>

Tag ini merupakan tag utama. Setiap dokumen html dimulai dengan tag ini, dan kemudian diakhiri dengan tag ‘</html>’.

Begitu pula dengan tag ‘<body>’. Setiap hal yang akan ditampilkan kedalam browser, diletakkan di dalam tag ini.

 

Salam,
Afief Yona Ramadhana

let’s start again from scratch

Wah, udah lama gak nulis di blog ini. Kalau ditanya alesan, da pasti banyak. 🙂

Oke, kali ini saya akan coba mulai tulisan berseri lagi. Berhubung akhir – akhir ini sering dapet kerjaan yang berhubungan dengan website, jadi saya akan mulai menulis tutorial – tutorial pemograman website. Dan akan saya mulai dari hal yang sangat sederhana. Ada beberapa bahasa yang akan digunakan ketika membuat website.

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. SQL

HTML (HyperText Markup Language) adalah sebuah bahasa markah yang digunakan untuk menampilkan informasi yang terkandung didalamnya yang juga telah di tambahkan kode – kode markah sehingga menciptakan tampilan yang dikehendaki. Bahasa Markah sendiri adalah bahasa yang mengkombinasikan kode dan informasi sehingga informasi yang ditampilan dapat mempunyai bentuk yang berbeda – beda sesuai dengan kode yang ditambahkan.

HTML merupakan bahasa Client Side, yang artinya, kode – kode HTML akan di terjemahkan langsung oleh browser dari komputer pengguna menjadi tampilan yang memuat informasi di dalamnya. Untuk melihat kode – kode HTML dari tampilan website kalian, tinggal klik kanan, lalu pilih ‘view page source‘.

CSS (Cascading Style Scheets) merupakan bahasa pemograman yang digunakan untuk mengatur komponen – komponen pada HTML sehingga tampil lebih rapi dan menarik. CSS tidak dapat dipisahkan dari HTML, meskipun HTML dapat berdiri sendiri tanpa CSS.  CSS bersifat melengkapi HTML.

Javascript merupakan bahasa pemograman client side yang dapat bekerja di hampir semua browser. Javascript di dalam web digunakan untuk membuat tampilan website menjadi lebih dinamis dan interaktif. Berbagai animasi interaktif yang menarik dapat dibuat dengan menggunakan javascript. Salah satu library (kumpulan fungsi) dari javascript yang paling terkenal adalah jQuery.

PHP (PHP Hypertext Prepocessor) adalah bahasa pemograman yang bersifat server side. Itu artinya, instruksi – instruksi dalam PHP akan dijalankan sepenuhnya di server lalu hasilkan akan dikirimkan ke browser. Karna bersifat server side, maka kita tidak dapat melihat kode sumber PHP dari sebuah halaman website.

SQL (Structured Query Language) merupakan bahasa yang digunakan untuk mengakses dan mengatur database. Perangkat lunak yang dimanage oleh bahasa ini adalah MySQL. Database sangat penting dalam pembuatan website, karna ini merupakan tempat menyimpan data – data yang diperlukan untuk website tersebut.

Membuat MiniFlashGame dengan Flixel – Part 4

Di bagian keempat ini, kita akan membuat peluru dan menembakkannya melalui meriam yang telah kita buat pada tutorial bagian sebelumnya.

Buka project game yang telah dibuat pada bagian sebelumnya. Siapkan 1 buah gambar dan suara peluru. Gambar yang saya gunakan berukuran 16×16 px.

Lalu siapkan pula 1 buah file suara peluru ketika ditembakkan. Sebaiknya berformat .mp3. File yang saya gunakan >> shoot. Masukkan kedua fle tersebut ke dalam folder ‘src’.

Buat class baru dengan nama “peluru.as“. Ganti baris – baris kode default dengan kode-kode di bawah ini

kita membuat fungsi baru yaitu fungsi tembak dengan parameter ‘Location’ dan ‘Angle’. Parameter ‘Location’ berfungsi untuk menentukan dari posisi mana peluru itu ditembakkan, sedangkan ‘Angle’ akan berisi sudut yang sesuai dengan sudut ”pemain” segingga peluru yang ditembakkan akan selaras dengan posisi pemain.

Kemudian buka kembali class ‘Arena.as’. Tambahkan sebuah variabel baru di dalam class

Lalu letakkan ke dalam stage. Agar kelihatan ketika ditembakkan, maka posisi peluru harus berada di atas background. letakkan baris-baris kode berikut di bawah kode “add(_bg);”

kemudian buat sebuat fungsi baru untuk mengoverride fungsi update

Sekarang coba jalankan game nya (F5), jika tidak ada error, maka ketika mouse di klik, pemain akan mengeluarkan tembakan.

download src

Membuat MiniFlashGame dengan Flixel – Part 2

Ini lanjutan dari tutorial sebelumnya. Jadi, kalau ada yang baru membaca, ikuti tutorialnya dari http://code.afief.net/?p=104 🙂

Oke, di bagian kedua ini, kita akan membuat tampilan awal game, dan arena pada game. Pada bagian pertama kita sudah membuat project berisi file Main.as yang apabila dijalankan maka akan menghasilkan 1 error, yaitu “D:\x_periment\coba\MiniGame\src\Main.as(12): col: 20 Error: Access of undefined property Pembukaan.”

Error tersebut terjadi karena kita belum membuat class yang diisikan pada InitialState pada fungsi super(). Untuk membuatnya, klik kanan pada folder src pada Project Panel, pilih Add > New Class.

(more…)

Membuat MiniFlashGame dengan Flixel – Part 1

Seperti yang sudah saya tulis sebelumnya di http://code.afief.net/?p=98, bahwa flixel merupakan library actionnscript3 yang sangat membantu dalam pembuatan mini games. Saya akan mencoba untuk menulis tutorial pembuatan mini games dengan menggunakan flixel. Produk akhir dari tutorial ini nantinya yaitu game “ufogelo” yang coba saya buat di afief.net/ngulik/ufogelo1.x.

Yang harus disiapkan yaitu :

  1. Flash Develop / Flash Builder yang dapat di download secara gratis di http://www.flashdevelop.org/ atau di http://www.adobe.com/products/flex.html
  2. Flex SDK, dapat di download dengan gratis di website adobe, http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk
  3. Flixel, download secara gratis di http://flixel.org/download.html

(more…)

Flash Games dengan Flixel

Flixel merupakan library untuk bahasa Actionscript 3 yang di desain khusus untuk pembuatan game. Flixel dibuat oleh Adam Saltsman yang terkenal dengan mini game nya, Canabalt. Flixel banyak digunakan oleh orang – orang yang ingin membuat flash game dengan cepat dan mudah.

Flixel berisi fungsi-fungsi yang memudahkan pengguna untuk mengatur game nya. Fungsi yang menurut saya cukup menarik dalam library actionscript 3 ini yaitu ‘Collide’. Fungsi ini dapat mendeteksi objek yang bertabrakan, dan kita dapat menambahkan ‘function callback’ dari fungsi ini sendiri. Selain itu, kita juga dapat mendeteksi tabrakan dari banyak objek dengan 1 perintah collide saja dengan sebelumnya menggabungkan objek-objek tersebut menggunakan class ‘flxGroup’.

(more…)

View Based Application pada Flash Builder 4.5

Ketika kita membuat mobile project baru di Flash Builder 4.5. Kita akan diberikan 3 pilihan template tampilan aplikasi mobile. yaitu Blank, View-Based Application, dan Tabbed Application. Kalau blank, sudah jelas kita akan diberikan tampilan kosong. Sedangkan untuk View-Based Application, akan ada title bar di bagian atas yang juga bisa berfungsi sebagai navigator.  Sedangkan Tabbed Application lebih komplit lagi, ada menu ‘tab’ di bagian bawahnya untuk mempermudah navigasi.

(more…)