forum

[Panduan] Cara membuat simple Storyboard

posted
Total Posts
13
Topic Starter
Kyouren
Halo semuanya, Saya dan Del05 disini akan menyampaikan cara membuat sebuah storyboard sederhana. Sebelum kita mulai, kalian harus mengetahui apa itu storyboard and isinya apa saja, berikut pengertian storyboard dan isi-isi storyboard:

Pengertian Storyboard

KittyAdventure wrote:

Storyboard adalah Gambar animasi yang ada di beberapa beatmap

Del05 wrote:

Storyboard adalah Background custom yang dibuat dari beberapa gambar yang dianimasikan

osu!wikia wrote:

Storyboard adalah latar belakang bergerak dalam beatmap berukuran 640x480 pixel, biasanya digunakan untuk dekorasi dan terkadang digunakan untuk tujuan dari permainan itu sendiri.
Storyboard sendiri terdiri dari 5 isi, yaitu:

1. Movement
M,ease,starttime,endtime,x_start,y_start,x_end,y_end
Ease,  apa itu ?? fungsi untuk menentukan laju perubahan sebuah parameter dari waktu ke waktu
Untuk apa ?? ini berguna untuk membuat objek terlihat lbh nyata. Objek kehidupan nyata tidak pernah berhenti sekejap atau pun bergerak dalam sekejap, dan tidak pernah bergerak dengan kecepatan konstan
Mau geraknya di salah satu koordinat aja gimana ?? misal mau gerak horizontal ato vertikal aja ?
MX,ease,starttime,endtime,x_start,x_end  untuk X (horizontal)
MY,ease,starttime,endtime,y_start,y_end  untuk Y (vertical)
2. Scale
S,ease,starttime,endtime,scale_awal,scale_akhir
Scale menggunakan angka decimal, semisal ingin scale awal 60% lalu membesar hingga 100% dari 68000 ms hingga 75000 ms, maka code ditulis S,0,68000,75000,0.6,1
Cara mendapatkan angka decimal, misal ingin scale sebesar 75% maka  75/100 = 0.75
3. Fade
F,ease,startime,endtime,opacity_awal,opacity_akhir
Fade menggunakan angka decimal, semisal ingin opacity awal 50% lalu bertambah menjadi 75% dari 68000 ms hingga 75000 ms, maka code ditulis F,0,68000,75000,0.5,0.75
Angka decimal didapat dengan hitungan yang sama dengan angka decimal Scale
4. Rotation
R,ease,startime,endtime,angle_awal,angle_akhir
Pake decimal juga, tp gak tau cara ngitungnya xD sori wkwkwkw
5. Color
C,ease,startime,endtime,R_awal,G_awal,B_awal,R_akhir,G_akhir,B_akhir
Misal mau dari warna merah berubah jadi biru dari 68000 ms hingga 75000 ms, maka code ditulis C,0,68000,75000,255,0,0,0,0,255
6. Blend
P,ease,startime,endtime,A
Gak tau cara nyebutnya gimana xD km coba aja nanti pasti keliatan beda. Keliatan lbh nyatu gitu nanti
7. Loop
L,startime,loop_berapa_kali
Misal aku ingin loop scale 60% menjadi 75% dari 68000 ms diulang 10 kali dengan interval 345 ms, maka ditulis
L,68000,10
S,0,0,345,0.6,0.75


