LKP : Pembuatan Coding Content Untuk Speed Reading.

(1)

L

LAPORAN

N KERJA

A PRAKTE

EK

PEMBU

UATAN

C

CODING C

CONTENT

T

UNTUK

SPEED R

READING

G

Oleh:

Nama : MMaftuchatul Nujum Praabuningrat NIM : 100.51016.00228

Program SStudi : DDIV Komputter Multimeedia

SEKKOLAH TINNGGI M

MANAJEMEEN INFORRMATIKA && TEKNIKK KOMPUTTER SURABAYYA

2013

STIKOM

(2)

Membaca merupakan hal termudah yang membuat kita bisa menjelajahi dunia secara tidak langsung. Dengan membaca, seseorang memiliki wawasan yang luas walau tidak pernah melihat atau melakukan secara langsung. Tetapi jika membaca secara lambat, seseorang akan mengalami kejenuhan dan daya pemahaman akan berkurang. Membaca cepat atau speed reading merupakan cara yang mudah dalam memahami bacaan tanpa memerlukan waktu yang banyak.

PT. Siap Technovation Unggul tempat penulisan melakukan kerja praktek yang bergerak dalam bidang Industri Kreatif pembuatan dan pengembangan perangkat lunak (software) serta sistem pembelajaran modern berbasis keunggulan otak sebagai solusi Sekolah dan sistem pendidikan agar cepat, mudah, efisien, akuntabel dalam rangka membantu sekolah mencapai 8 Standar Nasional Mutu Pendidikan. Ketika penulis melakukan kerja praktek di perusahaan tersebut, perusahaan sedang mengembangkan pembelajaran speed reading. Agar pembelajaran lebih menarik dan menyenangkan, perusahaan memberikan project untuk membuat game speed reading. Dengan penambahan game dalam materi pembelajaran speed reading, sistem pembelajaran yang diberikan kepada masyarakat akan lebih menyenangkan dan mudah diterima oleh masyarakat.

Keyword: Membaca, Speed reading, PT. Siap Technovation Unggul. iv

STIKOM

(3)

DAFTAR ISI

Halaman

ABSTRAK ... iv

KATA PENGANTAR ... v

DAFTAR ISI ... vii

DAFTAR GAMBAR ... ix

DAFTAR LAMPIRAN ... xi

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 2

1.3 Batasan masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 3

1.6 Pelaksanaan ... 4

1.7 Sistematika Penulisan ... 4

BAB II LANDASAN TEORI ... 6

2.1 Game ... 6

2.2 Speed Reading ... 7

BAB III METODOLOGI DAN PERANCANGAN KARYA... 10

3.1 Metodologi Penelitian ... 10

3.1.1 Teknik Pengumpulan Data ... 10

3.1.2 Analisa Data ... 11

3.2 Perancangan Karya ... 12

vii

STIKOM

(4)

BAB IV IMPLEMENTASI KARYA ... 14

4.1 Pra produksi ... 14

4.2 Produksi ... 18

4.3 Pasca produksi ... 44

BAB V GAMBARAN UMUM PERUSAHAAN ... 47

5.1 Sekilas sejarah dan profil PT. Siap Technovation Unggul ... 47

5.2 Visi dan Misi PT. Siap Technovation Unggul ... 48

5.3 Budaya perusahaan ... 49

5.4 Lokasi Perusahaan ... 50

5.5 Logo Perusahaan ... 51

BAB VI PENUTUP ... 52

6.1 Kesimpulan ... 52

6.2 Saran ... 52

DAFTAR PUSTAKA ... 53

viii

STIKOM

(5)

DAFTAR GAMBAR

Halaman

Gambar 3.1 Flowchart perancangan ... 11

Gambar 4.1 Home Flash Word ... 15

Gambar 4.2 Pilihan menu Flash Word ... 15

Gambar 4.3 Tampilan modul pelatihan Flash Word ... 16

Gambar 4.4 Tampilan pilihan cerita... 16

Gambar 4.5 Tampilan pelatihan senam mata ... 17

Gambar 4.6 Tampilan Home ... 18

Gambar 4.7 Tampilan latihan ... 18

Gambar 4.8 Tampilan score ... 18

Gambar 4.9 Tampilan cerita 1 ... 19

Gambar 4.10 Tampilan cerita 2 ... 19

Gambar 4.11 Tampilan cerita 3 ... 20

Gambar 4.12 Tampilan cerita 4 ... 20

Gambar 4.14 Tampilan event sheets home ... 25

Gambar 4.14 Tampilan event sheets cerita 1 ... 29

Gambar 4.15 Tampilan event sheets cerita 2 ... 34

Gambar 4.16 Tampilan event sheets cerita 3 ... 39

Gambar 4.17 Tampilan event sheets cerita 4 ... 44

Gambar 4.18 Tampilan Menu utama hasil akhir ... 45

Gambar 4.19 Tampilan cerita hasil akhir ... 45

Gambar 4.20 Tampilan Question hasil akhir ... 46 ix

STIKOM

(6)

STIKOM

(7)

DAFTAR LAMPIRAN

Halaman

Lampiran 1 Form Surat Penerimaan Kerja Praktek ... 54

