LÖVE

I was once tried out this funky 2D Game Engine, LÖVE.
The community are a bunch of fun-loving people, and visiting the forums would make you feel like laughing.
Anyway, I stopped working on it, but I recently received a message from the admin:

Hello there, LÖVER!

As you might have noticed, the LÖVE website was recently hijacked by evil
aliens, and thus the website went down.

But now we’ve cleared out every single one of those slimy bastards and the
site is back up and running, and better looking than ever (that slime sure
was shiny!)

So come on back and make some LÖVE! We’re waiting!

Wahahaha!
Anyway, here’s the link to their website: http://love2d.org/

Let it crash!

Just want to share a simple debuggin practice that I picked up while working at Envisage Reality.
Consider the following snippet:

#include <iostream>
#include "Dummy.h"
using namespace std;
void main()
{
	cout << "Hello World!" << endl;
	Dummy * dumdum = 0;
	dumdum->Render();
}

Now the application is bound to crash, because dumdum is not yet initialized. So we do this:

Dummy * dumdum = 0;
if (dumdum)
{
	dumdum->Render();
}

The solution looks valid doesn’t it?

Let’s look at what’s inside Render():

void Dummy::Render()
{
	if (mGraphicsObject)
		cout << "Render: " << mGraphicsObject->GetData() << endl;
}

Render uses data from mGraphicsObject, which may cause the application to crash if it is not initialized. Thus, we also protect it with an "if" statement. You can liken this example to game where Dummy is an Entity which has graphical Data, and it Renders that Data. In our case, our graphical data is just text.

So the "if" statement protection seems like a good solution to prevent your game from crashing, doesn't it?

Wrong!

Imagine you have 500 Dummy objects in your world, and they load different graphical data. Now suppose 10 of those objects are not rendering, you're going to have a difficult time debugging.

#1) you probably won't even notice those 10 missing, as there are hundreds of objects running about in the scene. And the game runs fine. So it seems like there isn't any problem!

If you removed all those "safety if statements", your application would have crashed, and you would definitely know about the problem.

#2) Let's say you realized 10 of them are missing 2 weeks later. Now it's gonna take some time to debug, especially if your game is 80% done and the code gets really complex. And you're doing "if" protection statements everywhere:

if (dumdum)
{
	dumdum->Render();
}

It could be that the 10 Dummys weren't initialized.

void Dummy::Render()
{
	if (mGraphicsObject)
		cout << "Render: " << mGraphicsObject->GetData() << endl;
}

Maybe the code to initialize "mGraphicsObject" has a problem, and for some weird reason, 10 of those are not initialized.

std::string				GetData()
{
	if (mData)
		return *mData;
	return "";
}

Okay, GetData() is return a blank string, but is it because mData is not initialized or mData is returning a blank string?

Perhaps 10 of them are specified to load a "BlueDummy.txt" file, and there was a problem with the loading.

void GraphicsObject::Load(string path)
{
	string loaded_data = fileloader->LoadFile(path.c_str());
	if (loaded_data== null)
		return;

	// Cut out 8 characters, starting from the 10th char in the string.
	mData = loaded_data.substr(10, 8);
}

Now did the file fail to load? Or is the loaded_data only 10 characters long, such that my substr() removed all the characters?

After a long check, you realize that "BlueDummy.txt" is missing. And this is just a simple example - what would happen if you're making a real game? You'll probably wouldn't realize that there is a problem until much later, as explained in #1.

It would save a lot of debugging effort and weird problems, if you'll just Let It Crash.

Armor Valley

Hey all, I’ve added a new page titled “My Games”, which is my portfolio for the games I’ve worked on. Right now there’s only Armor Valley, a 3rd Person Aircraft Shooter and Real-Time Strategy hybrid game. Do check it out!

Images with Rounded Corners using CSS

I managed to create rounded corners for images using CSS, thanks to the tutorial at http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/.

The key concept is to overlay 4 white and rounded images at each corner of the image. (Assuming that your website’s background color is white, of course)

An Image with Sharp Corners

Overlay Round & White Corners

Image on a white background

To do this, you will need a DIV wrapper around the image. You’ll also need 4 inner DIVs for each corner – we’ll be using the background property to display our corner image.

You may download the corner images here.

This is the CSS:

.image_wrapper /* DIV wrapper around the image */
{
	position: relative;
	float: left;
}

.image_wrapper div /* set all the inner DIVs */
{
	position: absolute;
	width: 7px;
	height: 7px;
}

.image_wrapper div.topleft
{
	background: transparent url(img/corners/topleft.png) scroll top left no-repeat;
	left: 0;
	top: 0;
}

.image_wrapper div.topright
{
	background: transparent url(img/corners/topright.png) scroll top right no-repeat;
	right: 0;
	top: 0;
}

.image_wrapper div.bottomleft
{
	background: transparent url(img/corners/bottomleft.png) scroll bottom left no-repeat;
	left: 0;
	bottom: 0;
}

.image_wrapper div.bottomright
{
	background: transparent url(img/corners/bottomright.png) scroll bottom right no-repeat;
	right: 0;
	bottom: 0;
}

Here’s the code to apply it to an image:

<div class="image_wrapper">
	<img src="img/image.jpg" />
	<div class="topleft"></div>
	<div class="topright"></div>
	<div class="bottomleft"></div>
	<div class="bottomright"></div>
</div>

But its retarded to copy and paste these DIV tags for every image you have on your website. You can do the Javascript method in the original tutorial, but I prefer using PHP to generate the image code.

<?php
function printImage($src)
{
	echo '<div class="image_wrapper">';
	echo '<img src="' . $src .'" />';
	echo '<div class="topleft"></div>';
	echo '<div class="topright"></div>';
	echo '<div class="bottomleft"></div>';
	echo '<div class="bottomright"></div>';
	echo '</div>';
}
?>

Important: if you wish to apply margin/padding on your image do not directly apply it to the image – it will screw the rounded corners positions. Apply the margin/padding on the ‘.image_wrapper’ class instead.

.image_wrapper /* Correct */
{
	position: relative;
	float: left;
	margin: 10px;
}

img /* Wrong */
{
	margin: 10px;
}

Click here to view the sample
or
Click here to download the whole project

Hope you learnt something from this post :)

Blog Inauguration

Welcome to my new blog!

This blog is solely dedicated to things pertaining to coding, games, web design and the such. It is also to keep track of the stuff/projects I’ll be doing. Thanks to Bryan for allowing me to use his server!

I’ll try to update regularly, so do visit frequently! :D

Till next time!