Recent Blogposts of Behind the Scenes

出歌: 呢首歌嘅歌詞好奇怪 | Song Release: The Lyrics of This Song are Weird(Nisaugo ge Gotsi hou Keigwai)

呢首係我第一首公開發放嘅歌, 歌名係"呢首歌嘅歌詞好奇怪". 首歌係關於呢首歌同埋佢嘅歌詞有幾咁唔掂嘅.

Behold my first song ever released publicly: "The Lyrics of This Song are Weird". This song is about the suckiness of the song and its lyrics.

Click呢度睇歌詞

Full lyrics are available here!

首歌係我自己一個人整嘅(包括把聲同段片). 整左超過一個月. 如果你鐘意嘅話, 麻煩幫段片俾個like, subscribe個Youtube channel同埋share下俾你D friend. 如果呢首歌嘅反應良好, 我響未來將會整多D類似嘅歌. 多謝支持! :)

I made the song (including the vocal and the video) on my own. It took me more than a month to produce it. If you enjoyed the song, please give the video a like, subscribe to my Youtube channel and share it with others. If the reception of this song is good, I'll spend more time to compose similar songs in the future. Thank you very much! :)

我原本係為左整game而學整音樂嘅. 直至到幾年前, 我大概每一年就整一首廣東話歌. 呢首係我整嘅第三首歌. 之前果兩首太差, 所以我冇放到出來. 呢首我覺得唔算好好, 但係都算係咁啦. 所以我就決定放出來喇.

I learned music composition for game development. Since a few years ago, I compose Cantonese songs approximately once a year. This song is the third song that I've made. I didn't release the previous two songs because the quality were too bad. This one isn't good. It isn't that bad either. That's why I decided to release it.

幕後製作 | Behind the Scenes

呢個project總共用左8個軟件. 包括LMMS, Audacity, ProjectM, SimpleScreenRecorder, Inkscape, Spriter Pro, Aegisub同FFmpeg. 除左Spriter Pro之外, 其他都係免費嘅開源的軟件.

In total, 8 software applications were used for this project. They are LMMS, Audacity, ProjectM, SimpleScreenRecorder, Inkscape, Spriter Pro, Aegisub and FFmpeg. Except Spriter Pro, all of them are FOSS software.

音樂製作 | Music Production

首歌係用LMMS整嘅. LMMS係一個俾你由零開始嘅整音樂嘅軟件. 幾年前, 我曾經幫過嘅佢地手, 開發LMMS呢個軟件. 而把聲呢, 係用Audacity錄嘅. 把聲經過處理.

This music was composed with LMMS. It's a music composition software designed for making music from scratch. I had briefly contributed to its development a few years ago. The voice was recorded and processed using Audacity. Some audio engineering was performed for the vocal track.

首歌係咁樣整出來嘅:

The procedure of composing this song is shown below:

  1. 作一段melody | Compose a piece melody
  2. 作個chord同arpeggio來迎合個melody | Compose the chord and the arpeggio for the melody
  3. 用同一個chord同arpeggio, 作多幾段melody | Using the same chord and the arpeggio, make several more pieces of melodies
  4. 作多幾個差唔多嘅melody, chord同arpeggio | Make a few variants of the melody, chord and arpeggio tracks (e.g. change the beat or the instrument used)
  5. 作幾段beat | Compose several pieces of beats
  6. 排好D melody, chord, arpeggio同beat | Put the melodies, chords, arpeggios and beats in sequence
  7. 填詞 | Write the lyrics
  8. 錄音, 之後處理 | Record the vocal. Then audio engineer it
  9. 執頭執尾執靚佢 | Remaster the entire song (e.g. reverb, turning mix volume, attaching other effects, etc.)

我無正式學過作曲. 如果我用錯D專有名詞嘅話, 麻煩同我講聲. 我會更正. 另外, 以上步驟唔係唯一嘅作曲嘅方法. 以前我都用過其他方法作曲. 呢D步驟只係想解釋返我點整呢首出來嘅姐.

I haven't formally learned music composition. If I have used the wordings above incorrectly, do tell me. I will fix them. Please notice that it is not the universal solution of music production. I have tried out other approaches in my other songs. The steps above is just what I did for making this specific song.

以下係首歌響LMMS嘅cap圖:

Here's a screenshot of the song being edited in LMMS:

LMMS screenshot

作廣東話歌同其他語言嘅歌有一個好大嘅分別. 就係要啱音. 我地有成6個音, 要對返個melody其實都有D難度. 仲要整到個歌詞嘅意思都要啱, 難上加難. 所以我作作下就卡死左喇!

