Pap0P1zq8JJYElFeA1qX1oXVwFGs9jnGapuo3DAq
Bookmark

Tutorial : Cara Membuat Watermelon Game (How To Make Watermelon Game)

    Belakangan ini di twitter lagi viral banget nih sama game semangka yang satu ini. Sebenernya sederhana sih gamenya tapi gatau kenapa kek adiktif banget aja gitu maininnya? Serunya lagi, game ini bisa diubah jadi gambar apa aja sesuai kreasi kita. Udah banyak banget versi kpop yang bersliweran di twitter gue dan menurut gue versi artis thailand juga udah lumayan banyak sih. Sebenernya buat ngebikin game ini gak pula ribet, intinya harus niat aja pasti bisa kok. Kalo gitu skuy langsung aja cek tutorialnya!

Sebenernya ini tutorial versi terjemahan bahasa Indonesia. Big thanks buat @ssamyens di twitter yang udah ngeshare tutorial ini dan ngebolehin gue buat bikin versi indonya. Kalau mau cek tutorial watermelon game english version bisa langsung click here aja ya.



Sejauh ini gue udah bikin 3 versi yaitu versi Jaa 1Day, Titan 1Day, sama Serious Bacon. Kalau kalian mau coba mainin gamenya bisa langsung klik aja ya linknya. Nah, di kesempatan kali ini gue udah ngescreenshot step-step selama gue bikin yang versi Serious Bacon. Buat yang belum tau, Serious Bacon ini adalah grup band asal Thailand. Sebelumnya gue dah perna bahas profil sama fakta mereka, kalian bisa banget cek postingannya di sini. Kalau gitu yuk langsung dipraktekin tutorialnya!


 HOW TO MAKE WATERMELON GAME

1. Siapkan 11 foto yang mau diganti


Di sini gue udah nyiapin 11 foto yang nantinya mau di-replace. Urutannya udah gue urutin sesuai dari bola yang paling kecil sampe paling gede sesuai nomor biar lebih teratur aja sih. 


2. Download source code dari github


Link github: click here

Klik tombol tulisan code yang warna hijau lalu tekan download zip. Kalau udah didownload, file zip tadi jangan lupa di extract dengan cara klik kanan. Di sini file hasil ekstraknya gue pindahin ke Data E.

Isi folder setelah diextract


3. Install node.js & serve npm package

A. NODE.JS


Link nodejs: click here (download yang versi LTS)
Setelah terunduh, jangan lupa diinstall seperti biasa. 

B. SERVE NPM PACKAGE


Caranya buka folder dari github yang udah di extract tadi, terus di bagian atasnya diklik, ketik cmd, lalu di enter.


Setelah command prompt terbuka, ketik :
npm i -g serve
Setelah itu dienter. Kalau prosesnya udah kelar jangan ditutup tapi diminimize dulu aja command promptnya soalnya nanti mau dipake lagi.


4. Edit foto menjadi lingkaran

Foto yang mau diubah ada di folder daxigua-master > res > raw-assets
Folder yang mau diubah (dari kecil ke besar) :
ad, 0c, d0, 74, 13 
03, 66, 84, 5f, 56, 50


Bebas mau pake aplikasi foto apa tapi kalo gue di sini pake photoshop. Kalo gak ada Photoshop juga bisa pake Photopea dari web, kurang lebih sama sih sebenernya kaya Photoshop. Foto pertama yang bakal gue edit adalah bola yang paling kecil yaitu bola dari folder "ad". Setelah itu buka juga foto yang mau kita pake. Di sini gue pake logonya Serious Bacon.



Setelah itu pindahin foto yang mau kita replace ke foto bola tadi. Nah pindahinnya bisa kalian langsung drag aja kalo gak di bagian layer bisa diklik kanan fotonya > duplicate layer > pilih file yang bola tadi > ok.



Balik ke foto bola yang mau diubah tadi. Setelah foto kita diduplicate ke situ otomatis filenya jadi kegedean kan ya? Nah, buat ngecilinnya bisa teken ctrl + T (buat nampilin kotaknya) terus tinggal dikecilin sambil teken shift+alt (biar fotonya gak penyet).


Setelah dirasa ukurannya udah pas, di bagian layer klik kanan fotonya, lalu klik "Create Clipping Mask".

Hasil jadi setelah dibuat clipping mask



Kemudian tinggal disimpan dengan cara klik file dipojok kiri atas > save as > ubah format foto jadi png > save. Nama foldernya gak usah diubah ya jadi klik ok aja biar foto yang sebelumnya langsung keganti sama foto yang baru. Lakukan langkah yang sama untuk 10 foto sisanya, semangat gengs!
 