Sudah paham kan? Belum? Okay, sebelum itu, kalian harus mengetahui hal-hal penting dalam membuat storyboard:
[notice]
  1. Pahamilah kode kode Movement, Scale, Fade, Rotation, dan Colour karena kelima isi storyboard tersebut akan digunakan dalam proses membuat storyboard
  2. Siapkan gambar-gambar, bar (Spectrum), particle-particle, word (Lyrics), dan efek-efek lain yang akan dijadikan storyboard.
    Ingat, gambar-gambar yang akan dijadikan storyboard harus nyambung, sesuai dengan lagu, tidak mengandung unsur NSFW (setidaknya, harus SFW atau aman buat pemain)
  3. Saat membuat SB, file-file harus ada di folder dan menggunakan nama dan format file yang benar-benar dipakai, Contohnya:
    Sprite,Background,Centre,"aw.jpg",320,240

    Keterangan: "aw.jpg" = nama file aw dan menggunakan format "jpg" (Tempatnya terdapat di folder awal karena tidak ada di folder lain)

    Sprite,Background,Centre,"SB\sb1.png",320,240

    Keterangan: Jika gambarnya ada di folder lain, tinggal tambahkan nama foldernya seperti di atas (SB + \ + sb1.png = SB\sb1.png)
  4. Jika SBnya menggunakan BG ukuran 854x480 (untuk resolusi 1366x768), wajib mencentang "Widescreen Support"
  5. Jika SBnya ada menggunakan efek flash (terkadang efek flash membuat mata sakit), wajib mencentang "Display epilepsy warning"

Berikut cara-cara membuat storyboard sederhana:
1. Bukalah folder beatmap yang akan dibuat storyboard
2. Buatlah folder dengan nama bebas (Contohnya: "SB folder")
3. Masukkan gambar-gambar, bar (Spectrum), particle-particle, word (Lyrics), dan efek-efek lain ke dalam folder SB folder (Kalau bisa, buat foler lagi untuk lirik agar tidak memusingkan)
4. Buka osu!, lalu Edit
5. Pilih beatmap yang akan dibuat storyboard, nanti tampilan editor seperti ini: (Beatmapnya sudah diset, tinggal pasang storyboard)
6. Buka Design Tab, lalu tambahkan satu file gambar (terserah mau file gambar apa saja), lalu save
7. Keluar, lalu buka lagi
8. Setelah buka beatmap, bukalah file osb. Setelah membuka file osb, nanti tampilannya seperti ini:
9. Dalam SB, paling digunakan adalah //Storyboard Layer 0 (Background) dan //Storyboard Layer 3 (Foreground)
//Storyboard Layer 0 (Background) untuk Background/BG dan efek flash
//Storyboard Layer 3 (Foreground) untuk efek-efek seperti bar (Spectrum), Lirik, dan Particle
10. Untuk background, nanti akan dipasang Movement, Scale, dan Fade:
M,0,0,,320,240
S,0,0,,0.6335158
F,0,starttime,endtime,0,1 (Menggunakan 0,1 untuk pembukaan background)
F,0,starttime,endtime,1,0 (Menggunakan 1,0 untuk penutupan background)
11. Untuk efek flash, nanti akan dipasang Fade: Sama seperti untuk background tetapi menggunakan 1,0 bukan 0,1

Berikut cara-cara membuat storyboard menggunakan sgl oleh Arcubin:

Arcubin wrote:

Haruto wrote:

there should be a basic SGL guide too here ww oiya, kalau ada yg ngerti coding kenapa ga link aja SGL dithread ini? jadi semua orang bisa tau :D
how to sgl :
1. siapkan ide anda
2. buka sgl
3. ketik code
4. code gak berhasil sesuai dugaan
5. nangis seharian

lol jokes

yang pengen sgl

<element>.move(ease,starttime,endtime,startingx,startingy,endingx,endingy) => M,ease,starttime,endtime,startingx,startingy,endingx,endingy
<element>.scale(ease,starttime,endtime,startingscale,endingscale) => S,ease,starttime,endtime,startingscale,endingscale
<element>.fade(ease,starttime,endtime,startingoppacity,endingoppacity) => F,ease,starttime,endtime,startingoppacity,endingoppacity
<element>.rotate(ease,starttime,endtime,startingangle,endingangle) => R,ease,starttime,endtime,startingangle,endingangle
<element>.color(ease,starttime,endtime,startingred,startinggreen,startingblue,endingred,endinggreen,endingblue) => S,ease,starttime,endtime,startingred,startinggreen,startingblue,endingred,endinggreen,endingblue

