bab iv implementasi karyarepository.dinamika.ac.id/id/eprint/269/7/bab iv.pdf18 gambar 4.6 tampilan...
TRANSCRIPT
![Page 1: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/1.jpg)
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
![Page 2: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/2.jpg)
15
Gambar 4.1 Home Flash Word
Gambar 4.2 Pilihan Menu Flash Word
STIKOM S
URABAYA
![Page 3: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/3.jpg)
16
Gambar 4.3 Tampilan modul pelatihan Flash Word
Gambar 4.4 Tampilan pilihan cerita
STIKOM S
URABAYA
![Page 4: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/4.jpg)
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
![Page 5: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/5.jpg)
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
![Page 6: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/6.jpg)
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
![Page 7: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/7.jpg)
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
![Page 8: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/8.jpg)
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
![Page 9: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/9.jpg)
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
![Page 10: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/10.jpg)
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
![Page 11: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/11.jpg)
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
![Page 12: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/12.jpg)
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
![Page 13: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/13.jpg)
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
![Page 14: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/14.jpg)
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
![Page 15: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/15.jpg)
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
![Page 16: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/16.jpg)
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
![Page 17: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/17.jpg)
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
![Page 18: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/18.jpg)
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
![Page 19: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/19.jpg)
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
![Page 20: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/20.jpg)
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
![Page 21: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/21.jpg)
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
![Page 22: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/22.jpg)
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
![Page 23: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/23.jpg)
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
![Page 24: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/24.jpg)
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
![Page 25: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/25.jpg)
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
![Page 26: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/26.jpg)
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
![Page 27: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/27.jpg)
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
![Page 28: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/28.jpg)
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
![Page 29: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/29.jpg)
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
![Page 30: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/30.jpg)
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
![Page 31: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/31.jpg)
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
![Page 32: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/32.jpg)
45
Gambar 4.18 Tampilan Menu utama hasil akhir
Gambar 4.19 Tampilan cerita hasil akhir
STIKOM S
URABAYA
![Page 33: BAB IV IMPLEMENTASI KARYArepository.dinamika.ac.id/id/eprint/269/7/BAB IV.pdf18 Gambar 4.6 Tampilan Home Gambar 4.7 Tampilan latihan Gambar 4.8 Tampilan score 4.2 Produksi Pada tahap](https://reader034.vdocuments.pub/reader034/viewer/2022042612/5f6886da21e44e601d50b9c7/html5/thumbnails/33.jpg)
46
Gambar 4.20 Tampilan Question hasil akhir
Gambar 4.21 Tampilan score akhir
STIKOM S
URABAYA