RSS

Novelty — Animation, User Input, Variabel, Screen

04 Jun

Halo🙂

Postingan ini adalah bagian ketiga dari tutorial tentang Novelty. Postingan pertama bisa di lihat di sini

Part I

Part II

Sesuai dengan judul di atas, kali ini kita akan berbicara tentang Animation, User Input, Variabel dan Screen pada Novelty.

Animation

Animation, seperti yang Anda tahu adalah gambar yang bergerak. Animasi dalam Novelty mirip seperti membuat gif, kita membuat gambar-gambar yang ingin kita animasikan kemudian kita atur selang waktu antara gambar yang satu dengan yang lain untuk bisa mendapatkan animasi yang kita inginkan. Perbedaan nya adalah pada Novelty animasi pada gambar didapat dengan menggeser koordinat pada gambar, jadi kita membuat 1 gambar yang didalamnya terdapat semua gambar yang akan kita animasikan/gerakkan. Untuk lebih jelasnya lihat gambar di bawah

Ball_ copy

Save gambar di atas dengan nama Ball_copy [ukuran asli gambar 1400×300, kalau setelah Anda simpan ukurannya berbeda tolong disamakan, hal ini penting dalam pembuatan animasi]

Kita akan membuat animasi bola bergerak dengan menggunakan gambar di atas. Jadi buka Novelty Designer dan masukkan texture gambar bola di atas [cara ada di postingan ke II jadi saya tidak akan mengulang instruksi] kemudian buat image dari gambar tersebut, beri nama Ball.

Load texture resource Ball_copy. Klik tanda segitiga ke bawah pada tab Additional attributes dan centang pilihan Animation resource, Animation speed dan Filter. Isi sesuai dengan gambar di bawah. Tab Animation resource kosong karena kita belum membuat Animation untuk Ball ini. Filter berfungsi seperti folder pada Novelty, jadi dengan memberi nama Animations pada Filter Anda akan memasukkan animation yang Anda buat ke dalam folder Animations pada Novelty [kalau tidak diberi Filter animasi akan masuk ke dalam folder Objects]

Animation1

Klik pada bentuk telur dan pilih Create new resource -> Animation.

Animation2

Beri nama Ball [untuk mempermudah mencari animation disarankan untuk memberi nama yang sama pada animation dan image ] dan ubah waktu animasi [Duration(sec)] dari 1 ke 2 detik. Sebenarnya untuk mengatur waktu animasi ini tergantung dari sense Anda sendiri. Saya secara pribadi memilih waktu animasi 2 detik setelah selesai membuat animasi ini karena saya merasa pergerakan bola lebih bagus saat dibuat 2 detik daripada 1 detik. Jadi nanti Anda bisa merubah sendiri sesuai keinginan Anda. Sekarang mari kita lanjutkan sebentar ke teori Animation.

Klik kanan pada Animation Ball yang baru kita buat tadi dan pilih menu Add child. Anda bisa melihat bahwa ada 4 ‘child’ yang bisa ditambahkan dalam Animation.

Animation3

4 child itu masing-masing adalah :

ü  Frame

ü  Asset details (Meta)

ü  Region

ü  Sequence of frames

Penjelasan :

Frame merupakan kotak berisi texture dengan ukuran yang bisa kita sesuaikan dan waktu (dalam detik) tampilnya frame ini.

Asset details (Meta) tempat untuk menaruh comment dan keterangan tentang pembuat *nml [supaya orang lain tahu kalau Anda yang membuat animation ini] PS : sebenarnya ini bukan bagian dari animation karena setiap kali Anda membuat *nml di Novelty Designer Anda akan menemukan pilihan ini. Saya hanya menjelaskannya supaya Anda tidak penasaran saja🙂

Region adalah sebuah daerah dimana di dalamnya terdapat frame-frame yang akan kita animasikan. Kita membuat animasi dengan menentukan urutan frame tersebut.

Sequence mirip seperti state pada Aktor, kalau Anda ingat kemarin saat membuat Aktor ada state marah,senang,sedih dst; sequence seperti itu, jadi Anda bisa membuat 2 atau lebih animasi hanya dengan menggunakan 1 gambar.

Supaya lebih jelas langsung saja kita mulai membuat animasi:

Cara pertama [Frame]

Klik kanan pada Animation dan pilih Frame. Gambar yang saya buat adalah gambar bola dengan ukuran 200×300. [Karena itu saya bilang ukuran gambar harus 1400×300] Gambar bola ada 7 jadi kita membutuhkan 7 buah frame. Kalau Anda lihat pada frame ada tulisan Dimensions yang terdiri atas 4 kotak urutan pengisiannya adalah koordinat x, koordinat y, lebar ukuran frame dan tinggi ukuran frame. Isi frame pertama dengan 0,0,200,300. Frame kedua karena posisi y tidak berubah maka y tetap 0 dan karena gambar berukuran 200 maka posisi titik x pada frame kedua adalah 200 maka isi frame kedua adalah 200,0,200,300. Dan seterusnya sampai frame ke 7🙂 . Kotak Duration (sec) boleh diisi dengan angka berbeda, sesuaikan saja menurut Anda seperti apa kecepatan animasi yang pas.