Since Cantonese is a tonal language, I have to match the pitch of the melody notes with the tone of the Cantonese characters. Therefore, it's very tough to compose a Cantonese song as it's difficult to find the right word that has both the correct tone and the correct meaning. I was stuck in the midway while I was writing the lyrics.

跟住我用Python整左個廣東話填詞對音工具. 我搵到三個中文詞語嘅database. 配合埋粵語審音配詞字庫嘅聲調嘅資料(因為廣東話嘅聲調一直有變, 我自己再人手改左個審音字庫嘅部分聲調). 有左呢個工具, 我只要打低個音, 就可以搵晒D啱音嘅詞語.

Therefore, I had developed a tool to do this for me. The tool was written in Python. By using three Chinese word databases that I found on the internet, combined with the tone of the word suggested by Chinese Character Database: With Word-formations (which I had further modified manually because some of the tones were changed in the modern Cantonese we're using today), a list of words with matching tones is generated:

Screenshot of the Tones to Word Tool

由上面嘅cap圖可以見到, 呢個工具可以列出個database嘅啱音嘅字(但係有小量錯誤). 例如我打240, 就可以搵到同"240"同音嘅字. 包括"亂晒籠, 垃圾蟲, 定晒形, 未夠喉, 滑鐵廬, 落晒形, 鼻涕蟲".

As shown on the screenshot above, the tool lists out all matching words that it found (with some minor errors). For example, if I type "240" (二四零), the first character of the word has to match the tone of 二, the second character must match 四, and the third character must match 零. The filtered result of the words is displayed, which includes "亂晒籠, 垃圾蟲, 定晒形, 未夠喉, 滑鐵廬, 落晒形, 鼻涕蟲" in the Chinese word database of Cantonese.

個工具仲可以俾你揀database. 目前個工具有廣東話, 大陸普通話, 同埋台灣國語嘅詞語嘅database. 雖然唔係所有歌詞都係用呢個工具作嘅, 但係呢個工具用來做brainstorming同埋搵D啱音嘅四字成語真係無得輸. 我以後應該都會繼續用呢個工具來填詞.

Database selection is also supported. The current version of this tool supports Cantonese, Chinese and Taiwan-style Chinese. This tool helped a lot while I was writing the lyrics for this song. Although I did not exclusively use this tool for writing all of the lyrics, it was very useful for brainstorming and finding Four-characters Chinese Idioms that match the tone that I want. I will probably continue to use this tool for my future songs.

不過好可惜, 我唔清楚部分database嘅使用條款. 所以我係唔可以放呢個工具出來嘅. 同大家講返聲唔好意思先.

Unfortunately, due to the unknown license of some Chinese words databases, I could not release this tool publicly. I'm sorry about that.

填完詞就用Audacity錄音同改音. 下面幅圖係我改音嘅過程. 只要複製highlight左果part就可以延長隻字個音長. Delete左果part就可以縮短隻字個音長. 呢個步驟不停重複, 直至做到把聲同首歌同步為止.

After the voice was recorded according to the lyrics written, Audacity were used for audio engineering. The image below shows how did I change the length of the Cantonese character that I had sung. By duplicating the highlighted part, the duration of that character is extended. Conversely, by deleting that part, the duration is reduced. This process was repeated for synchronizing my voice with the melody.

Audacity Screenshot

之後Audacity整出來嘅track會放返入LMMS裏面. 最後首歌係用LMMS generate出來嘅.

After that, the vocal track generated by Audacity was imported into the LMMS project. Finally, the song was generated by LMMS.

影片製作 | Video Production

整完首歌要整片.

After the completion of the song itself, a video for this song was produced.

我用左ProjectM來做Audio Visualization. ProjectM係一個實時嘅Audio Visualization軟件. 我用SimpleScreenRecorder來錄低作個audio visualization. 佢可以直接錄低任何program嘅OpenGL影像. 比起響軟件層面錄更有效率, 唔會疾下疾下.

The audio visualizer software used in the video used was ProjectM. It is a real time audio visualizer. The visualization were recorded using SimpleScreenRecorder, which supports recording OpenGL output of any program. Compared with software-based recording method, recording the OpenGL output is much more efficient. Therefore, the output video is almost lag-free.

個招牌就用左Inkscape整. 跟住用Spriter Pro將個招牌變成動畫. 而字幕係用Aegisub整嘅. 跟住用Inkscape畫多一幅圖, 叫人subscribe我個channel. 最後用FFmpeg將LMMS整嘅歌, Audio Visualization, 字幕同個招牌冚把爛合埋一齊. 搞掂!

The image of the banner was created using Inkscape. After that, it was animated using Spriter Pro. Image sequences of the animation were generated. The subtitles editor used for the video of this project was Aegisub. With this software, a subtitles file were generated. An extra image were drawn with Inkscape for the end scene that asks the viewer to subscribe my channel. Finally, the audio outputted by LMMS, the visualization of the audio, the banner image sequence and the subtitles were combined by using FFmpeg. That's it!

希望你會鐘意啦! | Hope you enjoyed it!

我係作曲新手. 呢首個我花左好多工夫, 整左成超過一個月. 如果你鐘意嘅話, 麻煩幫忙share一下. 如果你地鐘意, 我日後會整多D呢類嘅歌. 多謝支持!

I'm rather new in song production. More than a month of work was spent on producing this song. If you enjoyed it, please take a moment to share it. Similar songs will be produced if the reception of this one is good. Thank you very much! :)

除此之外, 我都歡迎未來合作. 如果你有興趣, 可以send封email俾我架(email見網頁頂部)!

In addition, future collaboration is welcomed. Feel free to drop me a line by using the email address on this website.


Global Game Jam 2017 - E.M. Wave Jammer: Release Announcement and Post Mortem

Jan. 22, 2017, 1:42 a.m. Behind the Scenes Gamedev Product Release

This year, I've developed the game E. M. Wave Jammer. It is the world's first telephone game in Global Game Jam, which is playable by dialing a telephone number.

I FUBAR'd in last year's game jam. Fortunately, I did much better this year.

This game is for entertainment only, no political message intended.

Play Now

For Hong Kong SAR phone numbers, dial 54839953. For non-Hong Kong SAR phone numbers, dial +85254839953 with skype. We do not accept international non-skype calls to save our operational cost. This game has Cantonese(Press 1), Mandarin(Press 2) and English(Press 3) version. Please notice that this phone number is temporary. It will be changed after I've finished setting up my phonesite.

Rules

The game happens in Japan during Cold War era. In the game, North Korea is using advance electromagnetic waves technology for sending signals to Cuba. They are plotting to attack Japan. In the game, the player plays as the role of the commander of telecommunication department. The player is responsible for jamming the signals between them.

For the ease of command, Japan is divided into 6 zones. The electromagnetic waves from North Korea will propagate via zone 1, zone 2, zone 3, zone 4, zone 5, zone 6, all the way to Cuba.

The player is required to use limited amount of electricity to build jammers. Electricity are consumed for building the jammers. No electricity is required to operate the jammers. The more electricity you spend to build a jammer, the more powerful it is. For example, a 5W jammer can attenuate the signal by 5W.

The remaining non-attenuated signal will become military information end up on enemy's hand. When the information level reaches 100%, you lose. The information level is increased by the Wattage of signal received divided by the Wattage of signal sent. There is no way to reduce the information level.

The player starts with 20W of electricity. To generate electricity, generators have to be built. They generate electricity when signal pass thru its zone. For example, a 5W generator will cost 5W to build, and generates 5W of electricity.

Each zone can only have one structure(e.g jammer, generator). New structure building on a zone with existing structure will demolish the existing one. Structures cannot be sold.

After wave 6, there will be Accelerated E.M. Wave signal. It is able to bypass Zone 2, 4, 6. It is sent via Zone 1, 3, 5 to Cuba.

After wave 11, there will be Narrow-band E.M. Wave signal, which includes low frequency E.M. Wave Signal and high frequency E.M. Wave Signal. Ordinary jammers are half as effective against these signal compared with other signals. Therefore, the player is able to build LF Jammers and HF Jammers to defend against these signals. A 10W LF Jammer can attenuate LF Signal by 20W, Ordinary Signal by 5W, and cannot attenuate HF signal. A 10W HF Jammer can attenuate HF Signal by 20W, Ordinary Signal by 5W, and cannot attenuate LF signal.

After wave 16, there will be E.M. Wave from Cuba to North Korea, which propagates via Zone 6, 5, 4, 3, 2, 1 to North Korea. Accelerated E.M. Wave from Cuba propagates via Zone 6, 4, 2 to North Korea.

After wave 21, there will be FM Signal. FM Signals is immune to Ordinary Jammers. It makes non-LF, non-HF FM waves very troublesome to be dealt with because they couldn't be attenuated by ordinary jammers. Yet, HF and LF jammers are only half as efficient to deal with non-LF, non-HF waves.

Pre-Jam

Before the Jam, I've developed the hardware Dinbo Prototype B as well as its library libdinbo. I've also made a template for developing any telephone system based on this library.

In addition of the telephone system, I have also practiced using LMMS, Labchrip, Audacity, SoX, just all of the software that I planned to use. I also planned to practice Aegisub for making video subtitles. Unfortunately, I didn't have enough time and the Jam day had come. :(

First Day

Just like the last year, the 48 hours game jam spanned across three days.

In the first day, I've arrived at the venue, before the event started, I've found a bug on the library of Dinbo Prototype B that made it failed to detect DTMF touch keys properly. Fortunately, I fixed it right before it started.

After that, I've listened to the briefing. After the theme Waves was announced, I came up with this game design quickly. Since I was working solo in this jam, this process went way quicker than the jam of previous year. :)

Here is a photo of my game design document. As you see below, it is only one A4 page. It is poorly-organized because I'm the only intended audience of this document. :P

Design Document of E.M. Wave Jammer

Some of the features are strike'd out at the design stage because I foresaw that it couldn't be completed within 48 hours.

Here is a photo taken from day 1 of the event. Sorry for phone camera quality:

Day 1 of Global Game Jam 2017 in Hong Kong Jam site

There were many jammers in our Jam site, and the Hong Kong SAR was the 8th largest out of 700+ jam sites all over the world in 2017!

With the experience of last year, I won't sleep on-site because I couldn't. At the end of the day, I went to home and took a rest.

Second Day

Although I slept much better than last year, I still didn't sleep enough. Therefore, I woke up late. I started programming. Feeling dizzy, I took a nap after an hour of development. Then I woke up again and continue. To save some traveling time, I decide to jam at home this day because I was solo and I didn't need to go to the site to collaborate with my teammates.

With software emulation feature of the libdinbo, I was able to develop the game without dialing the phone number. It saved me some cost of calling the number.

With existing code base, the development went smoothly. I managed to implement the game play. After midnight, I started translating the game into Mandarin as well as English. I have also synthesized and recorded some sfx. Originally I also planned to make music and recording the Cantonese voice myself. Considered that I need to prepare for the presentation, I decided to drop these features and went to bed. All of the development works ended here. However, I still haven't deployed it on the Dinbo Prototype B hardware.

Third Day

I (almost) dedicated this day for preparing for the presentation. I decided to prepare for the presentation before deploying it to the hardware. That is because the deadline of submitting the presentation was very tight. And preparing presentation before the deployment can buy me a bit extra time.

I started with recording the gameplay audio using the voice log function of the libdinbo in its software emulation mode. It went quite well and I've recorded a 9 minutes audio. I had cut down the audio to 4.5 minutes.

Then I asked the volunteers about the time limit of presentation. Turned out that each team would only be given two minutes to present their game. Well, I thought that I had 5~10 minutes. :/

After that, I further cut down the audio to 1.5 minutes. Even the gameplay instruction were removed.

So how did I explain the gameplay? Simple. I used Libreoffice Impress to make some presentation slides to visualize the game play frame by frame. Then I played the gameplay audio and used vokoscreen record the voice and the presentation slides. I clicks as I record and play the gameplay audio. After that, I used ffmpeg to trim beginning and the end of the video. Then convert the video format to webm. Here is the demonstration video in Cantonese.

After that, I prepared another powerpoint file. I planned to use the powerpoint before playing the demonstration video.

Everything went well, except that the deadline was very tight. I had to do everything I said above within like 3~4 hours. Then I uploaded my video to the website of Global Game Jam and sent the powerpoint to the staffs. After that, I have deployed my program to the Dinbo Prototype B hardware.

Here is the presentation session(the guy who is presenting in the photo is not me):

Day 3 of Global Game Jam 2017 in Hong Kong Jam site

It didn't went very well when it was my turn. I thought that I could access a presenter's mouse so that I could show my powerpoint with animation. I thought that I could click the powerpoint myself. Unfortunately, the presenter's mouse wasn't working somehow. Then the staff of my jam site just random clicked his mouse, causing the slides shown up earlier than it was supposed to be shown. After that, the staff was trying to click on the gameplay demonstration video link inside the last slide of my powerpoint. But he forgot to enter presentation mode and couldn't click on the link. It looked very bad for the audience. :/

Nevertheless, the gameplay video was found to be funny by many fellow jammers. I enjoyed their laugh and applause at the end, and I earned a certificate of participation. :)

