SlideShare ist ein Scribd-Unternehmen logo
1 von 8
@agatestudio

HTML5
Untuk Game
Oleh 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)
@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)
@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
@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
@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
@agatestudio

Tips memilih Framework / Game Engine
• Pilih struktur framework yang lebih familiar (flashlike, 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)
@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

Weitere ähnliche Inhalte

Ähnlich wie HTML5 untuk Game by Neneng Purnama

Html power point
Html power pointHtml power point
Html power point
minmon
 
Operating system windows 7
Operating system windows 7Operating system windows 7
Operating system windows 7
Dessi Syahid
 
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaver
imanprasetyo
 

Ähnlich wie HTML5 untuk Game by Neneng Purnama (20)

Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Pemrograman Web - HTML5
Pemrograman Web - HTML5Pemrograman Web - HTML5
Pemrograman Web - HTML5
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
Pengenalan html5
Pengenalan html5Pengenalan html5
Pengenalan html5
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Web browser
Web browserWeb browser
Web browser
 
Html power point
Html power pointHtml power point
Html power point
 
Windows 7
Windows 7Windows 7
Windows 7
 
Tugas 8 individuu
Tugas 8 individuuTugas 8 individuu
Tugas 8 individuu
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247
 
Ppt
PptPpt
Ppt
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
Operating system windows 7
Operating system windows 7Operating system windows 7
Operating system windows 7
 
Windows 7
Windows 7Windows 7
Windows 7
 
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaver
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Windows 8 Presentation (School Work)
Windows 8 Presentation (School Work)Windows 8 Presentation (School Work)
Windows 8 Presentation (School Work)
 

Mehr von Agate Studio

Digital Coloring by Raksa
Digital Coloring by RaksaDigital Coloring by Raksa
Digital Coloring by Raksa
Agate Studio
 
Computational Advertising by Icha
Computational Advertising by IchaComputational Advertising by Icha
Computational Advertising by Icha
Agate Studio
 
Game Programming Pattern by Restya
Game Programming Pattern by RestyaGame Programming Pattern by Restya
Game Programming Pattern by Restya
Agate Studio
 
Lee marvin pitching-hacks
Lee marvin pitching-hacksLee marvin pitching-hacks
Lee marvin pitching-hacks
Agate Studio
 
Emotiv EPOC by Neneng
Emotiv EPOC by NenengEmotiv EPOC by Neneng
Emotiv EPOC by Neneng
Agate Studio
 
MMO Design Architecture by Andrew
MMO Design Architecture by AndrewMMO Design Architecture by Andrew
MMO Design Architecture by Andrew
Agate Studio
 
How to Persuade People by Dave
How to Persuade People by DaveHow to Persuade People by Dave
How to Persuade People by Dave
Agate Studio
 
Eddie supersmash goodminton
Eddie   supersmash goodmintonEddie   supersmash goodminton
Eddie supersmash goodminton
Agate Studio
 
Satriyo digital audio gears
Satriyo   digital audio gearsSatriyo   digital audio gears
Satriyo digital audio gears
Agate Studio
 
Advanced encryption standard (aes) epul
Advanced encryption standard (aes)   epulAdvanced encryption standard (aes)   epul
Advanced encryption standard (aes) epul
Agate Studio
 
Real Time Framework by Tonny
Real Time Framework by TonnyReal Time Framework by Tonny
Real Time Framework by Tonny
Agate Studio
 
Unity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by PuthutUnity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by Puthut
Agate Studio
 
Hibernate by Jason
Hibernate by JasonHibernate by Jason
Hibernate by Jason
Agate Studio
 

Mehr von Agate Studio (20)

Digital Coloring by Raksa
Digital Coloring by RaksaDigital Coloring by Raksa
Digital Coloring by Raksa
 
Computational Advertising by Icha
Computational Advertising by IchaComputational Advertising by Icha
Computational Advertising by Icha
 
Freemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvinFreemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvin
 
Game Programming Pattern by Restya
Game Programming Pattern by RestyaGame Programming Pattern by Restya
Game Programming Pattern by Restya
 
Community Management by Yudhit
Community Management by YudhitCommunity Management by Yudhit
Community Management by Yudhit
 
[Habli] tds agustus
[Habli] tds agustus[Habli] tds agustus
[Habli] tds agustus
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedy
 
Toku DB by Aswin
Toku DB by AswinToku DB by Aswin
Toku DB by Aswin
 
Lee marvin pitching-hacks
Lee marvin pitching-hacksLee marvin pitching-hacks
Lee marvin pitching-hacks
 
Emotiv EPOC by Neneng
Emotiv EPOC by NenengEmotiv EPOC by Neneng
Emotiv EPOC by Neneng
 
Aksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by ValentAksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by Valent
 
MMO Design Architecture by Andrew
MMO Design Architecture by AndrewMMO Design Architecture by Andrew
MMO Design Architecture by Andrew
 
How to Persuade People by Dave
How to Persuade People by DaveHow to Persuade People by Dave
How to Persuade People by Dave
 
Eddie supersmash goodminton
Eddie   supersmash goodmintonEddie   supersmash goodminton
Eddie supersmash goodminton
 
Satriyo digital audio gears
Satriyo   digital audio gearsSatriyo   digital audio gears
Satriyo digital audio gears
 
Yinan heroes of-the_strom
Yinan   heroes of-the_stromYinan   heroes of-the_strom
Yinan heroes of-the_strom
 
Advanced encryption standard (aes) epul
Advanced encryption standard (aes)   epulAdvanced encryption standard (aes)   epul
Advanced encryption standard (aes) epul
 
Real Time Framework by Tonny
Real Time Framework by TonnyReal Time Framework by Tonny
Real Time Framework by Tonny
 
Unity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by PuthutUnity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by Puthut
 
Hibernate by Jason
Hibernate by JasonHibernate by Jason
Hibernate by Jason
 

Kürzlich hochgeladen

BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
JuliBriana2
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
ssuser35630b
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
pipinafindraputri1
 

Kürzlich hochgeladen (20)

power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"
 
MATEMATIKA EKONOMI MATERI ANUITAS DAN NILAI ANUITAS
MATEMATIKA EKONOMI MATERI ANUITAS DAN NILAI ANUITASMATEMATIKA EKONOMI MATERI ANUITAS DAN NILAI ANUITAS
MATEMATIKA EKONOMI MATERI ANUITAS DAN NILAI ANUITAS
 
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
 
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdfMAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptx
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
 
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptxSesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
 
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
 
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
 
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdfModul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
 
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
 

HTML5 untuk Game by Neneng Purnama

  • 2. @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)
  • 3. @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)
  • 4. @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
  • 5. @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
  • 6. @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
  • 7. @agatestudio Tips memilih Framework / Game Engine • Pilih struktur framework yang lebih familiar (flashlike, 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)
  • 8. @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