Animation4

Kalau sudah kita tidak akan melihat apa-apa di layar, karena yang akan bergerak bukan Animation di Resource, tapi Image yang diberi Animation. Jadi kembali ke Image Ball yang kita buat dan sekarang isi Animation resource dengan nama Animation yang tadi kita buat, Ball. Save dalam Asset folder dengan nama Ball.nml dan jalankan Novelty. Animation Ball ada di dalam folder Animations dan bisa kita gunakan sekarang🙂

Animation5

Animation6

Cara kedua [Region]

Region lebih gampang dari Frame karena kita tidak perlu mengatur koordinat setiap frame, kita hanya perlu mengatur ‘index’ pada Region dan Region lah yang akan menentukan urutan setiap frame yang kita pakai. Akan lebih jelas kalau langsung kita praktekkan. Buat Resource Animation baru dan beri nama Ball_Region, klik kanan dan tambahkan Region. Sekarang Anda lihat ada tab Region dimentions dan Frame size. Jadi, Region akan memiliki ‘child’ Frame yang setiap ukuran dan koordinat frame sudah ditentukan dari awal, jadi yang perlu ditambahkan hanya urutan animasi tiap-tiap frame saja. Kita memulai animasi dari koordinat 0,0 dan ukuran gambar yang kita pakai adalah 1400×300 maka isi Region dimentions dengan 0,0,1400,300. Ukuran frame yang kita pakai Anda sudah tahu 200×300 jadi isi dengan 200,300.

Animation7

Sekarang yang perlu ditambahkan hanya frame nya saja. Jadi klik kanan pada Region [perhatikan, klik kanan dan add child Frame pada Region! Kalau Anda menambahkan Frame pada Animation hasilnya akan berbeda walaupun sama-sama Frame] dan tambahkan Frame sebanyak yang kita perlukan [sudah tahu berapa jumlahnya bukan?🙂 ].  Urutan animasi [index] pada Frame dimulai dari 0 jadi urutannya adalah 0-6.

Animation8

Jangan lupa untuk mengatur Duration (sec) karena kalau tidak diatur defaultnya adalah 1.0 dan untuk animasi bola ini 1.0 per gambar akan menjadi terlalu lambat.

EXTRA : Sequence

Sequence dibuat menggunakan Region dan Frame jadi tidak ada yang baru. Seperti saya tulis di atas dengan Sequence kita bisa membuat 2/lebih animasi hanya dengan menggunakan 1 gambar. Karena gambar yang saya buat hanya 1 animasi maka untuk memberi contoh pada Sequnce saya akan membaginya menjadi 2 animasi. Jadi hasilnya akan seperti ini

Animation9

Seperti yang Anda lihat, sequence dibuat dengan menggunakan Region dan Frame jadi tidak perlu saya jelaskan caranya. Yang perlu Anda lihat di sini adalah adanya pilihan untuk berganti animasi yang namanya sesuai dengan nama animasi yang saya buat di Designer.

User Input & Variabel

Variabel, secara singkat bisa digambarkan sebagai sebuah ‘penampung’ yang nantinya akan kita gunakan selama proses vn.

Saya tidak akan menjelaskan panjang lebar mengenai variabel. Yang perlu Anda ingat hanya variabel berguna untuk melakukan proses scripting dan bisa memiliki berbagai macam  bentuk. [seperti fungsinya, ‘penampung’ jadi bisa memiliki berbagai macam bentuk🙂 ]

Untuk mengenal lebih lanjut tentang variabel ini sekarang kita akan menggunakan user input di dalam Novelty.

Di dalam Novelty sudah terdapat ‘action’ yang memungkinkan kita menerima inputan dari user. Kalau kita melihat pada bagian Scripting di User Catalog kita bisa melihat ada action bernama ‘Get user input’. Klik 2x untuk memasukkan action tersebut ke dalam Action window. Kita akan menggunakan user input ini untuk memasukkan nama yang diinputkan player dan menerimanya sebagai variabel bernama ‘nama’. Jadi ketikkan “Hai, nama kamu siapa?” pada kotak Message di Property Inspector dan nama pada kotak variable name.

UserInput1

UserInput2

Jalankan Novelty dan akan muncul pesan yang meminta kita untuk memasukkan nama. Kalau kita isi dan tekan Ok maka tidak akan terjadi apa-apa karena pada Action window hanya terdapat action pesan tadi. Untuk itu tambahkan Dialogue/Paragraph dan isi kotak Name dengan [$nama].

UserInput3

Warna kuning menandakan variabel dalam Novelty

Pada Novelty, variabel didefinisikan dengan tanda $ di depannya. Jadi $nama sama artinya dengan variabel global [berlaku di dalam Novelty sejak variabel ini didefinisikan sampai program Novelty berakhir] bernama nama. Perhatikan tanda []. Tidak cukup hanya menulis $ kalau kita ingin menampilkan variabel di dalam dialog, kita perlu menambahkan []. Sebagai contoh dialog yang akan kita tambahkan sekarang adalah dialog dari user yang mengatakan namanya sendiri. Jadi pada kotak Phrase ketikkan ‘Nama saya [$nama]’ dan jalankan Novelty.