After that, I have introduced my final year project to my fellow jammers. Then I have interviewed some of them about my project. That is helpful for me to improve my final year project. :)

Finally, it was the closing ceremony of the event. As I have expected, I got no award because I'm solo. Apparently the sponsors of our site is reluctant to give out awards to solo teams. :P

Anyway, I have completed the game during the 48 hours. I have proven that libdinbo is working and I have shown my final year project to others. It is a great success compared with the previous jam.

Post-Jam

After the jam, I have talked about the event with people from other jam sites via the Internet. Someone who joined the site of Tokyo University of Technology shared an interesting photo of the site(photo used with permission by the copyright holder of the photo):

Unity Ramen, Salt Flavor with No Bug

Right. That's "Unity Ramen, Salt Flavor with No Bug". Here is the blogpost of the guy who have taken this photo. He leaded the development of the game Super Smash Tokyo in this event.

Apparently the jammers in Tokyo University of Technology site had more fun than we do. Instead of giving out awards to well-performing teams, they had a pizza party! And the award was the game itself that the jammers developed. It is a better match to the sprite of Game Jam.

What Went Well

I'm performing much better in this game jam than the last one. And this year is much more fun for me. Here is what went well:

  • Developed the first telephone game in Global Game Jam in the world! :D
  • Well-practiced before the Jam, making rapid development possible
  • Good time management
  • Being healthy after the jam
  • Completion of game within 48 hours
  • Did some public relation stuffs for my Final Year Project

