Browse Category

Html5 Game

Perbandingan Flash dan HTML5 pada Game

 

Bermain game online langsung di browser adalah salah satu kegiatan waktu luang yang sangat populer untuk dilakukan. Banyak orang melakukannya untuk alasan praktis, karena tidak perlu membeli permainan yang akan diinstal pada perangkat dan dapat dimainkan secara langsung pada aplikasi browser setiap kali diinginkan. Alasan lain adalah banyak game baru yang dirilis setiap hari oleh pengembang game di seluruh dunia, bukan sebagai konsol game yang hanya merilis beberapa waktu. Mungkin Anda adalah salah satu dari orang-orang yang tidak pernah atau bahkan hobi game online permainan browser. Teknologi yang digunakan untuk bermain game telah berkembang dari waktu ke waktu dan perkembangan teknologi. Dua raja teknologi di game online ini adalah Flash dan HTML5. Apa bedanya?

Flash

Teknologi flash sangat populer di awal perkembangan Internet saat ini. Flash banyak digunakan untuk menampilkan halaman website interaktif dan game online. Teknologi ini memiliki tampilan yang sama pada semua perangkat, jadi jika Anda melihat konten Flash di komputer, kemudian ditampilkan pada perangkat mobile, bahkan tampilan akan terlihat sama persis.

YouTube adalah contoh dari sebuah situs web yang menggunakan teknologi Flash untuk menampilkan video di Internet. Demikian pula dengan game online, contoh permainan Flash yang Anda kenal tentu Angry Birds. Ya, permainan dengan banyak burung berwarna-warni dalam misi ini untuk menghancurkan babi hijau jahat yang mencuri telur mereka. Untuk melihat konten Flash atau bermain game flash pada aplikasi browser, Anda harus menginstal plug-in disebut Adobe Flash Player. Plug-in biasanya sudah terdapat beberapa aplikasi browser, atau Anda dapat men-download langsung di website resminya.

HTML5

HTML5 meningkat popularitasnya sejak keputusan Steve Jobs tidak mendukung Flash pada perangkat iOS dan ketika Youtube membuat transisi dari penggunaan asli teknologi Flash untuk menampilkan video ke HTML5 pada situs desktop.

HTML5 banyak digunakan untuk pemrograman saat ini oleh webmaster untuk membuat website. HTML5 menggunakan pendekatan yang berbeda dengan Flash dalam penerapannya. Untuk game, HTML5 mengirim API untuk menampilkan teknologi tertentu seperti WebGL dan Canvas. Selain dapat digunakan untuk bermain di web game online, HTML5 dapat digunakan untuk membuat konten yang sangat dinamis karena website statis sudah sangat tradisional dan jumlah pengunjung lebih tertarik dalam berinteraksi dengan sesuatu yang “hidup” dan representatif.

Unit WebGL merupakan salah satu teknologi memainkan game online yang menjadi lebih populer setiap hari. Teknologi ini memungkinkan untuk menampilkan konten menggunakan unit sebagai Javascript dengan menggunakan HTML5 dan WebGL render; karena menggunakan teknologi HTML5, permainan bisa dimainkan dengan teknologi ini dalam aplikasi browser. Game disajikan akan menggunakan kemampuan dari kartu video (VGA) yang terhubung ke laptop atau bahkan meningkatkan kualitas gambar dan kinerja. WebGL juga mampu menghasilkan kualitas grafis 3D yang dapat disandingkan dengan konsol game. Contoh dari game online dengan WebGL adalah Combat Reloaded, penembak 3D dengan fitur multiplayer.

Kesimpulan

Di atas dua teknologi tersebut, Flash dan HTML5 adalah teknologi yang dapat digunakan untuk membuat konten digital yang baik. Flash telah terputus begitu lama, sementara HTML5 adalah teknologi yang relatif baru dan juga memiliki potensi yang baik. Mereka berdua memiliki kelebihan dan kekurangan, tetapi jika Anda melihat kurangnya dukungan tambahan untuk perangkat mobile, di mana pengguna meningkat, kita dapat mengatakan HTML5 adalah teknologi yang lebih baik untuk dipilih dan dikembangkan.

Beberapa Langkah-Langkah yang Harus di Perhatikan untuk Membuat Game Menggunakan HTML5

Membuat game pada jaman yang modern ini sudah tergolong mudah, sebab hanya menggunakan html5 saja dan tanpa menggunakan java sudah dapat membuat sebuah game sederhana. Hal ini tentu sangat menguntungkan bagi pengembang aplikasi yang sudah sangat mengenal bahasa HTML pada saat ingin membuat game di android ataupun lainnya.

Untuk membuat game di android menggunakan html5, salah satu caranya merupakan dengan menggunakan Intel XDK. Apabila anda sebelum sudah mengetahui membuat web game menggunakan html5, hanya perlu mengubah beberapa bagian kodingan saja supaya game-nya dapat lancar pada saat di jalankan di android.

Dengan menggunakan intel xdk, anda bisa menggunakan kodingan html5 yang sudah ada walaupun didesain untuk web atau anda dapat membuat kodingan sesuai dengan selera anda. Adapun beberapa langkah-langkah yang dapat di perhatikan sebelum membuat game menggunakan html5 adalah sebagai berikut.

-Canvas, Ini merupakan bagian terpenting di game sebab menjadi wadah dimana anda menggambar grafis-grafis untuk menganimasikan game yang telah anda buat.

-Jquery Mobile digunakan untuk memperindah penampilan aplikasi dan supaya komponen-komponen html5 lebih optimal untuk interaksi melalui sentuhan pengguna di laya sentuh perangkat mereka.

-Event onTouchStart element ini berfungsi untuk mendeteksi apabila sebuah komponen html5 disentuh oleh seseorang diperangkatnya.

