Retro Yeti Escape Game for iPhone and iPod Touch

I’ve just finished developing Yeti Escape for Vivid Reflection, my iOS development company. Yeti Escape is a new Christmas-themed retro game for iOS. The story: Present-hungry yetis have escaped from the North Pole and threaten to ruin Christmas. Pixel Santa must save the day by throwing spare presents at them. Can he still make his deliveries on-time? The game is available now on the App Store and I’ve made a short 2 minute video demoing the retro gameplay and awesome 8-bit sound effects and music so please check it out.

Yeti Escape Demo – 8-bit Retro Arcade Game from Vivid Reflection on Vimeo.

The Yeti Escape game is made in Cocos2D and has Game Center leader board support so you can challenge your friends too. It’s a fun variation on the classic 8-bit arcade shooter. You play by tapping the screen to fire presents from your sleigh, aiming to hit the yetis. Once they consume a present they disappear back to their slumber in the North Pole. If they escape, they eat everyone’s presents and it’s game over. In some ways it plays a bit like a modern-themed twist on the arcade classic Missile Command. As Pixel Santa is moving through the game world, you have time and aim the shot just right to hit the moving yeti. There are a number of different yetis all of differing strengths and speeds which try to escape at different times and if you’re not expecting it you’ll find yourself shrieking as some “super powerful bad-ass” sumo yeti escapes with your last life.

Please let me know what you think about the game in the comments. What’s your best bit about 8-bit retro games?

If you’d like to keep up-to-date on the apps and games I develop, follow @VReflection on Twitter or like Vivid Reflection’s Facebook page. The game has just gone live and Yeti Escape can be downloaded on the App Store now.

‘Cut the Rope’ HTML5 JavaScript Preloader

Screenshot of Cut the Rope HTML5 Javascript web appDevelopers from the popular iPhone game Cut the Rope and a crack team of HTML5 gurus from PixelLab, have developed an awesome JavaScript version that runs inside most modern web browsers using JavaScript and a number of powerful HTML5 features such as canvas and media APIs. You can find out how they did it from the behind-the-scenes video they’ve posted.

One of the interesting snippets from the dev blog is that the group behind the creation of the app have released an open-source preloader for JavaScript apps called PxLoader. It supports some extremely useful features such as being able to load in your canvas images in groups, use progress bars, get callbacks when various groups have loaded and supports a plug-in architecture so you can load in sounds too. It’s released under a fairly liberal MIT license and the PxLoader source is available on GitHub.

Image loading in Groups

A good example is using it in an HTML5 game to load menu sprites before actual game sprites since you would want the menu to display and load first. PxLoader can also provide progress updates to many listeners and will scope the updates and statistics to only the set of “tags” a listener is interested in, a tag being the text name of that group.

// Delay each image and append the timestamp to prevent caching 
var baseUrl = '' + new Date, 
    $log = $('#sample3-log').val(''), 
    $menuProgress = $('#sample3-menuProgress').text('0 / 50'), 
    $gameProgress = $('#sample3-gameProgress').text('0 / 50'), 
    $totalProgress = $('#sample3-totalProgress').text('0 / 100'), 
    loader = new PxLoader(); 

// Queue 50 images for each section 
var addImagesForTag = function(tag, $progress) { 
    for(var i=0; i < 50; i++) { 
        var imageUrl = baseUrl + '&i=' + i + '&tag=' + tag; 
            pxImage = new PxLoaderImage(imageUrl, tag); 
        pxImage.imageNumber = i + 1; 

    // add a listener to update progress for the tag 
    loader.addProgressListener(function(e) { 
        $progress.text(e.completedCount + ' / ' + e.totalCount); 
    }, tag); // scope listener to the current tag only 

addImagesForTag('menu', $menuProgress); 
addImagesForTag('game', $gameProgress); 

// Listen to every event to update total progress 
loader.addProgressListener(function(e) { 

    // log which image completed 
    var line = ' Image ' + e.resource.imageNumber + 
        ' Loaded [' + e.resource.tags[0] + ']\r'; 
    $log.val($log.val() + line); 

    // scroll to the bottom of the log 

    // the event provides stats on the number of completed items 
    $totalProgress.text(e.completedCount + ' / ' + e.totalCount); 

// Start downloading images for tags in prioritized order 
loader.start(['menu', 'game'])

You can play with a working example of the group image loading on the PxLoader homepage (Sample 3).