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.
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
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 :
opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s;
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
<?php include (ABSPATH . '/wp-content/plugins/gagambar/gagambar.php'); ?>
pada bagian tema wordpress yang diinginkan.
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.
- HTML
- CSS
- Javascript
- PHP
- 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
package
{
import org.flixel.*;
public class Peluru extends FlxSprite
{
[Embed(source = "peluru.png")]protected var imgPeluru:Class;
[Embed(source = "shoot.mp3")]protected var sndTembak:Class;
public function Peluru()
{
loadGraphic(imgPeluru, true, true, 16, 16);
width = 14;
height = 14;
offset.x = 1;
offset.y = 1;
acceleration.y = 400;
maxVelocity.y = 550;
health = 1;
}
public function tembak(Location:FlxPoint, Angle:Number):void {
super.reset(Location.x-width/2,Location.y-height/2);
FlxU.rotatePoint(0,-800,0,0,Angle,_point);
velocity.x = 0- _point.x;
velocity.y = 0 - _point.y;
solid = true;
FlxG.play(sndTembak);
}
override public function update():void {
if (touching || !onScreen()) kill();
super.update();
}
}
}
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
protected var _peluru:FlxGroup;
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);”
_peluru = new FlxGroup(); add(_peluru);
kemudian buat sebuat fungsi baru untuk mengoverride fungsi update
override public function update():void {
if (FlxG.mouse.justPressed()) {
(_peluru.recycle(Peluru) as Peluru).tembak(_pemain.getMidpoint(), _pemain.angle);
_pemain.play("nembak");
}
super.update();
}
Sekarang coba jalankan game nya (F5), jika tidak ada error, maka ketika mouse di klik, pemain akan mengeluarkan tembakan.
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.
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 :
- Flash Develop / Flash Builder yang dapat di download secara gratis di http://www.flashdevelop.org/ atau di http://www.adobe.com/products/flex.html
- Flex SDK, dapat di download dengan gratis di website adobe, http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk
- Flixel, download secara gratis di http://flixel.org/download.html
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’.
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.