What Went Wrong

  • Feeling alone. It's kinda sad to see everyone were working together, while I was working alone. Dinbo Prototype B is a part of my individual final year project. I had no choice because if I worked with others, my professor might think that the Dinbo Prototype B was developed by my teammates. :(
  • Less time to socialize with others compared with last jam(because I am solo. I couldn't rotate with others. I was busy working on my game almost all of the time)
  • Presentation screw up - not my fault. But I was still the one who got blamed by the audience :(

Notes to Future Self(May not be true for everyone)

  • Do not jam alone. It feels sad. :(
  • (for Hong Kong site only)Do not use powerpoint for presentation. Just use a video.
  • Perhaps try other jam sites. Global Game Jam is about the experience. It may be interesting to try out the Macau SAR one, the Zhuhai, Shenzhen or the Guangzhou one. And I think I can reach these sites within a few hours.
  • Perhaps try to collaborate with some internet guys from other jam sites. That could be fun. :)

Overall, The Jam of this year went pretty well. And it was a quite memorable experience. :)

Beyond the Game Jam

The Game Jam of this year is very special for me. It has some strategical value. As you may have noticed in my previous blogpost, Dinbo Prototype B will be a successor of the existing telephone system, Dinbo Prototype A. Dinbo Prototype B will be used for the following purposes:

  • Main purpose: Final Year Project
  • Side purpose: Upgrading the whack-a-mole game into a phonesite(you might noticed that the whack-a-mole phone number is taken down for preparation of this upgrade)

This game jam helps improving the code base for Dinbo Prototype B, particularly, the internationalization functionality of the code base was enhanced during the jam. In addition, it's also a good way to test whether the entire system works. If a game can be developed for this system, then it would definitely be possible for me to develop my final year project using the same system.

That says, my mission of Global Game Jam 2017 is accomplished. Now I got to work on my final year project as well as my phonesite. :D

Want to read more? A parallel jammer in Japan had made a blogpost of his game - Super Smash Tokyo


Whack-a-mole over Telephone: Part 2 - Technical Details

Jan. 14, 2017, 6:20 p.m. Behind the Scenes Sysadmin WhackAMole

Hey guys! Finally I got time to blog about the technical details behind the whack-a-mole game.

Click here to view the previous part of this blog post, which is a release announcement of this game.

Hardware

The game is powered by Dinbo Prototype A, which is a telephone system that I developed using SIM900A module with Raspberry Pi 3.

The schematics diagram of the system is shown below:

Schematics

I knew. This system is stupid. Instead of connecting the mic and speaker of SIM900A with Raspberry Pi, GPIO is used for voice communication between them. To make the thing even funnier, an ATtiny13 is used as an ADC.

Anyway, this is just an early prototype. I just wanted to tinker around with the electronic parts that I have. And this design suits the purpose very well. More importantly, this system works. :P

Here is how does the SIM900A and ATtiny13 look like after everything is connected:

Connected circuit

As shown above, the entire system is deployed on a breadboard.

Due to the high current requirement, multiple breadboard wires is required for the power supply of SIM900A. A capacitor is also connected between VCC and GND to smooth the voltage level over time(not shown on the outdated photo above).

Software

Many programs were written for this system. They are ATtiny13 ADC program, serial multiplexer program, voice to socket program, and the whack-a-mole program. All of these programs are written in C.

The ATtiny13 ADC program, as its name suggests, is a program installed on the microcontoller for the purpose of converting the analog voice signal from SIM900A to time-based digital signal. When a "get sample" signal is received by PB1, it will read the analog input of PB3 send a digitized signal via PB4 to Raspberry Pi. This is the first non-Arduino embedded program I have ever developed. I had some fun on reading the specification of ATtiny13. The library avr-libc was used.

The voice to socket program is a program that converts the digitized audio signal received from the ATtiny, then send it to the whack-a-mole program using unix socket file. This is the first real time program I have developed in my life. To achieve real time execution of code, a CPU core is reserved solely for the linux process of this program.

The serial multiplexer allows multiple programs write to the serial interface of SIM900A. It redirects all of the data received from socket to the serial interface. It is adapted from this program found on Stack Overflow.

The Whack-a-mole program works by communicating with the serial multiplexer as well as the voice to socket program. It also detects DTMF tones by processing the audio signal received. Other than that, it is just like other C programs.

The source code of these programs are poorly organized. I still don't have time to package them. There are also some copyright issue on the serial multiplexer because majority of code is taken from the Stack Overflow answer with unspecified license. Therefore, I cannot release these programs too publicly. However, a copy of source code can be requested by email and they are considered on case-by-case basis.

Future Development

For the final year project of my college, the development of Dinbo Prototype B is started, which will be a successor of the current system. Standard analog audio interface will be used(instead of doing the analog<->digital conversion hack using GPIOs). I also plan to solder it on a perfboard.

The library will be written in Python, which is much more flexible than C. It will be mainly designed for non-game telephone systems. However, it should be possible to make a game with it. After the completion of the library, I'll port this game to Dinbo Prototype B. I will update you guys about any news on it.


Behind the Scenes - Poopie: Making Kim Jong Un Cry

Nov. 11, 2015, 4:29 a.m. Behind the Scenes Gamedev Graphic Poopie

Public domain assets pack of the game available at the end of this blogpost!

So I've released a crappy game to the internet. You may be curious about how is the game made. If you are, you probably want to read this blogpost. :3

Note: This game is for entertainment purpose only. No political message intended

Graphic

The graphic is done with Inkscape.

As you may have known, this game is based on my Ludum Dare 33 Entry. Most of the development time are spent on graphical improvement. This section is about the analysis of the graphical changes.

Poopie

Poopie is the main character of the game. The left one is the original Poopie. The right one is the current one.

Old Poopie animation Poopie animation

I've experimented it around for a while before I come up with the current design: Poopie experiments

Compared with the original design, the current design has eyes inclined. The eyes also has eyeball in it.

The shading consists of two elements. First is that in somewhere above the center of the object, a radial gradient is used to make there a bit brighter. This can make the object looks spherical. Second is the bottom of the object is shaded with a darker color. This reproduce the reflection and diffusion property of feather skin.

It would looks wrong without proper shading. For example, the wing on the top-right is shaded as up bright instead of down dark. It causes the wing looks like a piece of plastic or metal or lolipop. Another example is that if you don't shade it, just like the original version of Poopie, then it would looks like a piece of sheet(pun intended).

The shape of the wing is inspired by(a.k.a. stolen from) the number 3 wing from the tutorial here.

Victim

Green Victim animation Worker animation Kim Jong Un animation

We got three victims. You probably expected that. The green clothed victim is weaker. The worker victim is stronger because he got a hard hat. Kim Jong Un is the strongest because he's a leader. And for each victim except Kim, their appearance are different after getting pooped.

Heads

Heads

The first head on the pic is the older version(never released to the public) of the head of green victim. After drawing that, I found that it doesn't look right. Especially the hair. It's just weird. Then I realize that the boundary of the hair shouldn't overlap the one of the head.

To fix it, I scaled the hair to a larger size. In addition of this, I have deformed the head a bit because human head usually isn't a perfect circle.

Non-perfect circle of head

Notice the bottom node. Its left handle is longer so that the head is deformed.

To make the head looks more 3D-ish. I've shaded the following elements of the head:

  • Hair
    • dark shade at the bottom
  • Face
    • lighter in the middle, darker on the sides so that the head looks more spherical
    • dark shade right below the hair and at the bottom of the head.

And that's it for the head of the green worker. A possible improvement is to increase the saturation of the head. It's because it looks too grey.

The worker head is just a recolored variant of green victim. I use black color because the workers are usually exposed under the sun for a long time. Therefore, their skin are usually darker than usual. In addition, using black skin can give the game more diversity. That's why a darker skin is used.

To make it looks even better, I've drawn a hard hat for the worker:

hard hat

Similar to the head, the hard hat is shaded. But the top spherical part of the hat shaded bright on the top instead of shaded dark in the bottom. It's because hard hat is made of plastic. Shading it up bright can make a material looks like plastic.

In the plane part of the hat, it's shaded bright on the top for the same reason. And it's shaded dark at the bottom so that it can shows the thickness of the edge of hat.

For the head of Kim, it's based on the previous version of the game, which is based on this pic.

heads of Kim

The shape is easy. Just embed the pic into Inkscape. Then use path tool to draw the outline of the head. And that's it. The difference between two version is that the new version is shaded. If you observe the pic carefully, you would found that his hair is semi-transparent on the boundary in the new version. Another difference is that Kim is smiling in the new version because it looks more like him when he's smiling.

Body

The shape of the body is a slightly deformed rounded rectangle.

Body

By cloning the deformed shape and using the "Difference" function, the bottom part of the body can be colored differently so that it looks like blue trousers when it is viewed together with his legs.

The shading is just using similar technique I mentioned before. It's gradient and dark shade at the bottom.

Bodies of all three characters

For the body of worker, it's more grey to reassemble the dirts in the construction site. The color of the clothes of Kim is just like the color of his clothes when he appears in the public. And Kim is a bit fatter because he is the boss in the game. Being a bit fat makes him looks stronger.

Combined together

After adding neck, arms and legs and some tedious animation made frame-by-frame, here is how does the victim looks like:

Green Victim animation Worker animation Kim Jong Un animation

To makes it looks better, a variant of victim after being pooped on is also made:

Green Victim got hit animation Worker got hit animation

Maybe it isn't very good. But it's already much better than the original version:

Original victim animation Original Kim Jong Un animation

Police Car

The left one is the original police car, while the right one is the new one.

Original police car animation New police car animation

The shape of the police car is done by referring a few police car images from Google Image Search. For the shading, I just use similar technique as stated above for shading the police car. Except the windows. It has some translucent diagonal lines so that it looks like glares.

The size of the text "POLICE" is reduced because it can increase the area of the paint surface exposed to the viewer. It makes the shading of the paint looks better.

Clouds

Clouds

For both black clouds and white clouds, four variants are drawn. A random white/black cloud graphic is used whenever a in-game cloud is spawned. It's because the game has a lot of clouds. It would looks dull if every single cloud are identical.

It's rather simple to shape the clouds. Just use multiple ellipse and stack them together. Then Union it in Inkscape. Behold a cloud before union operation:

A cloud before union operation

After unioning them, draw a tiny straight line. Then make it a curve by dragging it using path tool. Then make a few variants of it and put it into the cloud. Finally, shade it dark at the bottom. That's how the cloud is made.

Comparing with the original cloud, the new one is much better! :)

