• Tidak ada hasil yang ditemukan

BAB IV IMPLEMENTASI KARYA. Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan

N/A
N/A
Protected

Academic year: 2021

Membagikan "BAB IV IMPLEMENTASI KARYA. Dalam bab ini akan diuraikan implementasi hasil karya yang merupakan"

Copied!
33
0
0

Teks penuh

(1)

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

(2)

Gambar 4.1 Home Flash Word

Gambar 4.2 Pilihan Menu Flash Word

STIKOM

(3)

Gambar 4.3 Tampilan modul pelatihan Flash Word

Gambar 4.4 Tampilan pilihan cerita

STIKOM

(4)

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

(5)

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

(6)

l

Setelah

lengkap berd

h rancangan

dasarkan ref

n desain sele

ferensi-refere

esai, penulis

ensi game.

s melakukan

n pembuatan

n game secaara

Gambaar 4.9 Tampiilan cerita 1

Gambar 4.10 Tampilan cerita 2

STIKOM

(7)

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 3

3 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

SURABAYA

(8)

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

SURABAYA

(9)

#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

SURABAYA

(10)

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

SURABAYA

(11)

<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

(12)

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

SURABAYA

(13)

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

(14)

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

SURABAYA

(15)

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

(16)

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

(17)

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

SURABAYA

(18)

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

(19)

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

(20)

<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

(21)

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

SURABAYA

(22)

} #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

(23)

<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

(24)

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

(25)

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

(26)

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

SURABAYA

(27)

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

(28)

<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

SURABAYA

(29)

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.

STIKOM

(30)

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

(31)

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

(32)

Gambar 4.18 Tampilan Menu utama hasil akhir

Gambar 4.19 Tampilan cerita hasil akhir

STIKOM

(33)

Gambar 4.20 Tampilan Question hasil akhir

Gambar 4.21 Tampilan score akhir

STIKOM

Referensi

Dokumen terkait

Mengenai kewajiban yang harus dipenuhi oleh setiap pedagang makanan dalam kemasan dalam usaha melindungi konsumen dikota Pekanbaru adalah harus memenuhi kewajiban

Berdasarkan dari beberapa penjelasan teori kepuasan kerja, maka kepuasan kerja yang akan diteliti pada penelitian ini adalah kepuasan kerja bendahara sekolah dengan

Dengan memberikan potongan harga ongkos kirim atau dapat juga free ongkir untuk pembelian diatas 3pcs atau kepada konsumen yang sudah lebih dari 5 kali membeli produk

Kemudian jika diperlukan dia harus berperan sebagai tenaga humas, karena mereka harus mampu menjelaskan dan meyakinkan masyarakat petani bahwa ketika berbicara mengenai

Model Sum of Squares df Mean Square F Sig. Dependent

Hak ini mencakup kebebasan untuk menganut atau menerima suatu agama atau kepercayaan atas pilihannya sendiri, dan kebebasan, baik secara individu maupun bersama-sama

Nama Pekerjaan : Belanja modal pengadaan konstruksi/ pembelian gedung kantor SDN Arjowinangun 2 Untuk Kegiatan Pembangunan/ Rehabilitasi Sedang/ Berat Gedung SD..

Dalam upaya untuk menarik konsumen online untuk membuat suatu keputusan pembelian produk atau jasa yang ditawarkan perusahaan, iklan online sering digunakan banyak