contoh SGL
function makeSnow(StartTime, y) {
var snow = new Sprite("SB/dot.png");
var scaleRandom = rand(15,100)/100.00;
var fadeRandom = rand(40,100)/100.00;
var ease = rand(0,2);
var yrand = rand (-30,510);

var EndTime = StartTime + 5000 + (2000*scaleRandom);
var End = 97918;
var beat = 666;
snow.scale(StartTime,scaleRandom);
snow.moveY(StartTime,EndTime,y,yrand);
snow.moveX(ease,StartTime, EndTime, 760, -120);
snow.additive(StartTime,StartTime);
snow.fade(StartTime,fadeRandom);
if (EndTime < End)
{
snow.fade(EndTime - beat, EndTime, fadeRandom, 0);
} else {
snow.fade(End, End+beat*4, fadeRandom,0);
}
}

function randomYSnow(StartTime){
var randomY = rand(-30,510);
makeSnow(StartTime, randomY);
}

function createSnow(StartTime,n){
for(var i=1; i<=n;i++ ){
randomYSnow(StartTime + rand(-500,0));
}
}

function snowStorm(time,n,count){
for(var l=1; l<=count;l++ ){
createSnow(time + (410*l),n);
}
}

snowStorm(55252,5,90);

also tambahan aja (kalo mau nambahin)

Vector Scaling :
membesarkan/mengecilkan berdasarkan nilai x/y saja
code :
V,ease,starttime,endtime,startingscalex,startingscaley,endingscalex,endingscaley
contoh :
V,0,0,500,1,1.5,2,2

Vector Moving :
menggerakkan pada nilai x/y saja
code :
M(X/Y),ease,starttime,endtime,startingpoint,endingpoint
contoh :
MX,0,0,500,320,0

Additive blend :
memberi efek "blending" sebuah element
code :
P,ease,startime,endtime,A
contoh :
 P,0,0,500,A

Flip :
membalikkan element secara horizontal/vertikal
code :
P,ease,starttime,endtime,flip(H/V)
contoh :
P,0,0,500,H

Loop Method :
mengulang beberapa method sekaligus
code :
L,startime,timesloop
<method>
contoh :
L,0,5
M,0,0,100,320,240,0,0

tips: method dibawah loop menggunakan 2 kali space ( ), dan juga starttime dan endtime menggunakan Loop's startime sebagai offset 0

dan juga, untuk animation

1. buat element dengan gerakan frame yang diinginkan
2. masukkan ke folder
3. masukkan code dibawah kedalam .osb
Animation,layer,origin,"<elementpath>.<extension>",x,y,framecount,framevalue,looptype
4. dibawah definer itu, bisa dikasih method seperti sprite biasa

definer code
1. Animation : untuk mendefinisikan kalau ini kode animasi animasi
2. layer : Foreground, Background, Fail, Pass
3. origin : centre, top-left, top-right, dll
4. <elementpath> : tempat menyimpan seluruh frame animasi
5. <extension> : type file extensi
6. x : nilai x (default : 320)
7. y : nilai y (default : 240)
8. framecount : jumlah frame yang digunakan
9. framevalue : offset value per frame
10. looptype : LoopForever = animasi akan terus berulang dari frame awal hingga frame akhir, LoopOnce : animasi hanya berjalan satu kali

that being said, kalau ada pertanyaan tentang method yang gak jelas, cara mengurangi size OSB yang terlalu besar, bisa PM saya
[notice]
Tambahan Informasi

Untuk kalian yang belum bisa membuat efek Spectrum, Particle, dan Lirik, bisa menggunakan program buatan XinCrin!
particleGenerator: p/4667902/
spectrumGenerator: t/399437
Lyrics Generator: p/4875017/