Lampiran 2 Form KP-5 Acuan Kerja ... 55

Lampiran 3 Form KP-5 Garis Besar Rencana Kerja Mingguan ... 56

Lampiran 4 Form KP-6 Log Harian dan Catatan Perubahan Acuan Kerja 1 ... 57

Lampiran 5 Form KP-6 Log Harian dan Catatan Perubahan Acuan Kerja 2 ... 58

Lampiran 6 Form KP-7 Kehadiran Kerja Praktek 1 ... 59

Lampiran 7 Form KP-7 Kehadiran Kerja Praktek 2 ... 60

Lampiran 8 Kartu Bimbingan (depan) ... 61

Lampiran 9 Kartu Bimbingan (belakang) ... 62

STIKOM

(8)

1.1 Latar Belakang

Tujuan yang ingin dicapai dalam Kerja Praktek ini adalah membuat game speed reading sebagai content dalam interaktif speed reading. Hal ini dilatarbelakangi oleh minimnya game edukasi untuk umum terutama untuk speed reading.

Slogan budaya membaca sudah terdengar sejak lama, bahkan pemerintah membuat iklan layananan masyarakat atau yang biasa disingkat ILM agar masyarakat tergerak untuk membaca. Karena masyarakat tidak terbiasa membaca sejak dini, mereka tidak memiliki wawasan yang luas dan tergerak untuk membuat Indonesia semakin maju. Membaca merupakan hal termudah untuk menjelajah dunia secara tidak langsung. Dengan membaca kita mengetahui berbagai hal yang ada di dunia, mulai dari musibah, berita tokoh, sejarah dunia, dan sebagainya.

Yang sering didengar jawaban dari masyarakat ketika ditanya alasan mengapa tidak membaca adalah karena banyaknya tulisan. Masyarakat lebih suka sebuah buku atau artikel yang paling tidak ada satu gambar. Dengan mempelajari cara membaca cepat atau yang biasa disebut speed reading, masyarakat akan lebih mudah membaca tanpa perlu pusing ketika melihat buku atau artikel yang terlalu banyak tulisan. Tidak hanya cepat membaca, masyarakat juga akan lebih mudah memahami buku atau

STIKOM

(9)

artikel yang dibaca dengan waktu yang singkat, karena kebanyakan masyarakat akan merasa bosan atau jenuh jika terlalu lama membaca.

Modul atau pembelajaran tentang speed reading sudah banyak beredar dengan berbagai macam penjelasan agar masyarakat mudah memahami, tetapi masih sedikit yang membuatnya dalam bentuk game. Game merupakan bentuk seni yang divisualisasikan dalam sebuah permainan. Game saat ini tidak hanya diminati oleh anak-anak saja, tetapi juga berbagai kalangan masyarakat. Game merupakan hiburan yang mudah untuk menghilangkan stres, kejenuhan dalam bekerja atau beraktivitas, dan lain sebagainya. Dengan bermain game masyarakat dapat menghilangkan kejenuhan dengan mudah dan bisa beraktivitas dengan baik lagi.

PT. Siap Technovation Unggul merupakan perusahaan yang bergerak dibidang pendidikan, yaitu membuat materi pembelajaran yang efisien agar masyarakat lebih mudah memahami materi yang diberikan. Didalam tempat Kerja Praktek penulis, Direktur perusahaan memberikan project game untuk speed reading agar pembelajaran dalam speed reading lebih menarik dan mudah dipahami masyarakat. Disini penulis hanya akan membuat coding dalam pembuatan game speed reading.

Game yang dibuat berdasarkan beberapa cara atau teknik untuk membaca cepat.

1.2 Rumusan Masalah

Dari latar belakang diatas, ditemukan rumusan masalah sebagai berikut:

Bagaimana membuat coding untuk game speed reading sebagai content

interaktif speed reading?

STIKOM

(10)

1.3 Batasan Masalah

Dari rumusan masalah diatas, terdapat batasan-batasan dalam pengerjaan Kerja Praktek ini adalah sebagai berikut:

Penulis hanya mengerjakan coding dalam pembuatan game speed reading. 1.4 Tujuan

Tujuan yang ingin dicapai dalam pelaksanaan Kerja Praktek ini adalah sebagai berikut:

1. Membuat game speed reading sebagai content dalam interaktif speed reading. 2. Mendapatkan pengalaman kerja.

1.5 Manfaat

Manfaat yang didapat dari pelaksanaan Kerja Praktek ini adalah sebagai berikut:

Untuk perusahaan:

1. Hasil kerja Praktek dapat di implementasikan didalam content interaktif speed reading.

Untuk penulis:

1. Menambah pengalaman dalam membuat game terutama untuk game edukasi. 2. Memahami struktur kerja dalam perusahaan.

3. Menambah pengalaman didalam dunia kerja.

STIKOM

(11)

1.6 Pelaksanaan

Waktu dan tempat pelaksanaan Kerja Praktek yang dilaksanakan adalah sebagai berikut:

Tempat : PT. SiapTechnovation Unggul Surabaya Alamat : Jalan Jagir wonokromo 100

