HTML5 untuk Game by Neneng Purnama

8
@agatestudio HTML5 Untuk Game Oleh Neneng Purnama

description

This is a review from one of Agate Studio Crew, Neneng Purnama. She brought this topik to Talent Development Saturday as routine agenda of Agate Studio.

Transcript of HTML5 untuk Game by Neneng Purnama

Page 1: HTML5 untuk Game by Neneng Purnama

@agatestudio

HTML5Untuk Game

Oleh Neneng Purnama

Page 2: HTML5 untuk Game by Neneng Purnama

@agatestudio

Apa itu?

HTML5 adalah revisi standar terbaru untuk HTML.

HTML = markup language untuk menstrukturkan dan merepresentasikan content pada web

Didesain :

• mensupport multimedia terbaru dan lebih mudah dibaca oleh manusia dan dimengerti oleh komputer/devices

• menggantikan fungsi dari HTML 4 (1999), XHTML dan DOM Lv 2 HTML (bahasa konvensi untuk mewakili dan berinteraksi dengan objek di HTML)

Page 3: HTML5 untuk Game by Neneng Purnama

@agatestudio

Kelebihan HTML5

• Markup (tags) : lebih banyak dan spesifik, lebih simple, lebih fleksibel

• API for multimedia, etc– Canvas : 2D drawing

– Video, audio : like flash, but more simple

– Drag-and-drop : buat webmu lebih interaktif

– Cross-document messaging : you’ll free now to take your data from iframe atau popup window

– Web storage : a flash storage to save data your web games without use database! Like a cookies

• Error handling : tidak usah khawatir lagi tampilan web jadi kapal pecah (if you know what i mean)

Page 4: HTML5 untuk Game by Neneng Purnama

@agatestudio

HTML5 used for game?

• Canvas : sebagai stage untuk render objek-objek

• Tags <audio> : buat game web kamu lebih ramai dengan SFX dan BGM

• Drag-and-drop : if you want give another kind of playing experience

• Not only for web browser! You can make a game cross-platform with this

HTML5 + Javascript = game web-based

Page 5: HTML5 untuk Game by Neneng Purnama

@agatestudio

Kekurangannya…

Jika kamu hanya pakai HTML5 dan javascript murni :

• Tidak banyak pilihan untuk menganimasikan objek

• Lebih cocok untuk gameplay yang sederhana (tidak banyak management stage/view)

• Tidak cocok untuk browser mobile (tidak ada penanganan event touch) game web-based for browser

Page 6: HTML5 untuk Game by Neneng Purnama

@agatestudio

Solusinya?

Use Framework / Game Engine (with JS) for HTML5

Contoh : ImpactJS, EaselJS, Three.js

Ribet?

You can use a game-maker like Construct 2, GameMaker, Cocos2d-X

Page 7: HTML5 untuk Game by Neneng Purnama

@agatestudio

Tips memilih Framework / Game Engine

• Pilih struktur framework yang lebih familiar (flash-like, ios-like, jquery-like, game-maker), terutama bagi pemula Javascript.

• Lihat kelengkapan dokumentasi dari framework tersebut (lebih bagus jika banyak yang membahas / membuat / memuat tutorial di forum / blog untuk mempermudah saat membutuhkan yang tidak ada di dokumentasi)

Page 8: HTML5 untuk Game by Neneng Purnama

@agatestudio

Kesimpulan

• HTML5 adalah revisi standar baru untuk HTML

• Bisa digunakan untuk membuat game dengan memakai fitur-fitur baru dalam HTML5

• Menggabungkan HTML5 dan Javascript (murni) saja tidak cukup untuk membuat game dalam skala besar (lebih cocok untuk game sederhana)

• Solusinya, bisa memakai framework / game engine Javascript