Dragon(fruit) Jam by the Game Dev Network

Last week, I joined a 10-day game jam that ended last September 10. I’m proud of the output despite the time and asset constraints (all assets, including sfx and bgm, must be created within the duration of the jam).

As keeping with my personal rules of doing game jams; I worked with people I have not worked with before and I explored a mechanic that I have not done before.

I worked with Brandon Bittner, a multi-talented artist and co-worker at Autodesk Inc, and with Steve Biggs, a programmer and 3D artist working at Bettis Atomic Power Laboratory. Together, we made…


A resource-management boat-skirmish simulator

You are the captain of your boat and you assign your crew to certain stations. There are 3 types of stations: Sails, Wheel, and Cannons. Putting more crew on the Sails make you move forward faster. Putting more people on the Wheel allow you to turn faster. Putting more people on the Cannons, there are 4 of them, makes them aim and reload faster. Destroying enemy boats drop a survivor which you can rescue (by ramming into them).

You can download and play the game here. Feel free to leave your honest feedback and rate the game (I need the ratings to win this game jam so if you would be so kind. Rating ends on Sept 17. Thank you in advance!)

I have 2 technical experiments here:

  • a dynamic and loosely-coupled resource system
  • procedurally-generated sea

Resource System

For this game, the resource are the crew members that you assign. The classes in this system are as follows:

  • ResourceManager which holds the count of available resources
  • ResourceConsumer which take resource from the manager and can return them
  • ResourceManagerUI which links the ResourceManager to UI elements
  • ResourceConsumerUI which links the ResourceConsumer to UI elements and hotkeys

The consumers should be able to send an OnLevelUp or OnLevelDown message to listeners. I’d prefer to use Unity3D C# SendMessage() functionality to prevent any tight-coupling between the resource system and the gameplay.


I followed the tutorials on procedurally generating a grid here and generating a height map from noise here. For Deckhand, I needed to fulfill the following criteria:

  • Appears to be endless
  • Mimic waves in water

To make it appear endless, I needed the sea to follow the player (which is followed by the camera) but should have the illusion that it’s not moving. Meaning, if there was a lump at (2, 3) of the grid and I moved the grid (1, 1), the lump should now be at (1, 2) of the grid. Unfortunately, simply using Mathf.PerlinNoise(x – pos.x, y – pos.y) didn’t result to what I wanted.

Water Test 1

Water Test 2 – Unscaled

Notice on both Tests above that there’s a certain position in which the sea flattens out. The certain position is when x or y is a whole number.

What I’ve discovered with Mathf.PerlinNoise(x, y) of Unity3D is that it’s periodic. Meaning, (0.5, 0) and (1.5, 0) as parameters return the same value. This actually makes sense because Perlin Noise is naturally periodic. What I didn’t understand was that when x or y approaches 0 or 1, the returned value approaches 0 as well.

I had to play around with the values I supply to the noise generator. The biggest takeaway was that I needed to use the scale of the grid as a factor. See the downloadable example later on.

For the second criteria of mimicking waves, the Red Blob Games tutorial (linked above) demonstrated how to do just that. See the section on Elevation: Frequency and Octaves. Lastly, I added a high-frequency time-based offset to show waves flowing even when the player is stationary. Initially, I didn’t want to put a texture on the sea but it’s very difficult to sea if the player is turning. I created a texture with a few white dots (stars) with clouds, as if reflecting the sky, which gave the player a sense of reference.

Here’s a unity package of the sea:

Procedural Sea
Procedural Sea
1.9 MiB


I’ve successfully met my objectives for this game jam. I am particularly happy about the sea and the resource management. The graphics look awesome, thanks to Steve. I loved the user interface and icons that Brandon put in.

My last minute sound effects were hilarious. For the wood creaking sound (when speeding up or turning) came from a wooden table at home. I nudged it and it made the perfect wood creaking sound. For the others, I mouthed the sound effects. And yes, that was me doing weeeee! and nooooo!

Boss Fight

I do understand that it’s not perfect. Play testing the game with my coworkers revealed that space + 1234 doesn’t make sense. In fact, it’s better to just hit 0 and reassign the crew rather than unassign them one by one. The biggest frustrations came from where’s my crew? when trying to assign crew. I failed to inform the user of the UI on the upper left indicating the health and available crew. The icons of the stations being at the edge of the screen didn’t help make the user make intelligent decisions since their eyes are normally at the center. The suggestion was to make them smaller and float them above the actual cannons that they represent.

I originally wanted to let go of this project but Brandon suggested making it into a mobile space game. Think of Artemis for mobile. What do you think?


My 5th GGJ!

Another Global Game Jam completed! Woohoo! Congrats to all who participated and successfully completed a working prototype in just 48 hours! Whether you worked solo, in a team of strangers, or a team you’ve worked with before; the experience gives valuable lessons that would hopefully push you closer to that game dev career you’ve always dreamed of. Again, CONGRATULATIONS to ALL!

This is my 3rd GGJ location – from Manila to Seattle and, now, Pittsburgh. This one is hosted by Pittsburgh IGDA (PIGDA). Every game jam inspires me to leave my comfort zone in order to experiment and explore. It is invigorating to be connected with passionate Game Developers of different professions, varying age groups, interesting backgrounds, and diverse interests.

For those who missed it, the keynote can be found here. The end of the video also shows the theme: WAVES! I like this theme. It’s very open – a lot of possibilities and interpretations. You can basically make any game and insert waves somehow.

My Team

Keeping my primary objective of working with people I’ve never worked with before; I teamed up with 4 people I met at the jam to form Team Surfer Babies!

Team Surfer Babies

(left to right) Sean, Addie, Francisco, Richard, and me

Together, we created Tiki Vs The Surfers! It’s a defense game where you use dolphins, mermaids, and whales to fend off surfers who want to defile your peaceful island!

Richard and Sean are the 2 amazing artists. Sean made the surfers (baby and tourist) and the Tiki while Richard made the weapons (dolphin, mermaid, whale), background, and UI. They collaborated to make the intro slideshow which explained why the Tiki was upset with the surfers. Addie was our talented musician and foley artist. She created every audio in the game. She even voice-acted for the dolphin and whale! Francisco and Francis (me) were the programmers implementing the different behaviors and integrating everyone’s work.

Here are some more pictures of the event.

Nova Place, venue for Pittsburgh GGJ 17

The cake was not a lie!

Richard playtesting the game

Most hardcore electric guitar ever! c/o Addie the Musician/Foley Artist

See my next post to read about my technical learnings from our game.


Are arrays pointers?

New C/C++ programmers often have this confusion that all arrays are pointers. Well… they’re kinda, sorta, but not really. Let’s consider the following code:

Try compiling the code snippets using Coding Ground.

The pointer p points to the first character of arr. Remember that the index operator ([]) is automatically converted to addition then dereference.

Note: 2[p] would be evaluated to *(2 + p) giving us the same result as p[2]. It’s bad practice to use that form even if it works.

And dereferencing arr is similar to getting the first element

So when do arrays and pointers differ?

Continue reading


Mandala Design by Programming

Last school year, I can confidently say that many of my students enjoyed this one lab exercise we did in class. The exercise was to create circular designs using lines with C++. It may sound weird to find students enjoying a combination of programming and trigonometry to create digital math art but it did happen. When I uploaded their submissions in Facebook, I got a couple of private messages from former students complaining why they didn’t have those. And there were a few who even got curious enough to ask me to teach them. Unfortunately, the exercise was a cumulative effort from different activities and I couldn’t teach it in just one sitting. Since then, I put “Mandala Design by Programming” as one of my to-do video lectures.

And here it is…

The CPNG header and source files can be downloaded here. The PNG encoder could be acquired here. Make sure to get the lodepng.cpp and lodepng.h.

In the video, I used XCode to compile. In case you’re compiling by terminal, include the following flags: -ansi -pedantic -Wall -Wextra -O3. For example, if your source code is main.cpp and you wish the executable to be called main.exe, you can compile by

Ideally, this video is for fellow programming teachers to inculcate the value of loops. It can also be a side exercise where students would manipulate lines and colors instead of the usual text or number processing. I think, this can also be valuable for Math teachers teaching trigonometry and help the students appreciate sine and cosine.

If you encountered issues while creating your own Mandala Design, e-mail me at francis dot serina at gmail dot com. Also, I’d like to see your own mandala designs so please post in the comments below the results of your own artwork 😀


Token from TechSmith

Last December, I won the TechSmith ScreenChamp Awards 2013. With that, I was interviewed and showed up in one of their segments, 48 in 24. It was fun because it was my first time and I got to share my experiences with creating video lectures. I actually forgot about the interview until today. It turns out that TechSmith sent a token of appreciation for the interview and it arrived today 🙂

Drinking Cup

Back of the Drinking Cup with the different TechSmith products

Thanks and Drinking Cup

Thank You card and Drinking Cup

Thank You card

Thank You Card signed by the 48in24 Crew

With that, I immediately searched for the interview and I found it! Feel free to watch and heckle me. The skype video call seemed low quality and the video is out of sync. Oh well, bare with me.

Ugh… there’s an electric fan at the back. Makes me look poor. And my friends pointed out the hanger on the closet door. Eeep! Don’t even ask what I was wearing down there. Ahahaha!

And darn, they cut out my favorite part. They asked me “If you were to put the experience into one sentence, what would it be?” and I said “It was worth the shame” 😀


Prizes from TechSmith

As some of you know, I joined ScreenChamp Awards 2013 last December and emerged People’s Choice Award. My prizes have arrived today in 3 boxes.

3 boxes from TechSmith

It left Amazon last Jan 20 and arrived in the Philippines on the 24th. It’s been stuck in Pasay City due to a clearance delay for a week. But FedEx got it through and it arrived at my doorstep yesterday. My mom, who received it, was excited herself to see what’s inside. She helped me open the boxes and take pictures of the contents.

box1 from TechSmith

And in box #1 is a foldable reversible pop out background panel! I saw the pictures in Amazon but I didn’t expect them to be this big. That’s my mom behind the panel by the way 🙂

box2 from TechSmith

And in box #2 was my ScreenChamp Trophy 🙂 That’s some beautiful trophy. It’s the first time that I saw this and I wasn’t sure what it was when I took it out the box. I’m quickly running out of space in my room. I have no idea where to put this…

And lastly…

box3 from TechSmith

Box #3 contained the prizes that makes ScreenChamp worth fighting for. I got a red The Forge T-shirt, Canon T5i DSLR + EF 50mm lens, Zoom H4 Audio Recorder, Shure Wireless Lavalier, 4 The Forge Stickers, 2 32GB SDHC Memory Cards, Moleskin Notebook, and Staedtler pens.

I already got my other prize of 250USD Gift Certificate to Premium Beat through an e-mail.

To all those who liked my video, a big THANK YOU! This wouldn’t be a success without you!


Targeting Multiple Aspect Ratios using Unity3D

Unity3D GUI is hell. Add multiple aspect ratios and you’d pretty much be pulling your hair off.

For those developers who are new to tackling multiple aspect ratios; here’s a project that you could test out.

182.0 KiB

The main issue with different aspect ratios (and screen resolutions) is that they “see” things differently. You could solve this by either using Pillarbox/Letterboxing or Stretching. Pillarbox/Letterboxing is totally out of the question. Nobody likes losing screen real estate. Googling around and you’ll see suggestions of stretching the GUI by manipulating the GUI.matrix via Matrix4x4.SetTRS() but stretching is not cool.

For 3D games, this is barely an issue. For 2D games, yes it is. It’s also an annoyance to the develop User Interfaces for different aspect ratios. Then I stumbled upon How to support 3 iOS aspect ratios in Unity3D which showed how to use a single camera to be deployed in multiple devices with different aspect ratios. The solution: change the orthographic size of the camera! However, there were some discrepancies with the exact pixel values which led me to create the test project above. Nigel also mentioned to use the orthographic size for the UI.

As for the User Interface, to hell with Unity3D GUI since you can’t even see it while you’re coding. Sprites are way better. It makes the world a better place for game developers. Combined with a dedicated camera to draw the user interface from sprites and Text Mesh for dynamic text, we can actually replace most of the form elements in GUI. 

I ran my project on an iPhone 5s, iPhone 3GS and iPad 3 and the results are as follows.

iPhone 5siPhone 5s


iPad 3

iPhone 3gs

iPhone 3GS (with a different font size)

What does this mean? Keep your game elements inside the green box and it will be seen in any of the 3 aspect ratios. Then for your UI, use sprites and see how I aligned those orange boxes to the top/bottom edges of the screen. What about the extra space on wider aspect ratios, up to you actually.


MGJ2014 Interview at ANC

This afternoon, I was interviewed by ABS-CBN News Channel regarding the Manila Game Jam 2014!

Check it out here!

Ack, there’s a reason why I prefer to be behind the camera.

Nonetheless, MGJ2014 Orientation in less than 11 hours! MGJ2014 in 6 days! Talk about anxiety attacks


ScreenChamp Awards 2013

I recently joined the ScreenChamp Awards 2013, a contest on screen casting sponsored by TechSmith.

I’m testing my video lecture making powers and see if I can grab that People’s Choice award. I’m very happy to have been selected as a finalist! I still consider myself new to screen casting and video lecture making.

I actually submitted two videos. The first one, Lecture on Structs and Pointers in C++, did not make the finals but the second one did.  As for the topic, well, it’s about… Love 😀 Ahaha! Yes I know, the SSB (single-since-birth) programmer talks about love. Now before you think about romance, I want to clarify that my talk is about the 5 Love Languages written by… you know what… go watch the video here. Don’t forget to up vote and share it 😀

I originally wanted to give my whole 1-hour talk about the 5 Love Languages into this video lecture but I had little time to complete it. Sadly, I had to settle with just the Introduction, which is a teaser to give my audience reasons to stay and listen. I can actually give this talk without the need for normal presentation equipment like projectors and laptops. In fact, I have given this talk multiple times to some of my former students or friends over dinner at home, during lunch in the mall, and in the living area during sleepovers.

The challenge in making this video was that I had to make it interesting without knowing who I am. I think the reason why people listen to my talks is because they know me. But what if I gave this talk to complete strangers, people I’ve never conversed with before, how would they react? Also, since I’m targeting older teens, I need to make it appealing other than just showing myself. Thus, I decided to make use of drawings and hand writings. I enlisted the help of a former student who is great with art, Quina Baterna. I told her my concept and she gave me drawings of the wife, husband, logos for each love language, etc. We  recorded her, drawing these icons on a white board using colored pens.


Quina’s Drawings

Unfortunately, I encountered problems when I started editing the videos. It turns out, I need a LOT more art to convey my interpretations. I’m no artist, hence, I searched for free vector art online. I found some but I lacked a lot more. Being pressed for time, I resorted to the unthinkable – draw them myself. Yes, that’s right. I drew. I couldn’t create a video of me drawing since I make so many mistakes and it takes me forever to make one. Instead, I used Inkscape to create my black and white, stick figures.

I tried combining Quina’s drawings with the vector art but they don’t seem to work out well. I made a decision to redraw all of Quina’s art using Inkscape. Using this technique prevented me from presenting the art being drawn on screen. Instead, I had the drawings animated by flying them in, scaling them, translating them, and changing their opacity.


My Vector Drawings

It took me a while to complete the video but I made it a couple of hours before the deadline. My friends commented that the video is such a cliff hanger or bitin. I will continue the video and include my whole talk which includes what the 5 Love Languages are and how to find out yours as well as other people’s Primary Love Language. For now, up vote my video and help me win 😀

Again, the video can be found here!

CREDITS to the following:

Free Vector Icons from http://www.endlessicons.com and http://www.clipartsfree.net

“Easy Lemon”, “Deliberate Thought” Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0

I am not nor am I related to Dr Gary Chapman, Northfield Publishing or Moody Publishers.

Camtasia and SnagIt from TechSmith


No Projector? No Problem! Part 2

Yesterday, I started teaching using VNC to share my screen to my students. Unfortunately, I still had to draw on the whiteboard to emphasise on some points of the lecture. I used the whiteboard yesterday but today is different.

Successfully demonstrating code and lecture slides through their screens, I extended my tools by adding SmoothDraw – a free drawing tool that works very well with tablets. SmoothDraw is the recommended software by KhanAcademy in Windows. For Mac, you have the free Autodesk Sketchbook Express. Both of which were designed for tablets and drawing.

With my students viewing my screen, I put Notepad++ on the right side with SmoothDraw on the left and started drawing doubly linked lists while showing the code. On their computers, they were able to follow while they try to type the code themselves. I think my experiment was successful.

Aside from this, the students were exposed to tablets. I brought my Wacom Bamboo Pen & Touch to school. The normally noisy kids were curious and wanted to draw using the tablet. The first thing that they wrote was their name or signature. How vain 🙂

I think this also gives me the opportunity to be more comfortable with tablets so I can perhaps improve my “drawing” skills. Haha! What a joke!