Ruko Mangga Dua Blok A9 No 7 Surabaya, Jawa Timur

Waktu : 8 Juli 2013 s/d 8 Agustus 2013

1.7 Sistematika Penulisan

Sistematika penulisan Laporan Kerja Praktek ini disusun sebagai berikut: BAB I PENDAHULUAN

Dalam bab ini dijelaskan tentang latar belakang, rumusan masalah, batasan masalah, tujuan, manfaat, pelaksanaan dan sistematika penulisan.

BAB II LANDASAN TEORI

Dalam bab ini akan dibahas mengenai berbagai hal tentang game, speed reading, dan berbagai hal yang berhubungan dengan game dan speed reading.

BAB III METODOLOGI PENELITIAN DAN PERANCANGAN KARYA

Dalam bab ini akan menjelaskan tentang metodologi penelitian apa yang digunakan dalam Kerja Praktek ini serta perancangan karya dalam pengerjaan Kerja Praktek.

STIKOM

(12)

BAB IV IMPLEMENTASI KARYA

Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan penjabaran dari perancangan karya, meliputi pra produksi, produksi, dan pasca produksi.

BAB V GAMBARAN UMUM PERUSAHAAN

Dalam bab ini akan diuraikan mengenai sejarah perusahaan, visi misi, struktur organisasi, serta alamat lengkap perusahaan.

BAB VI PENUTUP

Dalam bab ini penulis akan menguraikan kesimpulan dan saran pelaksanaan Kerja Praktek.

STIKOM

(13)

BAB II

LANDASAN TEORI

Dalam bab ini akan dibahas mengenai berbagai hal tentang game, speed reading, dan berbagai hal yang berhubungan dengan game dan speed reading.

2.1 Game

Menurut Ernest Adams (2010:3) dalam bukunya yang berjudul Fundamentals of Game Design menjelaskan bahwa

“A game is a type of play activity, conducted in the context of a pretended reality, in which the participant(s) try to achieve at least one arbitrary, nontrivial goal by acting in accordance with rules.”

Menurut jenisnya (Ernest, 2010) (Samuel, 2005) game dibagi menjadi: 1. Action games

a. Shooters games

• 2d Shooters games • 3d Shooters games b. Platform games

c. Fighting games d. Fast puzzle games

STIKOM

(14)

e. Action-adventure games f. Music, dance, rhythm games 2. Strategy games

3. Role-playing games 4. Sports games 5. Vehicle simulations

6. Construction and management simulations 7. Adventure games

8. Artificial life and puzzle games 9. Online gaming

10. Educational and edutainment 11. Full motion video games (FMV)

2.2 Speed Reading

Membaca merupakan aktivitas yang melibatkan otak dan imajinasi sebagai pemahaman serta indera penglihatan sebagai memahami apa yang kita baca. Kebiasaan seseorang membaca secara lambat karena menggerakkan bibir saat membaca per kata, menggerakkan kepala, menngunakan jari sebagai penunjuk sampai mana yang kita baca, serta bersuara secara pelan saat membaca (Soedarso, 2006).

Menurut Yumiko Tobitani (2006) dalam bukunya yang berjudul Quantum Speed Reading menjelaskan bahwa

STIKOM

(15)

“Quantum speed reading reveals a simple way for anyone to unlock their intuitive nature, a proposal that could potentially transform education, help improve memory, boost concertration, and much more.”

“Speed reading is simple to follow, easy to understand and fun too. You will find out how fast your reading speed is now and then discover how you could be reading dramatically faster in no time. And you won’t just improve your reading speed, but your concertration an comprehension level will soar too. Speed reading will revolutionise the way you read. You will save days, weeks even months of your precious time. You will learn more efficiently quickly. And you will be left marveling at your new-found speed reading abilities.”(Tony Buzan, 2010)

Adapun rumus dalam mengukur kecepatan membaca seperti yang dijelaskan Soedarso (2006:14) dalam bukunya yang berjudul Speed Reading :

Jumlah kata yang dibaca

x 60 = Jumlah kata per menit (kpm) Jumlah detik untuk membaca

Pada umumnya orang hanya mampu membaca 125 kpm, sedangkan untuk di Indonesia rata-rata 175-300 kpm. Akan tetapi jika berlatih speed reading, kecepatan membaca akan naik hingga 325-500 kpm. Dengan membaca cepat, waktu yang dibutuhkan untuk membaca relatif lebih cepat dan tidak memakan waktu yang banyak dengan pemahaman yang baik. Dengan melatih seperti membaca dengan gerakan

STIKOM

(16)

mata, membaca frase, mengenal kata-kata kunci bisa menambah kecepatan membaca seseorang, baik fiksi maupun nonfiksi. Skimming dan scanning merupakan cara yang paling efisien dalam mengatur kecepatan membaca, terutama untuk nonfiksi (Soedarso, 2006).

STIKOM

(17)

BAB III

METODOLOGI PENELITIAN DAN PERANCANGAN KARYA

Dalam bab ini akan menjelaskan tentang metodologi penelitian apa yang digunakan dalam Kerja Praktek ini serta perancangan karya dalam pengerjaan Kerja Praktek.

3.1 Metodologi Penelitian