-Java Script digunakan untuk mayoritas penulisan logika di game supaya game yang anda ciptakan dapat berfungsi seperti yang ditujukan.

-onDeviceReady ini bertujuan untuk sebagai tempat dimana programmer mulai memasukkan langkah-langkah pemrogramannya.

Untuk penjelasan lebih lanjut mengenai detail kodingan dari logic pemrograman untuk membuat game sudah ada pada baris komentar di kodingan dalam source code. Logika dalam kodingan tidaklah terlalu kompleks dan gampang dipahami apabila anda sudah mempunyai dasar matematika yang bagus. Pengembangan game menggunakan intel xdk tidak hanya untuk platform android melainkan anda juga dapat memakainya untuk platform lain seperti iOS dan windows phone tanpa harus mengubah kodingan.

Jenis-Jenis Game Berbasis HTML5 yang Paling Populer Saat Ini

Memainkan game online pada perangkat handphone merupakan salah satu kegiatan mengisi waktu luang yang paling populer dilakukan. Banyak orang melakukannya sebab karena kepraktisannya yang tidak perlu membeli game untuk dipasang pada perangkat, dan dapat langsung dimainkan pada aplikasi peramban kapan pun diinginkan. Namun, tahukah anda bagaimana sistem kerja online game? banyak online yang sudah berbasis html5.

HTML5 sendiri merupakan revisi kelima dari html, yang dapat disebut sebuah bahasa markah untuk menstrukturkan teknologi inti dari internet. Adanya hmtml5 mengubah segalanya, walaupun web umumnya menyetujui bahwa flash dan html5 mempunyai kelebihan dan spesialisasinya sendiri. Namun harus diketahui bahwa banyak web developer maupun pengembang game online sekarang cenderung menggunakan html5 ketimbang flash.

HTML5 juga lebih banyak digunakan karena html5 memiliki banyak fitur-fitur optimal dan keren seperti element Canvas, Audio, dan Video untuk membuat web-game tanpa menggunakan Flash, dan anda tidak membutuhkan lagi plug-in agar dapat bermain game. Lalu, apa saja jenis-jenis game berbasih html5 terbaru yang paling populer saat ini? berikut beberapa yang sudah kami rangkum.

-Agent 008 Ball, game biliar yang berbasis html5 ini paling banyak dimainkan sebab tidak membuat perangkat anda terasa lagging dan memiliki fitur unik seperti bom waktu pada saat bermain.

– Web Snooker yakni game snooker online yang dapat anda mainkan bersama teman-teman anda, apabila anda merasa bosan bermain snooker sendirian.

-Angry Birds Chrome untuk game ini pastilah semua orang tahu, game yang mengalahkan babi hijau jahat yang mencuri telur dari burung yang memiliki ragam warna. Game ini sendiri sudah dapat dimainkan di web yang menggunakan html5 dan pada saat bermain terasa lebih optimal.

-Canvas Rider yaitu permainan sepeda dengan trek yang ekstrem dan ditarik oleh pemain, game ini paling populer sebab dapat membuat anda ingin memainkannya lagi.

– Pac-Man Google Chrome, siapa yang tak mengenal game legenda ini. Ya, game ini sekarang dapat dimainkan pada web-game yang sebenarnya pada saat diciptakan menggunakan html5 untuk menciptakan logo animasi tuk permainan 30th anniversary pada tanggal 22 mei 2010 lalu.

Ingin Belajar Pemrograman Grafis dan Game, Wajib Mengenal HTML Canvas Terlebih Dahulu

Sebelum kedatangan HTML5, game dan elemen multimedia lainnya yang disajikan dalam browser menggunakan flash. Banyak game yang menggunakan flash dapat dimainkan pada browser, bahkan flash pun digunakan untuk memutar video di youtube apabila tidak ada flash maka video tak dapat di berjalan.

Akan tetapi semuanya itu berubah semenjak adanya html5. HTML5 memiliki banyak elemen baru yang lebih optimal ketimbang flash pada browser, yang salah satunya adalah canvas. Pada situs ini, canvas merupakan alat yang digunakan sebagai wadah untuk menggambar dan melukis, yang biasanya menggunakan pensil dan cat. Dalam pemrograman, canvas adalah elemen yang dapat digambar dengan banyak kode.

Elemen canvas pada html5 merupakan tag HTML yang hampir sama dengan tag

atau

dengan pengecualian apabila kontennya dirender menggunakan javascript. Untuk memanfaatkan canvas html5, anda harus menempatkan tag kanvas di suatu tempat dalam domen html, mengakses tag menggunakan javascript, menciptakan context, dan selanjutnya memanfaatkan HTML5 Canvas API untuk menggambar sesuatu.Pada saat anda ingin menggunakan canvas, wajib untuk mengetahui perbedaan antara elemen canvas dan context canvas, lantaran sering kali banyak yang bingung tentang keduanya. Elemen canvas merupakan DOM node yang sebenarnya ada lantaran disematkan di halaman html.

Context canvas yaitu objek dengan properti dan metode yang berfungsi sebagai merender grafik di dalam elemen canvas, context nya dapat 2D maupun 3D atau webgl.Setiap elemen canvas hanya dapat memiliki satu context. Apabila anda menggunakan metode getContext beberapa kali, hal tersebut akan mengembalikan referensi ke objek context yang sama. Adapun contoh sederhana dalam menggunakan canvas pada HTML5 yaitu:

<style>
body { margin: 0px; padding: 0px;}
</style>

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
<script>
var canvas= document.getElementByid(‘myCanvas’);
var context= canvas.getContext(‘2d’);
context.font=’40pt Calibri’;
context.fillStyle=’blue’;
context.fillText(‘Hello World!’, 150, 100);
</script>