CLICK HERE TO START PLAYING OUR GAME!

So what makes this game so different you ask? Well the game is completely browser-based. That’s right, a full 3D environment third person shooting game that is playable through your web browser!

It’s a simple game of Marines vs. Insurgents based in a mideast town (for the BETA at least, we have three total levels for full release of the video game).

We used the Unity3d game engine to develop this game, and although our game is still in a official “BETA” title, I felt it was finally time to share this awesome work with the rest of my readers and the world.

In order to play Combat Extreme (the 3d third-person shooter) on Facebook through your web browser, you must have the unity3d web player installed. The web player is designed specifically to render geometry and post process effects directly through ones browsers (Yes even IE).

Combat Extreme (the 3d third-person shooter) is indeed exclusive to facebook.com right now and may or may not be opened to further social gaming markets. We really wanted to create a seamless experience for our UX, and insisting the user create a new account with an email address conformation + allow the app on their page was asking way too much. Thus, we eliminated the biggest step and allow our users to login to Combat Extreme (the 3d third-person shooter game) through their facebook account.

CLICK HERE TO START PLAYING OUR GAME!

Click to see demo of Business Card Builder

The Markup

<h3>Realtime Business Card Builder</h3>
<div class="preview">
    <img src="scripts/server-side.php" />
</div>

Notice how the preview image’s “src” attribute is not pointing to a graphical file, but rather a server side php script? This is important because although we could use PHP to render new images out on our web server on every change, its best to view a single rendering through a static image element.

The client side code

By simply building up a query string that contains the values of our form fields, we can get a realtime performance. The first thing we want to create is a variable named “base” that will contain our preview image’s “src” orignal attribute value.

var base = $(".preview img").attr("src");

We make the “base” variable so that we may reference to the original URL of the server side file later on.

Next we want to gather our image from server side when the document is done loading for the first time. By utilizing jQuery’s serialize we will gather all our form’s fields and their values and request our image from php like so:

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

As you can see, we set our image’s source attribute to be that of our base url, plus a serialized string of all our form’s input names and values.

Finally we want to setup our keyup event so as the user types into any of our form inputs, a “change request” for our image to be updated will be sent to php.

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

//KEYUP EVENT AND NEW IMAGE GATHER
$("input,textarea").keyup(function(){
	$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
});

Notice how within our new keyup event we are basicly repeating our previous step of gather our image the first time? This is how we both gather changes the user has made, and request a new version of our image at the same time.

The server side code

Now lets take a look at our PHP image rendering file. The first thing we want to do in this file is to declare what format of image should it be rendering:

header ("Content-type: image/png");

We pass a content type of “image/png” to our files header so that we can have alpha transparency ability that is natural to png image formats.

Next we need to gather every possible value that is being sent to this file via our URI string. We do this by creating new variables and setting their value to each URI string value, like so:

$companyName = $_GET["companyName"];
$companySlogan = $_GET["companySlogan"];
$fullName = $_GET["fullName"];
$jobTitle = $_GET["jobTitle"];
$businessAddress = $_GET["businessAddress"];
$businessAddress = str_replace("\\n","\n",$businessAddress);
$businessAddress = str_replace("\\","",$businessAddress);
$phoneOne = $_GET["phoneOne"];
$phoneTwo = $_GET["phoneTwo"];
$emailAddress = $_GET["emailAddress"];
$siteUrl = $_GET["siteUrl"];

Notice how on some of the value gatherings I am using a str_replace() function? Again, we are replacing any instance of our hard return character (\\n) into an actual hard return upon rending our image and copy.

Next we are going to gather a temp image we will use to create the actual image we render on dynamically, like so:

$handle = $img = imagecreatefrompng( 'template.png' );

(‘template.png’ is a image file that lives on your server.)

Now we need to setup a few more variables that will come in handy when rendering our results:

$brown = ImageColorAllocate ($handle, 84, 48, 26);
$lightBrown = ImageColorAllocate ($handle, 145, 116, 94);
$white = ImageColorAllocate ($handle, 255, 255, 255);
$peach = ImageColorAllocate ($handle, 238, 222, 200);

