My first semester in DigiPen has just ended and I get to make tutorials again! One of my classes was Game Engine Fundamentals and I used SDL2 to create my game engine. SDL2 is a cross-platform C library to create games on. My favorite tutorial to learn SDL is Lazy Foo. He gives a detailed tutorial in multiple aspects of the library. However, setting up on Mac is not yet done. Hence, I have created this post.
Jump Tables and Jump Maps
As a continuation to the discussion on Purpose of Pointers to Functions, let’s step up the complexity and have an array of function pointers. This time, we’ll use C++ because we’ll need the inheritance for demonstration 🙂
Array of Callbacks
What’s the purpose of having an array of function pointers?
Purpose of Pointers to Functions
In a previous post, I mentioned something about pointers to functions. Why would anyone need pointers to functions? In C/C++, they’re called function pointers. They also exist in other languages but the implementations are slightly different. In C#, they’re called delegates. Many OOP languages have interfaces with overrideable methods. In others, there’s the concept of lambda (anonymous) functions.
One common application of function pointers are Event Handlers. Event handlers are quite straight forward. Assign a function as an event handler and when that event is triggered, execute the corresponding function. See W3Schools for more info on JavaScript Event Handling. These functions are referred to as Callbacks.
In C#, they allow adding/subtracting of delegates. Adding a delegate simply adds that method to the list of methods that will be executed, one by one in the order they were added, when the event is triggered. Subtracting removes that method from the list. This allows having multiple listeners to a single event. See MSDN for more information.
What’s the point of pointers to functions?
Determining if an Integer is a power of 2
Using C/C++, what is the fastest way to determine if an integer is a power of 2?
|
1 2 3 4 5 6 7 |
int x = /* some value */; if (/* is x a power of 2 ?*/) { /* x is a power of 2 */ } else { /* x is not a power of 2 */ } |
C Operator Precedence
Given the statement below, what is pf?
|
1 |
int (*(*pf)[10][5])(float, double); |
- a pointer to an array of 10 arrays of 5 pointers to functions, with float and double parameters, that return an int
- an array of 10 arrays of 5 pointers to pointers to functions, with float and double parameters, that return an int
- a pointer to a pointer to an array of 10 arrays of 5 functions, with float and double parameters, that return an int
- an array of 10 arrays of pointers to an array of 5 pointers to functions, with float and double parameters, that return an int
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 [wpfilebase tag=fileurl id=6 linktext=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
|
1 |
g++ cpng.cpp lodepng.cpp main.cpp -ansi -pedantic -Wall -Wextra -O3 -o main.exe |
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 🙂

Back of the Drinking Cup with the different TechSmith products

Thank You card and Drinking Cup

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” 😀
Games made by teens!
Another batch of Video Game Development Elective students from Philippine Science High School Main Campus will graduate this end of March. As a final requirement, they need to upload their games in Kongregate and here they are. Click on the image to play their games.
Change was suppose to be a Chemistry-based game that ended up being a Pretentious Game clone. Go get emo with this one 😀
Try to stay alive in this somewhat thriller survival game against creepy polygons without getting Cornered
This is a difficult physics-based puzzle game using simple 3D objects. I hope your patience doesn’t easily thin out with Knockback
Rolling Rumble was the most popular game during the National Science Fair exhibit. Go and push your friends around. I know you want to.
Synchonicity Alpha will annoy you. Enough said.
Need some brain exercise? Spectrum will make your head twist and turn.
Sparkshot is a tower-defense game using electricity and well… towers 😀
This is the most controversial game ever! Get down with the sickness with AIDS Infector
And what’s a game exhibit without a Flappy Bird clone. Go get some candies and don’t let the Balloony pop
Who ever said binary ain’t fun? They obviously haven’t played Logic Invaders
How long can you last in this fancy survival game – Shooter
I hope you guys have the patience of figuring out the controls of their games 😀 I will emphasize on integrating tutorial levels and making the controls more intuitive in my next game development classes.
Oh and feel free to rate and comment their games in Kongregate. I told them to expect the onslaught of the world once their games are out.
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.

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.

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 🙂

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…

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.
[wpfilebase tag=file id=3 /]
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 5s

iPad 3

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.