5. Ubah judulnya dengan notepad


Pada file "index.html" klik kanan lalu open with pilih dengan notepad. Setelah terbuka ganti judul yang udah gue blok dengan nama sesuka kalian. Kalo gue judulnya gue ganti jadi "serious bacon".


Setelah itu jangan lupa ganti juga judul yang ada di  "extraSettings.js" dari folder src. Ganti bagian yang tulisannya udah gue blok.


6. Play


Buka command prompt yang sebelumnya udah dibuka lalu ketik: 
serve
Setelah di enter tar muncul tampilan seperti gambar di atas. Coba mainkan lewat browser di http://localhost:5000


Teken f12 nanti tampilannya bakal kaya gini. Di laptop gue gak tau deh kenapa malah kek gini, tanahnya gak muncul gitu. Tapi gak papa, gak ngaruh kok, nanti di hape tampilannya aman.



7. Deploy di Vercel

a. Bikin akun github lalu signup di Vercel


Link vercel: click here
Link github: click here
 
b. Deploy pake command line


Ini pake command prompt yang baru ya. Caranya sama kek tadi jadi dari folder daxigua-masternya di ketik cmd terus dienter. Setelah command prompt terbuka, ketik : 
npm install -g vercel

Setelah itu ketik : 
vercel login

Nanti kalian disuruh masukin email akun vercel kalian, lalu enter. Setelah itu nanti dikirim email verifikasi tinggal kalian cek aja di email kalian lalu klik. Setelah terverifikasi bisa langsung ngelakuin langkah selanjutnya.


Setelah berhasil login, ketik:
vercel

? Set up and deploy “E:\daxigua-master”? [Y/n] (ketik y)
? Which scope do you want to deploy to? (tar muncul username yang udah berhasil login, langsung enter aja)


? Link to existing project? [y/N] (ketik n)
? What’s your project’s name? (url game, kalo bikin seriousbacon nanti jadi seriousbacon.vercel.app)
? In which directory is your code located? ./ (enter aja)

Kemudian projek akan diproses. Setelah itu akan muncul pertanyaan "Want to override the settings?" tinggal ketik n aja terus enter.


Setelah itu projek kembali diproses dan berhasil dideploy! Di baris ketiga yang bertuliskan "Production" itu adalah alamat url dimana game kita berhasil dibuat. Kalian bisa langsung share aja linknya biar temen kalian juga bisa nyobain game yang baru aja kalian buat.

Selesai deh tutorialnya! Gimana guys? Gak terlalu susah kan ya? Apa susah banget?😂 Sebenernya ini postingan tutorial pertama yang pernah gue post di blog ini jadi sorry banget kalo masih ada kekurangannya. Semoga kedepannya gue bisa buat tutorial yang lebih banyak lagi di blog ini. 

Kalau kalian udah nyoba tutorialnya dan berhasil, bisa banget cantumin link game kalian di kolom komentar ya! Kalau masih ada yang bingung juga bisa tanya aja di kolom komentar, insyaallah bakal gue bantu kalo bisa. 

Jangan lupa juga sempetin waktu buat ngeklik ads yang ada di postingan ini ya, biar gue tambah semangat gitu nulisnya xixixi. Thx for reading and see you on the next post! 


42 comments

