BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan...

Preview:

Click to see full reader

Citation preview

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.

14  

STIKOM S

URABAYA

15  

Gambar 4.1 Home Flash Word

Gambar 4.2 Pilihan Menu Flash Word

STIKOM S

URABAYA

16  

Gambar 4.3 Tampilan modul pelatihan Flash Word

Gambar 4.4 Tampilan pilihan cerita

STIKOM S

URABAYA

17  

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 mata dan membaca secara cepat

dengan waktu yang telah ditentukan.

STIKOM S

URABAYA

18  

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 S

URABAYA

19  

l

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 S

URABAYA

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 S

URABAYA

21  

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" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { 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; margin: 0; } #borderwrap { background: #616161; border: 1px solid #8F8F8F; padding: 15px; border-radius: 10px; margin: 0 auto; width: 266px; height: 480px; }

STIKOM S

URABAYA

22  

#c2canvasdiv { width: 266px; height: 480px; } canvas { -ms-touch-action: none; } </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="common_prelude.js"></script> <script type="text/javascript" src="preview_prelude.js"></script> <script type="text/javascript" src="shaders.js"></script> <script type="text/javascript" src="glwrap.js"></script> <script src="Mouse_common.js"></script> <script src="Mouse_plugin.js"></script> <script src="Sprite_common.js"></script> <script src="Sprite_plugin.js"></script> <script src="Text_common.js"></script> <script src="Text_plugin.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="preview.js"></script> <script type="text/javascript" src="layout.js"></script> <script type="text/javascript" src="eveng.js"></script> <script type="text/javascript" src="expressions.js"></script> <script type="text/javascript" src="system.js"></script> <script type="text/javascript" src="commonace.js"></script> <script type="text/javascript"> 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 S

URABAYA

23  

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> <div id="fb-root"></div> <!-- Vertical centering -->

STIKOM S

URABAYA

24  

<div id="frameT"> <div id="frameTC"> <div id="borderwrap"> <div id="c2canvasdiv" width="266" height="480"> <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 S

URABAYA

25  

Gambar 4.13 Tampilan event sheets home

b. Event sheets (Coding) cerita 1

<html> <head> <title>New project (Construct 2 preview)</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { 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 S

URABAYA

26  

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> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="common_prelude.js"></script> <script type="text/javascript" src="preview_prelude.js"></script> <script type="text/javascript" src="shaders.js"></script> <script type="text/javascript" src="glwrap.js"></script> <script src="Mouse_common.js"></script> <script src="Mouse_plugin.js"></script> <script src="Sprite_common.js"></script> <script src="Sprite_plugin.js"></script> <script src="Text_common.js"></script> <script src="Text_plugin.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="preview.js"></script> <script type="text/javascript" src="layout.js"></script> <script type="text/javascript" src="eveng.js"></script> <script type="text/javascript" src="expressions.js"></script> <script type="text/javascript" src="system.js"></script> <script type="text/javascript" src="commonace.js"></script> <script type="text/javascript"> jQuery(window).resize(function() {

STIKOM S

URABAYA

27  

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); }; document.addEventListener("visibilitychange", onVisibilityChanged, false); document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);

STIKOM S

URABAYA

28  

document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false); document.addEventListener("msvisibilitychange", onVisibilityChanged, false); </script> </head> <body> <div id="fb-root"></div> <!-- Vertical centering --> <div id="frameT"> <div id="frameTC"> <div id="borderwrap"> <div id="c2canvasdiv" width="266" height="480"> <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

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 S

URABAYA

29  

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 S

URABAYA

30  

c. Event sheets (Coding) cerita 2