We setup different font colors by making use of the “ImageColorAllocate()” PHP GD function and assigning it to our new “template.png” image ($handle). The array of numbers that proceeds “$handle” are RGB color values.

Now that we have everything (variable wise) setup to render our image, we need to place and setup our text in our image. Here is an example of how to do just that.

//company name
ImageTTFText ($handle, 18, 0, 20, 35, $brown, "timesbd.TTF", $companyName);

By using the “ImageTTFText()” PHP GD function, we can setup an array of parameters to place and render our copy in our image.
First, we point to our “template.png” image ($handle) want to place this copy onto. Next is an array of numerical values and they are in order as follows:

• Font Size of Copy
• Rotation of Copy
• X Position to Image’s size
• Y Position to Image’s size

After the “size, rotation and position” values, we set our desired font color via our pre-defined color variables. Next we can choose to use a custom font file that live along side this php file. Last is the copy value it’s self that we gathered from our URI string and turned into variables.

The very last part to rending our image with PHP GD, is to do some clean up work like so:

imagealphablending( $handle, false );
imagesavealpha( $handle, true );
ImagePng ($handle);
imagedestroy( $handle );

We finish off our file format of “.png” and its transparency, and lastly destroy the image when completed to free up server memory.

(Some may notice that the web address copy is rendered from an align of center on out, I show this example in the demo download.)

That’s it everyone! With a little JavaScript and PHP GD you can do some really cool stuff, and I hope to see some great examples soon.

~ Download a copy of the demo

It would be much faster to simply include this element or rather custom block globally to your Magento store via your layout XML files, and have a condition in this block’s .phtml file that excluded any output on category page.

This is a very simple method that simply looks to our Mage registry and asks the question “Is the current page indeed a current category page or not?”.

php if(!Mage::registry('current_category')):?>
//OUTPUT THE GLOBAL ELEMENTS CODE ON NONE-CATEGORY PAGES
php endif; ?>

Simple as that, of course the correct way would be to include this block globally via your XML layout files, and then remove it via XML (Custom Layout Update) in the backend->catalog->manage categories “Custom Design” tab for each category.

But this method might be faster.

Devin R. Olsen

With that said the, the biggest scenario for this need would be to determine the products parent category in order to perform something unique to the product’s page while viewing product’s page through one category or another.

This is a very simple method that assumes you have the product of question loaded up or rather, you are at the product level of your store in order to obtain some information about the products parent categories.

So here we go.

First you need to gather all the category id’s this product belongs to, so to do this we simply make a new variable called “$catIds” and gather all the category id’s like so:

<?php
$catIds = $_product->getCategoryIds();
?>

Next we simply need to point to the first category in this new “$catIds” variable array like so:

(Remembere the number 0 is = 1 or rather first in an array.)

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId = $catIds[0];
?>

So now that we have gathered our relative parent category id, we can begin to load this category up in order to gather information from it and ultimately create a unique condition for our products page:

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId  = $catIds[0];
$category = Mage::getModel("catalog/category")->load($relativeCatId);
?>

Now that we have loaded up our relative parent category into this new variable called “$category” we can then say, “Grab the category’s name, or even attributes to create some kind of condition.”, like so:

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId   = $catIds[0];
$category =  Mage::getModel("catalog/category")->load($relativeCatId);
?>

<?php if($category->getName()  == "Category One"): ?>
//DO THIS
<?php elseif($category->getName()  == "Category Two"):?>
//DO THAT
<?php endif;?>

And that’s it!

So to recap, all we did was while under a product level, gathered all its parent category id’s into the variable “$catIds”. Once all category id’s we captured, we proceeded to highlight or rather grabbed our first category’s id from the array (0) and used it to load the category up. Once this category was loaded, we could access its attributes or information. We used the category’s information to build a condition and perform something unique to the product page depending on if its being viewed through one category or a completely different category.

Thanks Everyone!

Devin R. Olsen