“Metode merupakan kegiatan ilmiah yang berkaitan dengan suatu cara kerja (sistematis) untuk memahami suatu subjek atau objek penelitian, sebagai upaya untuk menemukan jawaban yang dapat dipertanggungjawabkan secara ilmiah dan termasuk keabsahannya” (Ruslan, 2003)

Menurut cara menganalisisnya, metode penelitian dibagi menjadi tiga yaitu, metode penelitian kualitatif, metode penelitian kuantitatif, dan metode penelitian kombinasi. Dalam penelitian ini penulis menggunakan metode penelitian kualitatif.

3.1.1 Teknik pengumpulan data

Pengumpulan data didapat dari observasi dan briefing yang dilakukan antara penulis dengan perusahaan untuk membahas project yang akan dibuat. Saat observasi ke perusahaan, penulis dijelaskan mulai dari mengenai perusahaan hingga beberapa

project yang sedang perusahaan kerjakan. 10

STIKOM

(18)

Pada tanggal 8 Juli 2013, Direktur memberikan project pembelajaran speed reading yang akan dikerjakan secara tim. Direktur menjelaskan sedikit gambaran umum tentang speed reading yang setelahnya tim akan mencari tahu sendiri secara lengkap apa itu speed reading. Pembelajaran speed reading yang dibuat dalam bentuk interaktif yang didalamnya terdapat beberapa menu termasuk content, game termasuk dalam kategori content dalam interaktif speed reading. Disini penulis hanya membuat game speed reading.

3.1.2 Analisa data

Didalam pembuatan game speed reading ini ada proses perancangan yang akan digambarkan dalam bentuk flowchart

Pencarian data Mencari referensi Membuat konsep secara tim keseluruhan

Perancangan desain game

Pembuatan menu-menu dalam game

Testing game Pembuatan game

Membuat konsep dengan tim pembuatan game

Gambar 3.1 Flowchart Perancangan

Dari flowchart diatas dapat dijelaskan bahwa penulis melakukan pencarian data untuk melengkapi data-data yang telah dimiliki dalam pembuatan game, mencari

STIKOM

(19)

referensi dilakukan sebagai acuan dalam desain dan rancangan game yang akan dibuat. Proses dilakukan dengan membuat konsep, baik secara tim keseluruhan maupun tim pembuatan game. Konsep yang telah dibuat dipresentasikan kepada Direktur. Perancangan desain dan menu-menu dalam game dibuat menggunakan

software pengolahan grafis vektor dengan beberapa revisi dari perusahaan. Pembuatan game mulai dilakukan setelah perancangan desain selesai direvisi, pembuatan game dibuat mengguakan software pengolahan game yang dapat diaplikasikan dalam html 5. Test game dilakukan setelah pembuatan game selesai. 3.2 Perancangan karya

3.2.1 Pra Produksi

Dalam tahap pra produksi ini, penulis melakukan pencarian data secara lengkap, membuat konsep dan rancangan, serta mencari beberapa referensi game sebagai gambaran atau acuan untuk mendukung pembuatan game speed reading. 3.2.2 Produksi

Pada tahap ini, tim mulai membuat rancangan desain dan penulis melakukan beberapa testing sederhana untuk pembuatan game, sebelum pada proses pembuatan secara lengkap.

Setelah rancangan desain selesai, penulis melakukan pembuatan game secara lengkap berdasarkan referensi-referensi game.

STIKOM

(20)

3.2.3 Pasca Produksi

Pada tahap ini, penulis melakukan beberapa testing apakah game yang dibuat bermasalah atau tidak. Dan penulis melakukan beberapa perbaikan pada game yang setelah di testing terdapat beberapa masalah.

STIKOM

(21)

BAB IV

IMPLEMENTASI KARYA

Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan penjabaran dari perancangan karya, meliputi pra produksi, produksi, dan pasca produksi.

4.1 Pra Produksi

Pada tahapan pra produksi ini, penulis melakukan pencarian data secara lengkap, membuat konsep dan rancangan, serta mencari beberapa referensi game sebagai gambaran atau acuan untuk mendukung pembuatan game speed reading.

Pencarian referensi dilakukan berdasarkan penjelasan dan data dari perusahaan. Disini penulis menggunakan referensi latihan dari modul pembelajaran Flash Word yang akan digunakkan sebagai acuan dalam pembuatan game speed reading. Flash Word merupakan bentuk latihan modul pembelajaran speed reading. Dengan tampilan yang sangat sederhana, modul dibuat semenarik mungkin agar dapat menarik minat masyarakat untuk mencoba.

STIKOM

(22)

Gambar 4.1 Home Flash Word

Gambar 4.2 Pilihan Menu Flash Word

STIKOM

(23)

Gambar 4.3 Tampilan modul pelatihan Flash Word

Gambar 4.4 Tampilan pilihan cerita

STIKOM

(24)

Gambar 4.5 Tampilan pelatihan senam mata

AceReader merupakan aplikasi untuk ios, aplikasi ini dalam bentuk pelatihan

speed reading. Aplikasi ini melatih kita untuk senam matadan membaca secara cepat dengan waktu yang telah ditentukan.

STIKOM

(25)

Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan

Gambar 4.8 Tampilan score

4.2 Produksi

Pada tahap ini, tim mulai membuat rancangan desain dan penulis melakukan beberapa testing sederhana untuk pembuatan game, sebelum pada proses pembuatan secara lengkap.

STIKOM

(26)

Setelah lengkap berd

h rancangan dasarkan ref

n desain sele ferensi-refere

esai, penulis ensi game.

s melakukann pembuatann game secaara

Gambaar 4.9 Tampiilan cerita 1 Gambar 4.10 Tampilan cerita 2

STIKOM

(27)

20 s d u b Gamba Gamb

software pen disusun seca untuk memb

Dalam berdasarkan

ar 4.11 Tamp

ar diatas m ngolahan ga ara rapi did buat game. m pembuatan

tingkat kes

pilan cerita 33 Gambar 4.12 Tampilan cerita 4

merupakan ta ame yang dap

dalam softwa

ampilan cer pat diaplika

are, kemudi

rita saat gam sikan dalam ian mulai m

me mulai d m html 5. Cer

menggunakan

dibuat didala rita yang tel n event shee

am lah

ets

nnya, user

sulitan dan

diberikan b panjang da

beberapa pil ari cerita. Sa

ihan cerita. aat memula

Cerita diur ai game, tim

rut

mer

STIKOM

(28)

secara otomatis akan berjalan hingga user menjawab pertanyaan yang disediakan dan men-submit. Setelah submit, score akan muncul.

a. Event sheets (Coding) Home <html>

<head>

<title>New project (Construct 2 preview)</title> <meta charset="UTF-8" />

width: 100%;

padding: 0;

display: table;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#frameTC {

padding: 0;

vertical-align: middle;

display: table-cell;

margin: 0;

}

#borderwrap {

background: #616161;

border: 1px solid #8F8F8F; padding: 15px;

border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; }

STIKOM

(29)

22 #c2canvasdiv { width: 266px; height: 480px; } canvas {

-ms-touch-action: none;

} </style>

jQuery(window).resize(function() {

if (window.c2resizestretchmode === 1) {

window.c2resizestretchmode = 2;

// put back when breaking back out of fullscreen

var canvas =

document.getElementById("c2canvas");

window.c2oldcanvaswidth =

canvas.width;

window.c2oldcanvasheight =

canvas.height;

window.c2eventtime = Date.now();

var w = jQuery(window).width();

STIKOM

(30)

var h = jQuery(window).height();

cr_sizeCanvas(w, h);

}

else if (window.c2resizestretchmode === 2) {

// Size event fires twice on FF + Chrome, ignore second trigger

if (Date.now() > window.c2eventtime + 50)

{

window.c2resizestretchmode =

0; cr_sizeCanvas(window.c2oldcanvaswidth, window.c2oldcanvasheight); } } });

// Start the project running on window load

jQuery(document).ready(function ()

{

// Create new runtime using the c2canvas cr.createRuntime("c2canvas"); });

// Pause and resume on page becoming visible/invisible

function onVisibilityChanged() {

if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)

cr_setSuspended(true); else cr_setSuspended(false); }; document.addEventListener("visibilitychange", onVisibilityChanged, false); document.addEventListener("mozvisibilitychange", onVisibilityChanged, false); document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false); document.addEventListener("msvisibilitychange", onVisibilityChanged, false); </script> </head> <body>

STIKOM

(31)

<canvas id="c2canvas"

width="266" height="480">

Layout Size untuk tampilan pada browser menggunakan Width: 1280 pixels dan

Height: 1024 pixels. Size yang dipakai berdasarkan size umum untuk tampilan website. Margins menggunakan Width dan Height 500 pixels. Posisi Layout untuk desain background dengan koordinat X:133 dan koordinat Y:240. Serta Size Layout

untuk desain background dengan Width: 266 pixels dan Height: 480 pixels.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button

cerita 1. System akan melakukan animasi Button tiap 1,5 detik setelah Button di klik. Dan masuk ke cerita 1.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button

cerita 2. System akan melakukan animasi Button tiap 1,5 detik setelah Button di klik. Dan masuk ke cerita 2.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button

cerita 3. System akan melakukan animasi Button tiap 1,5 detik setelah Button di klik. Dan masuk ke cerita 3.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button

cerita 4. System akan melakukan animasi Button tiap 1,5 detik setelah Button di klik. Dan masuk ke cerita 4.

STIKOM

(32)

Gambar 4.13 Tampilan event sheets home b. Event sheets (Coding) cerita 1

<title>New project (Construct 2 preview)</title> <meta charset="UTF-8" />

{

background: #000;

min-height: 100%; height: 100%;

-ms-touch-action: none; }

#frameT {

width: 100%;

padding: 0;

display: table;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#frameTC {

padding: 0;

vertical-align: middle;

display: table-cell;

STIKOM

(33)

margin: 0;

}

#borderwrap {

background: #616161;

border: 1px solid #8F8F8F; padding: 15px;

border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; } #c2canvasdiv { width: 266px; height: 480px; } canvas {

-ms-touch-action: none;

} </style>