Panduan yang dibuat oleh XinCrin masih dalam bahasa Inggris, buat yang ingin belajar bisa menghubungi saya atau Del05 :)
Mood Breaker

KittyAdventure wrote:

Tambahan Informasi

Untuk kalian yang belum bisa membuat efek Spectrum, Particle, dan Lirik, bisa menggunakan program buatan XinCrin!
particleGenerator: p/4667902/
spectrumGenerator: t/399437
Lyrics Generator: p/4875017/

Panduan yang dibuat oleh XinCrin masih dalam bahasa Inggris, buat yang ingin belajar bisa menghubungi saya atau Del05 :)
I should bookmark this links
Thank you TS
Cera-
numpang pejwan
*Bookmarked*
- PICO -_old
teng kyu for dis trid..
PatZar
wadooo, ini manual storyboarding ya?, tar deh coba" :^
Haruto
awesome

KittyAdventure wrote:

Sudah paham kan? Belum? Okay, sebelum itu, kalian harus mengetahui hal-hal penting dalam membuat storyboard:
[notice]
  1. Harus menyiapkan gambar-gambar, bar (Spectrum), particle-particle, word (Lyrics), dan efek-efek lain yang akan dijadikan storyboard.
    Ingat, gambar-gambar yang akan dijadikan storyboard harus nyambung, sesuai dengan lagu, tidak mengandung unsur NSFW (setidaknya, harus SFW atau aman buat pemain)
Sebenarnya, spectrum, partikel maupun lirik itu terserah si storyboarder, terutama spectrum. biasanya spectrum dipake dimap non-lyric/yang ga bervokal. on another word, instrumental dan lagu wubs.

mungkin kamu bisa rewrite bagian ini dengan kata, "Siapkan" dan remove "harus" karena kalau harus berarti gambar bar spectrum atau partikel harus benar2 ada di folder SB :)

cuma pendapat saya, semoga bisa dimengerti hehe kalau ada kata-kata yg salah mohon dimaklumi
there should be a basic SGL guide too here ww oiya, kalau ada yg ngerti coding kenapa ga link aja SGL dithread ini? jadi semua orang bisa tau :D
Arcubin

Haruto wrote:

there should be a basic SGL guide too here ww oiya, kalau ada yg ngerti coding kenapa ga link aja SGL dithread ini? jadi semua orang bisa tau :D
how to sgl :
1. siapkan ide anda
2. buka sgl
3. ketik code
4. code gak berhasil sesuai dugaan
5. nangis seharian

lol jokes

yang pengen sgl

<element>.move(ease,starttime,endtime,startingx,startingy,endingx,endingy) => M,ease,starttime,endtime,startingx,startingy,endingx,endingy
<element>.scale(ease,starttime,endtime,startingscale,endingscale) => S,ease,starttime,endtime,startingscale,endingscale
<element>.fade(ease,starttime,endtime,startingoppacity,endingoppacity) => F,ease,starttime,endtime,startingoppacity,endingoppacity
<element>.rotate(ease,starttime,endtime,startingangle,endingangle) => R,ease,starttime,endtime,startingangle,endingangle
<element>.color(ease,starttime,endtime,startingred,startinggreen,startingblue,endingred,endinggreen,endingblue) => S,ease,starttime,endtime,startingred,startinggreen,startingblue,endingred,endinggreen,endingblue

contoh SGL
function makeSnow(StartTime, y) {
var snow = new Sprite("SB/dot.png");
var scaleRandom = rand(15,100)/100.00;
var fadeRandom = rand(40,100)/100.00;
var ease = rand(0,2);
var yrand = rand (-30,510);

var EndTime = StartTime + 5000 + (2000*scaleRandom);
var End = 97918;
var beat = 666;
snow.scale(StartTime,scaleRandom);
snow.moveY(StartTime,EndTime,y,yrand);
snow.moveX(ease,StartTime, EndTime, 760, -120);
snow.additive(StartTime,StartTime);
snow.fade(StartTime,fadeRandom);
if (EndTime < End)
{
snow.fade(EndTime - beat, EndTime, fadeRandom, 0);
} else {
snow.fade(End, End+beat*4, fadeRandom,0);
}
}