42 comments

  • Aprillia Harahap
    Aprillia Harahap
    June 7, 2022 at 10:15 PM
    Semoga dibaca ya wkwkwk. Abis step terakhir itu langsung bisa mainin gamenya apa gimana ya kak? Soalnya pas aku copy link nya tuh malah 404 not found. Thanks in advance
    • Aprillia Harahap
      alip
      June 9, 2022 at 12:55 AM
      kalo stepnya udh bener harusnya udh lgsg bisa dimainin sih kaa

      nanti pas linknya dibuka dia loading dulu gitu, ditunggu aja abis itu baru bisa dimainin
    Reply
  • Unknown
    Unknown
    February 12, 2022 at 10:29 AM
    kak kok bentuknya gak lingkaran ya? padahal udah aku png jd bulet. coba cek ini kak https://nabilcoba.vercel.app
    • Unknown
      alip
      February 12, 2022 at 11:07 AM
      Haii, barusan aku liat di filemu itu sizenya gak sama seperti yang dari default. Misal file di folder 'ad' yg harusnya punya ukuran 52x52 di punyamu jadi 500x500. Jadi mungkin bisa kamu ikutin step dari aku ya, jadi foto yg dr defaultnya kamu timpa aja sama foto yg baru biar sizenya gak salah😊
    Reply
  • Unknown
    Unknown
    September 21, 2021 at 10:57 PM
    Kak I hope you reply my comment soon.
    Jadi aku udah ngikutin step by step, harusnya bener tapi pas aku coba di local host blank putih dengan detail "Access Control Allow Origin Missing". Keterangan bawahnya tuh mp3nya uncaught decode error (alias gk ada kan ya?) Tapi aku gk ngubah2 mp3 sama sekali sih:(( atau code lain gk ada yg kuubah.
    Pokonya detail errornya dibagian mp3 sih.
    Itu gimana ya? Soalnya aku udah coba browsing buat penyelesaian tapi tetep stuck. Huhuhu semoga bisa bantu selesaiin ya^^ maaciw
    • Unknown
      alip
      September 22, 2021 at 8:41 AM
      hi sorry aku gak tau kudu digimanain:( tp mungkin itu ada di settingan browsernya deh, jd coba kamu buka localhostnya lewat browser lain aja mungkin bisa?
    Reply
  • Anonymous
    Anonymous
    May 22, 2021 at 10:26 AM
    smua step ny udh slesai dilakukan tpi pas buka link mau coba dimainkan stuck di 100% loading itu knp? Udh coba bikin ulang ttp gtu
    Reply
  • yasminasyy
    yasminasyy
    May 18, 2021 at 5:08 PM
    kak, pas mau ganti nama di extraSetting.js ny gabisa knp y?
    • yasminasyy
      alip
      May 19, 2021 at 8:23 AM
      gabisa dibuka apa gimana? mungkin coba km bukaknya klik kanan trus open with notepad
    Reply
  • Unknown
    Unknown
    March 31, 2021 at 8:38 AM
    kak maksudnya ketik f12 gimana ya??
    atau berarti pake airplane ???
    • Unknown
      alip
      March 31, 2021 at 5:13 PM
      ketik f12 di keyboard buat ngecek tampilannya ka
    Reply
  • Unknown
    Unknown
    March 30, 2021 at 8:47 PM
    Kak kok saat localhost itu putih semua gaada bunder² kayak di gambar itu kenapa ya??
    • Unknown
      alip
      March 30, 2021 at 11:53 PM
      itu mungkin ada file yg namanya salah atau bisa jadi salah penempatannya, coba dicek ulang lg folder2 yg udah direplace ya
    Reply
  • Unknown
    Unknown
    March 30, 2021 at 7:31 PM
    Kak kok saat di cmd kan ketik npm i -g serve trus di enter tapi terus jadi npm is not recognized as intermal or external commad operablr program or batch file trus kan aku dah selesai ngedit lingkaran trus ketik serve tapi muncul kayak gitu lagi ya kak
    • Unknown
      alip
      March 30, 2021 at 11:53 PM
      coba ikutin tutorial ini ya mungkin mmbantu http://researchandprogram.blogspot.com/2017/10/how-to-solve-npm-not-recognized-as-internal-or-external-command-error.html
    Reply
  • Unknown
    Unknown
    March 30, 2021 at 1:20 PM
    Kak kok saat save gambarnya kan namanya sama tapi kok tidak bisa ya??
    • Unknown
      alip
      March 30, 2021 at 4:19 PM
      save gambar di photoshopnya apa gmn? gak bisanya muncul pesan kek mana ya?
    Reply
  • Anonymous
    Anonymous
    February 12, 2021 at 2:05 PM
    kak, setelah ngetik 'serve' kayak di step ke-6, katanya is not recognized gitu kak. itu digimanain ya?
    • Anonymous
      alip
      February 14, 2021 at 8:34 AM
      coba ikutin tutorial ini mungkin mmbantu http://researchandprogram.blogspot.com/2017/10/how-to-solve-npm-not-recognized-as-internal-or-external-command-error.html
    Reply
  • Unknown
    Unknown
    February 11, 2021 at 5:21 PM
    kak pas localhost abis loading putih semua itu kenapa yaa?
    • Unknown
      alip
      February 11, 2021 at 7:14 PM
      itu mungkin ada file yg namanya salah atau bisa jadi salah penempatannya, coba dicek ulang lg folder2 yg udah direplace ya
    Reply
  • Unknown
    Unknown
    February 11, 2021 at 3:51 PM
    kak kalo 'npm' is not recognized itu kenapa?
    • Unknown
      alip
      February 11, 2021 at 7:12 PM
      kurang tau jg ya, tp coba ikutin tutorial ini mungkin mmbantu http://researchandprogram.blogspot.com/2017/10/how-to-solve-npm-not-recognized-as-internal-or-external-command-error.html?m=1
    Reply
  • Anonymous
    Anonymous
    February 11, 2021 at 2:09 PM
    I already finished until the last step, but the link is not working and it said error not found. How do I fix this?
    • Anonymous
      alip
      February 11, 2021 at 7:31 PM
      sorry idk about this problem:( maybe you can recheck ur replaced folder if there's a wrong name or not. or maybe you can re-try the last step
    Reply
  • Unknown
    Unknown
    February 10, 2021 at 8:56 PM
    How can we deploy another game using the same account? cause I'm stuck with that. I want to deploy another watermelon game with different artist on it but when I type vercel on cmd it just show the same project. Is there any other way to deploy another game on the same account?
    • Unknown
      alip
      February 10, 2021 at 10:30 PM
      i have just found out why it can't deploy another game. did you just make another game using the same folder that you have just deployed? i tried and it shows the same project just like what you told. if that's the case you can use this method :

      back to the zip from github that you just downloaded and extract it again (place the extracted folder at the different place ex: Data D). after that do the rest step. i tried and it works, hope it helps😊
    Reply
  • Anonymous
    Anonymous
    February 10, 2021 at 2:50 PM
    Ka, ini kalo udh berhasil sekali gak bisa buat lagi ya di PC yg sama. Udah ganti akun tetap gak bisa.
    • Anonymous
      alip
      February 10, 2021 at 8:01 PM
      aku gatau 1 akun maksimal brapa tapi kalo aku pake 1 akun di pc yg sama udh berhasil bikin 3 sih, jd harusnya bisa bikin lebih dari satu. btw kamu stuck di step brapa mungkin ada yg kelewat kah?
    • Anonymous
      Anonymous
      February 10, 2021 at 9:56 PM
      Gak ada yg kelewat ka, sampe aku pelan- pelan stepnya. Aku ganti akun, aku hapus file dari awal. Tetap gak bisa. Harus coba lagi sepertinya
    • Anonymous
      alip
      February 10, 2021 at 10:37 PM
      km pake folder yang sama bukan? nah tadi aku coba lagi di folder yang sama ternyata munculnya tetep project serious baconku. aku lupaaa, kmaren aku gak kek gitu pas bikin game yg lain trnyata

      nah coba ikutin cara ini, kamu balik ke file zip github itu, trus extract ke tempat lain (misal Data D). abis itu ikutin lagi stepnya kek biasa. barusan aku coba lancar kok, berhasil bikin link baru dan masih pake akun vercel yg sama. smoga membantu yaa😊
    Reply
  • Anonymous
    Anonymous
    February 10, 2021 at 12:38 PM
    Kaaakk thank you so much for your tutorial!! Aku berhasil buatt huhuhu thank youuu
    Reply
  • Anonymous
    Anonymous
    February 9, 2021 at 7:13 PM
    Thank you so much for the tutorial, your method is easiest. I succeeded made one.
    Reply
  • Pii
    Pii
    February 8, 2021 at 9:06 PM
    Kak lewat ponsel bisa gak sih?
    Reply
  • Unknown
    Unknown
    February 8, 2021 at 9:05 PM
    Bisa di android gak ? Gw kagak ngerti woy yg di komputer khab 😖 mau buat veris bu ladda ama patrick
    • Unknown
      alip
      February 9, 2021 at 7:45 AM
      gak bisa euy cuman bisa di pc😔
    Reply
  • Babanana
    Babanana
    February 8, 2021 at 5:16 PM
    Ka bisa diganti background nya gk ya ?
    • Babanana
      alip
      February 8, 2021 at 7:59 PM
      bisa kok, bisa diganti background aja atau sama tanahnya juga bisa ya😊
      85 (background)
      eb (ground)
    Reply
  • Aina Nurain
    Aina Nurain
    February 8, 2021 at 4:29 PM
    i made one using your tutorial, thank you so much! :)
    kgw-two.vercel.app
    • Aina Nurain
      alip
      February 8, 2021 at 7:55 PM
      ur welcome glad to hear that, yours is cute btw!☺️
    Reply
  • Auliashin
    Auliashin
    February 8, 2021 at 8:41 AM
    ka pas ngetik cmd kok ga muncul kenapa ya?
    • Auliashin
      alip
      February 8, 2021 at 9:50 AM
      mungkin terdisable ka command promptnya, mungkin bisa pake cara ini https://androbuntu.com/2019/01/21/cmd-tidak-bisa-dibuka/
    Reply
close