jQuery(window).resize(function() {

STIKOM

(34)

if (window.c2resizestretchmode === 1) {

window.c2resizestretchmode = 2;

// put back when breaking back out of fullscreen

var canvas =

document.getElementById("c2canvas");

window.c2oldcanvaswidth =

canvas.width;

window.c2oldcanvasheight =

canvas.height;

window.c2eventtime = Date.now();

var w = jQuery(window).width();

var h = jQuery(window).height();

cr_sizeCanvas(w, h);

}

else if (window.c2resizestretchmode === 2) {

// Size event fires twice on FF + Chrome, ignore second trigger

if (Date.now() > window.c2eventtime + 50)

{

window.c2resizestretchmode =

0; cr_sizeCanvas(window.c2oldcanvaswidth, window.c2oldcanvasheight); } } });

// Start the project running on window load

jQuery(document).ready(function ()

{

// Create new runtime using the c2canvas cr.createRuntime("c2canvas"); });

// Pause and resume on page becoming visible/invisible

function onVisibilityChanged() {

if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)

STIKOM

SURABAYA

(35)

document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);

document.addEventListener("msvisibilitychange", onVisibilityChanged, false);

</script> </head>

<body>

<canvas id="c2canvas"

width="266" height="480">

Layout Size untuk tampilan pada browser menggunakan Width: 1280 pixels dan

untuk desain background dengan Width: 266 pixels dan Height: 480 pixels.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melakukan penambahan 1 detik tiap 1 detik ketika masuk ke cerita 1 pada halaman 1. Dan masuk ke halaman 2.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 1. Dan masuk ke halaman 3.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button TRUE dalam menjawab Question. Dan event mouse, condition on object clicked pada

STIKOM

(36)

sisi kiri mouse untuk Button FALSE dalam menjawab Question. Action Button TRUE

dan action Button FALSE melakukan invisible ketika Button di klik. Pada Question 1 dan 4 system melakukan penambahan score 20 untuk Button TRUE dan pengurangan

score 15 untuk Button FALSE. Pada Question 2, 3, dan 5 system melakukan pengurangan score 15 untuk Button TRUE dan penambahan score 20 untuk Button FALSE.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Submit. Semua action invisible dan menampilkan action score untuk comprehension,

action timer, action dari rumus speed reading.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Home. Kembali ke home dan system akan me-reset semua variable ke semula.

Gambar 4.14 Tampilan event sheets cerita 1

STIKOM

(37)

c. Event sheets (Coding) cerita 2 <html>

<head>

<title>New project (Construct 2 preview)</title> <meta charset="UTF-8" />

width: 100%;

padding: 0;

display: table;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#frameTC {

padding: 0;

vertical-align: middle;

display: table-cell;

margin: 0;

}

#borderwrap {

background: #616161;

border: 1px solid #8F8F8F; padding: 15px;

border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; } #c2canvasdiv { width: 266px; height: 480px; }

STIKOM

SURABAYA

(38)

canvas {

-ms-touch-action: none;

} </style>

jQuery(window).resize(function() {

if (window.c2resizestretchmode === 1) {

window.c2resizestretchmode = 2;

// put back when breaking back out of fullscreen

var canvas =

document.getElementById("c2canvas");

window.c2oldcanvaswidth =

canvas.width;

window.c2oldcanvasheight =

canvas.height;

window.c2eventtime = Date.now();

var w = jQuery(window).width();

var h = jQuery(window).height();

cr_sizeCanvas(w, h);

}

else if (window.c2resizestretchmode === 2) {

// Size event fires twice on FF + Chrome, ignore second trigger

STIKOM

(39)

if (Date.now() > window.c2eventtime + 50)

{

window.c2resizestretchmode =

0; cr_sizeCanvas(window.c2oldcanvaswidth, window.c2oldcanvasheight); } } });

// Start the project running on window load

jQuery(document).ready(function ()

{

// Create new runtime using the c2canvas cr.createRuntime("c2canvas"); });

// Pause and resume on page becoming visible/invisible

function onVisibilityChanged() {

if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)

STIKOM

(40)

Layout Size untuk tampilan pada browser menggunakan Width: 1280 pixels dan

untuk desain background dengan Width: 266 pixels dan Height: 480 pixels.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 1. Dan masuk ke halaman 3.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button TRUE dalam menjawab Question. Dan event mouse, condition on object clicked pada sisi kiri mouse untuk Button FALSE dalam menjawab Question. Action Button TRUE

dan action Button FALSE melakukan invisible ketika Button di klik. Pada Question 1, 2, dan 5 system melakukan penambahan score 20 untuk Button TRUE dan pengurangan score 15 untuk Button FALSE. Pada Question 3 dan 4 system

melakukan pengurangan score 15 untuk Button TRUE dan penambahan score 20 untuk Button FALSE.

STIKOM

(41)

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Submit. Semua action invisible dan menampilkan action score untuk comprehension,

action timer, action dari rumus speed reading.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Home. Kembali ke home dan system akan me-reset semua variable ke semula.

Gambar 4.15 Tampilan event sheets cerita 2 d. Event sheets (Coding) cerita 3

<title>New project (Construct 2 preview)</title> <meta charset="UTF-8" />

{

background: #000;

min-height: 100%; height: 100%;

-ms-touch-action: none;

STIKOM

(42)

}

#frameT {

width: 100%;

padding: 0;

display: table;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#frameTC {

padding: 0;

vertical-align: middle;

display: table-cell;

margin: 0;

}

#borderwrap {

background: #616161;

border: 1px solid #8F8F8F; padding: 15px;

border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; } #c2canvasdiv { width: 266px; height: 480px; } canvas {