Original clouds

Upgrade Buttons

Original upgrade buttons New upgrade buttons

Obviously, the top row is the original upgrade buttons. The bottom row is the new one.

Not much to say about upgrade buttons. The new one just added shading. And I've changed the icon of flying speed upgrade.

Background

Here's the old background image:

Original background image

And here's the new background image:

New background image

The main changes is that in the old one, I used pencil tool to create the outline of the mountain. It looks ugly like mspaint art. That's why I used a deformed rectangle for the mountain in the new one. It looks much better. :)

Win Scene

And finally, the win scene shown after winning the game! The original one comes first:

Original win scene

Behold the new one:

New win scene

The new one is better because it looks more funny. Poopie literally makes Kim a shithead(for entertainment purpose only, no political message intended).

A few graphic enhancement was also done. It includes the text "You Win". The new one is shaded like that it's made of glass. The tear steam also has a little bit shading. And most importantly, the new Kim looks much better than the stick man Kim.

The empty space in the new win scene has a few buttons(twitter, facebook, Sadale.net and replay) in the real game.

And that's it for the Graphic part!

Sound effects

Poop Sounds

The poop sound was made, uh, manually. I voice acted the poop with my mouth xD. And I used Audacity to do the processing like amplification and removing the silent part of the sound.

Audacity screenshot