<html> <head> <title>New project (Construct 2 preview)</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { 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; 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 S

URABAYA

31  

canvas { -ms-touch-action: none; } </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="common_prelude.js"></script> <script type="text/javascript" src="preview_prelude.js"></script> <script type="text/javascript" src="shaders.js"></script> <script type="text/javascript" src="glwrap.js"></script> <script src="Mouse_common.js"></script> <script src="Mouse_plugin.js"></script> <script src="Sprite_common.js"></script> <script src="Sprite_plugin.js"></script> <script src="Text_common.js"></script> <script src="Text_plugin.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="preview.js"></script> <script type="text/javascript" src="layout.js"></script> <script type="text/javascript" src="eveng.js"></script> <script type="text/javascript" src="expressions.js"></script> <script type="text/javascript" src="system.js"></script> <script type="text/javascript" src="commonace.js"></script> <script type="text/javascript"> 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 S

URABAYA

32  

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> <div id="fb-root"></div> <!-- Vertical centering --> <div id="frameT"> <div id="frameTC"> <div id="borderwrap"> <div id="c2canvasdiv" width="266" height="480">

STIKOM S

URABAYA

33  

<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

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

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 S

URABAYA

34  

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

<html> <head> <title>New project (Construct 2 preview)</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { background: #000; min-height: 100%; height: 100%; -ms-touch-action: none;

STIKOM S

URABAYA

35  

} #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> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="common_prelude.js"></script> <script type="text/javascript" src="preview_prelude.js"></script> <script type="text/javascript" src="shaders.js"></script> <script type="text/javascript" src="glwrap.js"></script> <script src="Mouse_common.js"></script>

STIKOM S

URABAYA

36  

<script src="Mouse_plugin.js"></script> <script src="Sprite_common.js"></script> <script src="Sprite_plugin.js"></script> <script src="Text_common.js"></script> <script src="Text_plugin.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="preview.js"></script> <script type="text/javascript" src="layout.js"></script> <script type="text/javascript" src="eveng.js"></script> <script type="text/javascript" src="expressions.js"></script> <script type="text/javascript" src="system.js"></script> <script type="text/javascript" src="commonace.js"></script> <script type="text/javascript"> 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 S

URABAYA

37  

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> <div id="fb-root"></div> <!-- Vertical centering --> <div id="frameT"> <div id="frameTC"> <div id="borderwrap"> <div id="c2canvasdiv" width="266" height="480"> <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.

STIKOM S

URABAYA

38  

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

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

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,

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 S

URABAYA

39  

Gambar 4.16 Tampilan event sheets cerita 3

e. Event sheets (Coding) cerita 4

<html> <head> <title>New project (Construct 2 preview)</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> body { 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 S

URABAYA

40  

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> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="common_prelude.js"></script> <script type="text/javascript" src="preview_prelude.js"></script> <script type="text/javascript" src="shaders.js"></script> <script type="text/javascript" src="glwrap.js"></script> <script src="Mouse_common.js"></script> <script src="Mouse_plugin.js"></script> <script src="Sprite_common.js"></script> <script src="Sprite_plugin.js"></script> <script src="Text_common.js"></script> <script src="Text_plugin.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="preview.js"></script> <script type="text/javascript" src="layout.js"></script> <script type="text/javascript" src="eveng.js"></script> <script type="text/javascript" src="expressions.js"></script> <script type="text/javascript" src="system.js"></script> <script type="text/javascript" src="commonace.js"></script>

STIKOM S

URABAYA

41  

<script type="text/javascript"> 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 S

URABAYA

42  

document.addEventListener("visibilitychange", onVisibilityChanged, false); document.addEventListener("mozvisibilitychange", onVisibilityChanged, false); document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false); document.addEventListener("msvisibilitychange", onVisibilityChanged, false); </script> </head> <body> <div id="fb-root"></div> <!-- Vertical centering --> <div id="frameT"> <div id="frameTC"> <div id="borderwrap"> <div id="c2canvasdiv" width="266" height="480"> <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

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. STIK

OM SURABAYA

43  

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.

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

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 S

URABAYA

44  

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 S

URABAYA

45  

Gambar 4.18 Tampilan Menu utama hasil akhir

Gambar 4.19 Tampilan cerita hasil akhir

STIKOM S

URABAYA

46  

Gambar 4.20 Tampilan Question hasil akhir

Gambar 4.21 Tampilan score akhir

STIKOM S

URABAYA

Recommended

BAB IV HASIL PENELITIAN DAN PEMBAHASAN 4 · Gambar 4.9 Proses Instalasi Sistem Operasi Debian Gambar 4.10 Konfigurasi DNS Server di Debian 4.1.2.5 Tampilan Penutup Tampilan yang terakhir
Documents
PROGRAM PASCASARJANA UNIVERSITAS NEGERI … · Gambar 27 Tampilan Materi Reaksi Redoks Sesudah Revisi ..... 118 Gambar 28 Tampilan Materi Tatanama Senyawa Sebelum Revisi ... Lampiran
Documents
BAB II TINJAUAN PUSTAKA - eprints.umpo.ac.ideprints.umpo.ac.id/4348/1/BAB II.pdfContoh tampilan segmentasi warna adalah sebagai berikut : Gambar 2.2 tampilan aplikasi segmentasi warna
Documents
Web viewGambar 1 Tampilan Lingkungan Kerja Microsoft Word 2007. Tabs. Group BarCommand Button. Gambar 2. Ribbon, Tampilan Lingkungan Kerja Microsoft Word 2007
Documents
Dell Proyektor Interaktif S560T Petunjuk Konfigurasi Sentuh · Tampilan Mengatasi Masalah Utilitas dukungan tampilan real-time untuk mengatasi masalah. Ukuran Gambar Proyeksi yang
Documents
RANCANG BANGUN SISTEM INFORMASI GEOGRAFIS …. Halaman... · Gambar 4.35 Tampilan Grafik Data Pertumbuhan Penduduk .....77 Gambar 4.36 Proses Penambahan Peta
Documents
DESKRIPSI KALIMAT MAJEMUK DALAM GAMBAR TAMPILAN … filemajemuk meliputi, (a) kalimat majemuk bertingkat, (b) kalimat majemuk setara. 2 ... gambar tampilan BlackBerry Messenger menunjukkan
Documents
Pengenalan GNU Octave yang akan kita berikan. Gambar 1 adalah tampilan dari program Octave untuk sistem operasi Windows. Gambar 1. Tampilan Jendela Octave pada Sistem Operasi Windows
Documents
TUGAS AKHIR SISTEM TELEMETRI AKUISISI DATA GREENHOUSE · Kata kunci : Greenhouse , Matlab, ... Gambar 2.10 Arduino Mega ... Gambar 3.3 Tampilan GUI
Documents
PEMBUATAN SIMULASI MEDIA …lib.unnes.ac.id/27900/1/5302410124.pdf ·  · 2017-11-28Media dan Ahli Materi ... Tampilan tutorial ..... 40 Gambar 18. Tampilan rangkaian ... Windows
Documents
RANCANG BANGUN SISTEM INFORMASI ...Gambar 3.53 Desain Tampilan Arsip Surat Keluar ..... 91 Gambar 3.54 Desain Tampilan Menu Data Arsip Surat Masuk ..... 92 Gambar 3.55 Desain Tampilan
Documents
PROBLEMATIKA PENERAPAN SIMPUS STTA SEBAGAIdigilib.uin-suka.ac.id/15199/1/BAB I, IV, DAFTAR PUSTAKA.pdf · Gambar 8 Tampilan Master File pada SLiMS, 49 Gambar 9 Tampilan Inventarisasi
Documents
User Manual - nyomandarmayasa.com Manual eSPT PPN 1111.pdf · Daftar Surat Setoran Pajak ... Gambar 91 Tampilan Edit Kode KPP Wajib Pajak ... Gambar 109 Tampilan Formulir 1111 Induk
Documents
EFEKTIFITAS MEDIA PEMBELAJARAN VIDEO ANIMASI DALAM ...eprints.ums.ac.id/79147/1/NASPUB.pdf · 3.3.1 Tampilan menu awal Gambar 1 Tampilan Menu Awal Pada gambar 1 adalah gambar awal
Documents
JURUSAN TEKNIK SIPIL FAKULTAS TEKNIK ...Tampilan Menu Konstruksi Tangga ..... 26 3.1. Tampilan Gambar Rencana Tangga ..... 27 4.1. Tampilan Menu Konstruksi4.2. Tampilan Menu 4.3. Tampilan
Documents
Gambar 7.2. Contoh tampilan matriks peluang perubahannapps.worldagroforestry.org/sea/Publications/files/...Gambar 7.17. Keluaran yang ditampilkan dalam bentuk Ringkasan Gambar 7.18
Documents
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1. Analisa ... · Tampilan Form Edit Penyakit L. Tampilan Form Edit Gejala Gambar IV.22. Tampilan Form Edit Gejala . 79 M. Tampilan Daftar
Documents
PENGEMBANGAN MEDIA PEMBELAJARAN MODUL ...Gambar 10. Tampilan Materi Utama ..... 42 Gambar 11. Tampilan menu utama pada monitor kotak ..... 45 ... di dalam kelas. Penggunaan alat bantu
Documents
Kata Pengantar - kelasmayajejakbali.files.wordpress.com...Gambar 2.53 : Tampilan Isi Materi yang Sudah Diisi oleh Guru Gambar 2.54 : Tampilan Isi Forum Diskusi Gambar 2.55 : Tampilan
Documents
User Manual Sistem Bidikmisi · Contoh Kartu Peserta Bidikmisi .....26 Gambar 27. Contoh tampilan Formulir.....27 Gambar 28. Tampilan awal Resize Photos .....28 . User Manual Sistem
Documents