-ms-touch-action: none;

} </style>

STIKOM

(43)

jQuery(window).resize(function() {

if (window.c2resizestretchmode === 1) {

window.c2resizestretchmode = 2;

// put back when breaking back out of fullscreen

var canvas =

document.getElementById("c2canvas");

window.c2oldcanvaswidth =

canvas.width;

window.c2oldcanvasheight =

canvas.height;

window.c2eventtime = Date.now();

var w = jQuery(window).width();

var h = jQuery(window).height();

cr_sizeCanvas(w, h);

}

else if (window.c2resizestretchmode === 2) {

// Size event fires twice on FF + Chrome, ignore second trigger

if (Date.now() > window.c2eventtime + 50)

{

window.c2resizestretchmode =

0; cr_sizeCanvas(window.c2oldcanvaswidth, window.c2oldcanvasheight); } } });

// Start the project running on window load

jQuery(document).ready(function ()

{

// Create new runtime using the c2canvas

STIKOM

(44)

cr.createRuntime("c2canvas"); });

// Pause and resume on page becoming visible/invisible

function onVisibilityChanged() {

if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)

cr_setSuspended(true); else

cr_setSuspended(false); };

document.addEventListener("visibilitychange", onVisibilityChanged, false);

document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);

document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);

document.addEventListener("msvisibilitychange", onVisibilityChanged, false);

</script> </head>

<body>

<canvas id="c2canvas"

width="266" height="480">

Layout Size untuk tampilan pada browser menggunakan Width: 1280 pixels dan

untuk desain background dengan Width: 266 pixels dan Height: 480 pixels.

STIKOM

(45)

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 1. Dan masuk ke halaman 3.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 2. Dan masuk ke halaman 4.

dan action Button FALSE melakukan invisible ketika Button di klik. Pada Question 1, 4, dan 5 system melakukan pengurangan score 15 untuk Button TRUE dan penambahan score 20 untuk Button FALSE. Pada Question 2 dan 3 system melakukan penambahan score 20 untuk Button TRUE dan pengurangan score 15 untuk Button FALSE.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Submit. Semua action invisible dan menampilkan action score untuk comprehension,

action timer, action dari rumus speed reading.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Home. Kembali ke home dan system akan me-reset semua variable ke semula.

STIKOM

(46)

Gambar 4.16 Tampilan event sheets cerita 3 e. Event sheets (Coding) cerita 4

<title>New project (Construct 2 preview)</title> <meta charset="UTF-8" />

{

background: #000;

min-height: 100%; height: 100%;

-ms-touch-action: none; }

#frameT {

width: 100%;

padding: 0;

display: table;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#frameTC {

STIKOM

(47)

padding: 0;

vertical-align: middle;

display: table-cell;

margin: 0;

}

#borderwrap {

background: #616161;

border: 1px solid #8F8F8F; padding: 15px;

border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; } #c2canvasdiv { width: 266px; height: 480px; } canvas {

-ms-touch-action: none;

} </style>

STIKOM

(48)

jQuery(window).resize(function() {

if (window.c2resizestretchmode === 1) {

window.c2resizestretchmode = 2;

// put back when breaking back out of fullscreen

var canvas =

document.getElementById("c2canvas");

window.c2oldcanvaswidth =

canvas.width;

window.c2oldcanvasheight =

canvas.height;

window.c2eventtime = Date.now();

var w = jQuery(window).width();

var h = jQuery(window).height();

cr_sizeCanvas(w, h);

}

else if (window.c2resizestretchmode === 2) {

// Size event fires twice on FF + Chrome, ignore second trigger

if (Date.now() > window.c2eventtime + 50)

{

window.c2resizestretchmode =

0; cr_sizeCanvas(window.c2oldcanvaswidth, window.c2oldcanvasheight); } } });

// Start the project running on window load

jQuery(document).ready(function ()

{

// Create new runtime using the c2canvas cr.createRuntime("c2canvas"); });

// Pause and resume on page becoming visible/invisible

function onVisibilityChanged() {

if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)

cr_setSuspended(true); else cr_setSuspended(false); };

STIKOM

SURABAYA

(49)

document.addEventListener("visibilitychange", onVisibilityChanged, false);

document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);

document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);

document.addEventListener("msvisibilitychange", onVisibilityChanged, false);

</script> </head>

<body>

<canvas id="c2canvas"

width="266" height="480">

Layout Size untuk tampilan pada browser menggunakan Width: 1280 pixels dan

untuk desain background dengan Width: 266 pixels dan Height: 480 pixels.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 1. Dan masuk ke halaman 3.

STIKOM

(50)

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 2. Dan masuk ke halaman 4.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 3. Dan masuk ke halaman 5.