The poop sounds was recorded by a headset comes with my phone. Maybe I'll buy a better one some day later :P. Four variants of poop sounds were made. Whenever Poopie poops, a random poop sound is played.

Siren

The siren was made with LMMS(I'm proud to have briefly contributed to the development of this project!). It doesn't sound very good. But still, it just works. And it isn't a very important element of the game. Behold screenshot of making siren sound effect.

LMMS screenshot

As you see, the siren sound is made with sfxr synth(I ported sfxr to LMMS!). One track for pitch rise. Another track for pitch drop. Combing them and exporting it as seamless audio. Then I get siren sfx.

Other sound effects

All other sound effects are made with sfxr. It's pretty useful for making 8-bit sound effects. And it's very easy to use. Here's a screenshot of sfxr:

sfxr screenshot

By using the sliders, it's very easy to make the sound effect I want. And that's all about the sound effects!

Programming

The programming of the game is done by using Java programming language with the engine libgdx. The IDE I used was Eclipse. And the build system I used was Gradle.

Libgdx is a pretty good game development engine. The award-winning Android game I made 大團完(Not released to be public) was the first game I used this engine. And it is the preceder the game Fall in Love. One of the very attractive feature of this engine is that it is capable for exporting games to HTML5, iOS as well as desktop(as a .jar executable). That's why I'm using this engine.

Still, one of the flaw of this engine is that its HTML5 support isn't perfect. The main issues that I found was the loading screen. The bright spot in the loading screen was for the logo of libgdx. While I can figure out how to replace the logo, I couldn't figure out how to remove the bright spot at the moment. Another issue is that the sound playback is lazy-loaded. The sound isn't loaded until it's played and it causes delay of sound playback in the first play. There are probably some workaround, tho. I'm just too lazy to find it at the moment :P. Maybe I'll try HaxeFlixel some time later. Mainly because it has better web support(with flash).

Interestingly, programming didn't take much time of the development of the game. The time spent on this game is Graphic > Programming > Sound effects. This is my first project that Graphic takes more times than Programming. It's probably because I decided to dedicate more time on the graphic for this game and hopefully it can make the game looks better.

Special Thanks

  • The developers of the tools I used. It includes Inkscape, LMMS, Audacity, sfxr and libgdx.
  • PuzzlePieces/Kaitlynn/thedandmom/Experiment073 for the tutorial on drawing wings. I found that wing in Google Image Search. It was a repost of Pinterest and it had taken me a while to track down the original source.
  • My cute little sister for providing consultation on graphic. Mainly on quality control of the graphic and shading techniques.
  • The players of the game. There isn't many, tho. :P
  • Anyone who found that the following assets pack useful - Thanks for using it! <3

Assets pack

Here's the assets pack of the game. It's released in public domain. You can do whatever you want with this assets pack. While it isn't a requirement, attribution is appreciated.

Link to assets pack

If you like the game or the assets pack, please follow us in Twitter or like us in Facebook!

Play

You can play it here: HTML5 | Android

Once again, this game is for entertainment purpose only. No political message intended. No real Kim is harmed during the production of this game.


Behind the Scenes - Font Art

Sept. 11, 2015, 4:35 a.m. Behind the Scenes Gamedev Graphic Koloniigo

As you probably know, I have been working on the game Koloniigo recently. To make the game looks better, I decide to make some simple font art for the game. It is my first time doing this. So don't complain if it doesn't looks good. :3

Step 1

The font is made using Inkscape. To make this sort of font, first, create a text. Make some space between each letters by using , and set the stroke color and fill color to undefined by clicking on .

Step 2

Use Alt+D to create a clone of the text

Step 3

Change the color of stroke and fill. Then set the stroke with to 3~10. and set the join and cap to rounded:

Step 4

Either use space bar to create a copy of the colored text, or use Alt+D to create a clone of the undefined color text(displayed as black). Then set the stroke size to 20~30 and change its stroke and fill color.

Step 5

Make gradient for the middle text

Step 6

Create a copy of the text using the same method in step 4. This time set the color to white and set stroke width to 0

Step 7

Set the blur to 3~5, and set opacity 30~60

Step 8

Create yet another copy. This time shear it a bit and set its color to grey.

Step 9

Set the blur to 5~10

Done!

Great. It's now done. Try changing the text and font. The font art will be updated dynamically. :D

Changing the stroke width, color, gradient, etc. gives infinity possibility of the font art generated! :)

Here is the source file