• Text Field
• Text Area
• Date
• Yes/No
• Multiple Select
• Dropdown
• Price
• Gallery
• Media Image
• Fixed Product Tax

Because there are different types of attributes there are also different ways of obtaining an attributes value. If we were to create a new custom attribute called “theme_color” and the attribute was of a “Text Field” type, we could do something like the following at a product level (meaning a product is loaded) to obtain its value.

<?php
echo $_product->getThemeColor();
?>

$_product is the product of question we have loaded up and ready to work with, and we use “getThemeColor();” because our attribute was named “theme_color”. It’s important to realize that when calling out the value of an attribute with this method, we start with “get” and then capitalize the first letter of each word that is divided by a “_”.

Now this method would give us the value of a simple “Text Field” attribute but what if the attribute was a “Dropdown or a Multiple Select” type? Well if you try to use this “getYourAttributesName()” method on a none “Text Field” or “Textarea” attribute type you will most likely get nothing.

So how do we obtain the value of a “Dropdown or a Multiple Select” attribute type you ask? Well some would argue that you would do so via this method:

<?php
echo $_product->getAttributeText('theme_color');
?>

However, what this would do is return an array of the “Dropdown or Multiple Select” options instead of the value of the selected option you would have set. There is another way to obtain these types of attributes selected value and it looks like this:

<?php
$attributes = $_product->getAttributes();
$themeColor = $attributes['theme_color']->getFrontend()->getValue($_product);
echo $themeColor;
?>

With this method we are simply creating a new variable called “$attributes” and pointing to our “$_product” to then using the “getAttributes()” function to gather all the attributes of this product.

Once we have all the product’s attributes inside of the “$attributes” variable, we make another new variable called “$themeColor”. “$themeColor” then assigns its self to our “$attributes” array that we in turn call out our custom attribute [‘theme_color’].

Once we have pointed to the custom attribute in the “$attributes” array, we simply run through the front end via the function “getFrontend()” and then pull the value down via “getValue($_product)”.

If we then echo our “$themeColor” you should get the value of your custom Drop Down or Multiple Select attribute to do what you will with it.

So to recap:

<?php echo $_product->getThemeColor() ?>

Would get the value of an attribute wholes type is of Text Field or Text Area’s

<?php echo $_product->getAttributeText('theme_color')  ?>

That will not give a value of a Text Field or Text Area attribute type but rather gather an array of all options in a Drop Down or Multiple Select attribute type.

<?php
$attributes = $_product->getAttributes();
$themeColor = $attributes['theme_color']->getFrontend()->getValue($_product);
?>

That will give you the value of any type of attribute, even the value from “Drop Down or Multiple Select” attribute types.

I hope this clears some things up and helps some developers out there .

Thanks!

Devin R. Olsen

Here is the finished code for your new category listing block.

<?php
$cats = Mage::getModel('catalog/category')->load(2)->getChildren();
$catIds = explode(',',$cats);
?>
<ul>
<?php foreach($catIds as $catId): ?>
	<li>
    	<?php
			$category = Mage::getModel('catalog/category')->load($catId);
			echo $category->getName();

			$subCats = Mage::getModel('catalog/category')->load($category->getId())->getChildren();
			$subCatIds = explode(',',$subCats);
		?>
            <?php if(count($subCatIds) > 1):?>
                <ul>
                <?php foreach($subCatIds as $subCat) :?>
                    <li>
                    <?php
                        $subCategory = Mage::getModel('catalog/category')->load($subCat);
                        echo $subCategory->getName();
                    ?>
                    </li>
                <?php endforeach;?>
                </ul>
            <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

And The XML Block Code:

<block type="catalog/navigation" name="catalog.category" template="catalog/navigation/category.phtml" />

NOTE:
After loading each category you have a whole array of different attributes you can use. If you wanted to make each category listing be a link, simply use the getUrl() function in a similar fashion:

<a href="<?php echo $category->getUrl()?>">
	<?php echo $category->getName()?>
</a>

Enjoy everyone!
Devin R. Olsen