dan action Button FALSE melakukan invisible ketika Button di klik. Pada Question 1 dan 2 system melakukan penambahan score 20 untuk Button TRUE dan pengurangan

score 15 untuk Button FALSE. Pada Question 3, 4, dan 5 system melakukan pengurangan score 15 untuk Button TRUE dan penambahan score 20 untuk Button FALSE.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Submit. Semua action invisible dan menampilkan action score untuk comprehension,

action timer, action dari rumus speed reading.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Home. Kembali ke home dan system akan me-reset semua variable ke semula.

STIKOM

(51)

Gambar 4.17 Tampilan event sheets cerita 4

4.3 Pasca Produksi

Pada tahap ini, penulis melakukan beberapa testing apakah game yang dibuat bermasalah atau tidak. Dan penulis melakukan beberapa perbaikan pada game yang setelah di testing terdapat beberapa masalah.

Setelah melakukan beberapa perbaikan, gambar dibawah ini merupakan gambaran hasil akhir dari game speed reading.

STIKOM

(52)

Gambar 4.18 Tampilan Menu utama hasil akhir

Gambar 4.19 Tampilan cerita hasil akhir

STIKOM

(53)

Gambar 4.20 Tampilan Question hasil akhir

Gambar 4.21 Tampilan score akhir

STIKOM

(54)

6.1 Kesimpulan

Kesimpulan yang didapat dalam pelaksanaan Kerja Praktek ini adalah didalam pembuatan game yang berbasis pendidikan atau edukasi dibutuhkan data yang lengkap agar game yang dibuat sesuai dengan materi atau pembelajaran dan melakukan komunikasi dengan sesame tim agar kerjasama tim dapat berjalan dengan baik.

6.2 Saran

Saran dalam pembuatan game secara tim adalah kerjasama tim diperlukan, sering berkomunikasi dengan sesame tim agar tidak terjadi misskomunikasi dalam pembuatan speed reading. Serta konseptor dan perancang desain harus menata rancangannya dengan baik dan rapi, agar tidak membingungkan pembuat game saat pengerjaan.

STIKOM

(55)

DAFTAR PUSTAKA

Adams, Ernest, Founder of The IGDA. 2010. Fundamentals of Game Design Second Edition. New Riders.

Buzan, Tony. 2010. The Speed Reading Book: Read More, Learn More, Achieve More. BBC Active.

Henry, Samuel. 2005. Panduan Praktis Membuat Game 3D. Penerbit Graha Ilmu. Ruslan, Rosady. 2003. Metode Penelitian Public Relations dan Komunikasi.

Jakarta: Rajawali Pers.

Soedarso. 2006. Speed Reading: Sistem Membaca Cepat dan Efektif. Jakarta: Penerbit PT. Gramedia Pustaka Utama.

Tobitani, Yumiko. 2006. Quantum Speed Reading: Awakening Your Child’s Mind. Hampton Roads Publishing Company.

STIKOM

(1)

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 2. Dan masuk ke halaman 4.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Next. System melanjutkan timer dari halaman 3. Dan masuk ke halaman 5.

dan action Button FALSE melakukan invisible ketika Button di klik. Pada Question 1 dan 2 system melakukan penambahan score 20 untuk Button TRUE dan pengurangan

score 15 untuk Button FALSE. Pada Question 3, 4, dan 5 system melakukan pengurangan score 15 untuk Button TRUE dan penambahan score 20 untuk Button FALSE.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Submit. Semua action invisible dan menampilkan action score untuk comprehension,

action timer, action dari rumus speed reading.

Pada event mouse, condition on object clicked pada sisi kiri mouse untuk Button Home. Kembali ke home dan system akan me-reset semua variable ke semula.

STIKOM

(2)

Gambar 4.17 Tampilan event sheets cerita 4

4.3 Pasca Produksi

Setelah melakukan beberapa perbaikan, gambar dibawah ini merupakan gambaran hasil akhir dari game speed reading.

STIKOM

(3)

Gambar 4.18 Tampilan Menu utama hasil akhir

Gambar 4.19 Tampilan cerita hasil akhir

STIKOM

(4)

Gambar 4.20 Tampilan Question hasil akhir

Gambar 4.21 Tampilan score akhir

STIKOM

(5)

BAB VI

PENUTUP

6.1 Kesimpulan

6.2 Saran

STIKOM

(6)

DAFTAR PUSTAKA

Adams, Ernest, Founder of The IGDA. 2010. Fundamentals of Game Design Second Edition. New Riders.

Buzan, Tony. 2010. The Speed Reading Book: Read More, Learn More, Achieve More. BBC Active.

Henry, Samuel. 2005. Panduan Praktis Membuat Game 3D. Penerbit Graha Ilmu. Ruslan, Rosady. 2003. Metode Penelitian Public Relations dan Komunikasi.

Jakarta: Rajawali Pers.

Soedarso. 2006. Speed Reading: Sistem Membaca Cepat dan Efektif. Jakarta: Penerbit PT. Gramedia Pustaka Utama.

Tobitani, Yumiko. 2006. Quantum Speed Reading: Awakening Your Child’s Mind. Hampton Roads Publishing Company.