function randomYSnow(StartTime){
var randomY = rand(-30,510);
makeSnow(StartTime, randomY);
}

function createSnow(StartTime,n){
for(var i=1; i<=n;i++ ){
randomYSnow(StartTime + rand(-500,0));
}
}

function snowStorm(time,n,count){
for(var l=1; l<=count;l++ ){
createSnow(time + (410*l),n);
}
}

snowStorm(55252,5,90);

also tambahan aja (kalo mau nambahin)

Vector Scaling :
membesarkan/mengecilkan berdasarkan nilai x/y saja
code :
V,ease,starttime,endtime,startingscalex,startingscaley,endingscalex,endingscaley
contoh :
V,0,0,500,1,1.5,2,2

Vector Moving :
menggerakkan pada nilai x/y saja
code :
M(X/Y),ease,starttime,endtime,startingpoint,endingpoint
contoh :
MX,0,0,500,320,0

Additive blend :
memberi efek "blending" sebuah element
code :
P,ease,startime,endtime,A
contoh :
 P,0,0,500,A

Flip :
membalikkan element secara horizontal/vertikal
code :
P,ease,starttime,endtime,flip(H/V)
contoh :
P,0,0,500,H

Loop Method :
mengulang beberapa method sekaligus
code :
L,startime,timesloop
<method>
contoh :
L,0,5
M,0,0,100,320,240,0,0

tips: method dibawah loop menggunakan 2 kali space ( ), dan juga starttime dan endtime menggunakan Loop's startime sebagai offset 0

dan juga, untuk animation

1. buat element dengan gerakan frame yang diinginkan
2. masukkan ke folder
3. masukkan code dibawah kedalam .osb
Animation,layer,origin,"<elementpath>.<extension>",x,y,framecount,framevalue,looptype
4. dibawah definer itu, bisa dikasih method seperti sprite biasa

definer code
1. Animation : untuk mendefinisikan kalau ini kode animasi animasi
2. layer : Foreground, Background, Fail, Pass
3. origin : centre, top-left, top-right, dll
4. <elementpath> : tempat menyimpan seluruh frame animasi
5. <extension> : type file extensi
6. x : nilai x (default : 320)
7. y : nilai y (default : 240)
8. framecount : jumlah frame yang digunakan
9. framevalue : offset value per frame
10. looptype : LoopForever = animasi akan terus berulang dari frame awal hingga frame akhir, LoopOnce : animasi hanya berjalan satu kali

that being said, kalau ada pertanyaan tentang method yang gak jelas, cara mengurangi size OSB yang terlalu besar, bisa PM saya
Surono
SBing ternyata susah susah gampang, semisal 3 tahun sebelumnya dari sekarang ga pernah SBing.. pasti bingung (lupa mungkin) untuk nyoba SBing lagi, entah itu gegara sistem cara buatnya atau kode2 AAAaaaaaa ngetik opo aku >w<
Topic Starter
Kyouren
Wah, makasih kak Arcubin, ini lagi nunggu kak Del05 buat screenshot sama perbaikan thread ini
Zan-
bisa mapping, gabisa storyboarding

gue
Arcubin
have read it once more,

rotate pakai π (phi) sebagai trajectory.
jadi misal pengen rotate 360 derajat, codenya
R,0,0,50,0,3.14

jadi kalo pengen muter berkali-kali bisa dengan equation (3.14 x <amount of spin>)
atau kalo pengen hanya 180 derajat pakai (3.14 x 1/2)
or else tergantung kreatifitas
Rossi
nyimak dulu :v
Mamat
Tutorial lanjut: osb.moe
Please sign in to reply.

New reply