UserInput4

Contoh dengan user name 8oni

Sekarang Anda sudah bisa membuat sendiri inputan nama dan menampilkan nama pemain bukan? Coba edit Godaan Permen.nov yang ada di bagian pertama supaya bisa menampilkan nama Anda🙂

Screen

Kalau Anda pernah memainkan vn, Anda pasti tahu bahwa ada sebuah halaman khusus yang muncul saat Anda menekan tombol Save, Load atau Log bukan? Halaman itulah yang disebut dengan Screen. Screen pada Novelty secara default terdiri atas 3 jenis: Save, Log dan Load. Tapi tergantung dengan gamenya, kadang jumlah Screen bisa lebih atau kurang dari itu.

Kita bisa mengedit Screen secara langsung pada tab Screens di jendela Story Window. Misalnya kita ingin menambahkan screen untuk biodata character dalam vn kita, kita tinggal mengklik kanan pada tab Screens tersebut dan memilih New Screen. Akan muncul Screen baru dengan nama Screen 13. Hal itu dikarenakan jumlah screen dalam tab Screens ada 12 buah [5 Save 5 Load 1 Log 1 Quit Screen] maka screen yang baru kita buat bernomor 13.

Screen1

Screen2

Rename dengan nama Karakter. Klik pada Screen Karakter yang baru kita buat ini kemudian klik kanan pada Scene dan pilih Create new object->Text object. Text object, seperti namanya berfungsi untuk menampilkan text. Ketikkan data karakter yang Anda inginkan, mengikuti contoh di bawah juga silakan saja. Anda bisa mengubah huruf dengan menggunakan menu Font pada Property Inspector.

Screen3

Sekarang kita akan menambahkan button untuk menampilkan Screen Karakter saat di klik. Buat button baru [lihat postingan ke 2] atau gunakan button bawaan Novelty [cari di folder Objects] dan beri nama Karakter, taruh di Text box. Seperti yang saya bilang di bagian ke II, sekarang kita akan melihat bagaimana cara menangani button dalam Novelty.

Klik pada button dan tab Property Inspector akan aktif. Pada pilihan When clicked pilih Open Screen, akan muncul pilihan Screen yang sudah kita buat, pilih Karakter. Jadi seperti inilah kalau kita ingin melakukan suatu perintah pada button, kita mengaturnya pada pilihan When clicked di tab Property Inspector.

Screen4

Test dengan menjalankan Novelty. Saat kita click button Karakter keterangan karakter kita muncul, tapi kita tidak bisa menghilangkannya dan hal ini menganggu jalannya game. Untuk itu edit Screen dengan menambahkan button close [ambil dari folder Objects atau buat sendiri juga bisa] dan pada pilihan When clicked pilih ‘Close Screen’

Screen6

Screen7

Sebenarnya button close tidak perlu dibuat sebesar itu. Saya hanya membesarkannya agar terlihat jelas [karena warnanya abu” sama dengan scene]

Test.

Kalau Anda sudah ahli Anda bisa mencoba membuat Screen ‘Karakter’ dengan tampilan seperti gambar dibawah ini

Gambar di atas dari game berjudul  RE:Alistair++, sebuah otome game [game yang ditujukan untuk kalangan perempuan]. Game ini free dan bisa di dl di http://www.sakevisual.com/realistair/

Sampai di sini postingan kali ini, kalau ada yang tidak jelas/ingin ditanyakan silakan beri komentar di bawah. Tolong share kalau Anda merasa postingan ini berguna.

Terima kasih sudah mampir dan membaca blog saya ^_^

 
5 Komentar

Ditulis oleh pada Juni 4, 2013 in Visual Novel

 

Tag: ,

5 responses to “Novelty — Animation, User Input, Variabel, Screen

  1. Yusuf Shinobi (@dimazz22)

    Juni 18, 2013 at 7:48 pm

    Gan makasih banyak ni infonya kebetulan saya tertarik sama visual novel…

    Suka

     
    • 8oni

      Juni 18, 2013 at 9:46 pm

      Sama-sama. Kalau ada yang kurang jelas/ada yang ingin ditanyakan tentang Novelty silakan beri komentar lagi🙂

      Suka

       
  2. Adit Stone Hold

    Maret 5, 2014 at 12:13 pm

    kalau udah bisa masukin nama main character sendiri. terus biar bisa keluar pas yang nyebutin karakter lainnya gimana gan?
    contoh main character = maya
    karakter lain : halo “maya” <<<<<<<<<<<

    Suka

     
    • 8oni

      Maret 5, 2014 at 10:06 pm

      Pakai $ ditambahkan di depan variabel penampung nama ini.

      Jadi seperti ini contohnya : gambar 1
      Terus ntar keluarnya begini~ :

      2 dan 3

      Suka

       

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: