01/23/17

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.

12/29/14

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

05/15/14

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 😀

05/2/14

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” 😀

02/4/14

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!

02/2/14

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.

MultiAspectRatioTest
MultiAspectRatioTest
MultiAspectRatioTest.zip
182.0 KiB
193 Downloads
Details

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

iPad3

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.

01/17/14

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

11/23/13

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

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.

Vector-Art

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
http://creativecommons.org/licenses/b…

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

Camtasia and SnagIt from TechSmith

10/3/13

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!

10/3/13

No Projector? No Problem!

It’s been quite a long time since we’ve had a dedicated working projector for the Viper Lab (classroom where I’m teaching). We’ve already asked for additional projectors but due to the high demand, it cannot be met. We’ve resorted to asking the community through the foundation at AghamRoad.ph. Unfortunately, it’s moving slowly despite being shared in Facebook more than a handful of times already.

I’m teaching Data Structures and Algorithms and go in-depth even to the memory level and pointers when I discuss. I use a lot of code and diagrams to show my point. Unfortunately, it gets tiring to keep on writing board-full of diagrams every meeting. This is where the advantage of the online lecture slides and video lectures come in. However, even with lecture slides, if you don’t have a projector, it’s not as easy to transfer the concepts. The video lectures are meant to supplement the lectures in class for those people who want a repeat of the lecture. They weren’t designed to be the primary method for teaching.

Being desperate, I turned to a familiar technology that I’ve encountered in my previous work. It’s time to work with VNC again. VNC, Virtual Network Computing, is a network protocol for screen sharing or remote desktop. With it, you can control another computer. For my class, I didn’t need full control. I just needed a way to project my screen unto theirs. Also, since we’re low in budget, I was looking for a free portable VNC Server and Client (Viewer). Last time I checked, RealVNC had a price tag and it still has for the server but the client is free. Luckily, I found the free Ultra VNC.

Yesterday, I configured my Windows 7 on my MacBook Pro to run Ultra VNC server. I asked my students to download the RealVNC viewer from my computer (since I have apache running as well). Since we’re all using portable versions, no installation was necessary. They simply unzipped and ran the executable and connected to my laptop via VNC. At first, it wasn’t working right and the clients are all getting blank screens. I closed my VNC server multiple times and it didn’t seem to fix it. I went to the task manager to see a few lingering VNC processes running. Manually ending these instances, I ran the server again and asked everyone to connect. When I heard a few people gasp in amazement, I knew it was working.

“This is cool!”, “How did you do this?”, “It’s amazing”, “Sir, can you see my screen as well?” were the responses of the students. I told them to scale to fit their windows since my screen resolution is quite high and they only see almost half of the screen. With this at hand, I continued my lectures on Linked Lists. I can show them the lecture slide then switch to Notepad++ and Cygwin to demonstrate. I checked my students’ screens from time to time and I noticed that the mouse doesn’t show. I had to keep on highlighting texts in order for them to follow me while I talk.

However, since the lecture was about linked lists, I still needed to draw. The students were cheering “Sir, use Paint!” And I refused to give in to their demands and decided to still use the traditional method of writing on the board – which leads me to another experiment for tomorrow. Since I need to draw diagrams (lots of it), I will bring my tablet tomorrow and see if I could draw everything on screen (using SmoothDraw). Aside from that, I’ll try to record my screen using CamStudio.

Despite all these attempts, the whiteboard is still necessary since the wide space will allow me to write a ton of information and the students can easily go back by looking at the previous writings.