onGameStart 2012

The most important thing in the life adventure is to remember when and how did it start. First impressions, inspirations and simple steps shape the future.
My gaming experience started in mid '90 on my XT with Hercules graphic card and amber screen. I was too young (and I lived on the other side of the iron curtain) to remember Apple II or Commodore computers before. One of the first games I remember from my early childhood was 'Prince of Persia' made by Jordan Mechner. I played it for almost 12 years before I was able to finish it without cheating (I can still remember 'prince megahit' password that enables cheat mode). I'm sure that a lot of you had similar experience.

What does this have to do with onGameStart?

Earlier this year I tweeted that HTML5 gamedevs are the new generation of game makers, and like every other 'new generation' we reinvent the same patterns or techniques our older friends implemented 30 years ago. There is no better way to learn, than listen to the real experts. That's why Jordan Mechner, creator of Prince of Persia, will share his experience during this year's Main onGameStart Keynote.

During two days of the conference it will be also possible to listen to presentations of the biggest, most talented and most respected HTML5 game developers from all over the world. And differently from last year, we will focus on real HTML5 games, tools that could help you write your own game, and wide variety of services for distribution, payments, statistics, and everything you will need to create great game. No more tech demos or examples - we all know that HTML5 has become mature enough, and players don't care about the technology - they want games. And we need those players and those games to prove that Open Web Technologies can compete with any other technology used in game development.

First part of confirmed speakers list for this year's edition of the first HTML5 game conference:
Seb Lee-Delisle, trainer on CreativeJS workshops
Jerome Etienne, creator of learningthreejs.com and tQuery
Jon Howard, responsible for games for kids in BBC
Andres Pagella, creator of Tracy and author of "Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript"
Szymon Pilkowski, former senior JS developer in Crytek & Bigpoint
Robert Podgorski, boss of Black Moon Dev, one of the best pixel artists ever
Jonas Wagner, author of great WebGL demos
And of course last but not least,
Jordan Mechner, creator of Prince of Persia

So about 30 seconds ago we have launched our site, onGameStart.com. And because it's all about gaming, we've simply created a game with outstanding graphics by Robert. Control little astronaut with arrow keys, use space to talk to the speakers (close the window with 'z'), avoid lasers and spikes, and use keycards to open the door. If you don't want to explore our oGS spaceship, you can simply click on the head of the speaker in the top menu, and you will be teleported to the given speaker - you can still talk with him using space. game was created using Dominic's ImpactJS so it should work in most of the browsers. If you happen to find a bug, typo etc, feel free to tweet me about that (@michalbe). Enjoy, and stay tuned (Lanyrd, Facebook & Twitter)! We will announce more speakers and surprises soon.

Zombie Eliminator & Real Decision Ball on bada

My Zombie Eliminator (first mobile game in 16 languages, available on Palm Pre & Pixi, Android & Samsung bada) was today on place 20. (out of near 1800) in 'top 50 paid apps' in Chinese Samsung Apps Store, 32. in Italian & Mexican, 44. in Australian and 46. in Turkish. I feel gently honored:).

And my other App, Real Decision Ball (also on Palm Pre & Pixi, Android & Samsung bada) is now number 3 in Mexican Market.

Detecting orientation change of mobile devices

Couple of weeks ago I was asked by one of the biggest online games company to adapt several of my games for their new portal designed for mobile devices.
One of the most important thing in this venture was to disable orientation changing of the phone. Simplest way to check if it is in landscape or in portrait mode (in every device, because I know there are functions dedicated for Iphone and maybe some for Android also) is to check if height of the screen is bigger or lower than it's width.

function checkOrientation() {
    if (window.innerHeight > window.innerWidth) {
        //portrait mode
    } else if(window.innerHeight< window.innerWidth) {        //landscape mode
    }            
}

It's not possible to guess in which mode user enters the page (game in that case) so it's important to check it in the begging, and each time the browser's window resize.

        checkOrientation();
        window.onresize = function() { //your code
            checkOrientation();
        }

Try this link from your phone to test it, or just open it in desktop browser and change window size: LANDSCAPE VS PORTRAIT
I know it won't works in IE, but almost all of the mobile web browsers are based on WebKit.

Adapting to newer devices

After PRE, the next device introduced by PALM was called PIXI. It's one big mystery why newer, more complex and forward-looking device has smaller screen size than its predecessor. Nowadays, when mobiles has all the time more and more additional goodies, it's at least not really clever. But if we want to get to the widest audience our apps need to be flexible. Because I was anxious at the time, I chose the simplest way to run my Zombie Eliminator also on Pixi - I just make 80px height 'dead zone' on the bottom. It is visible on PRE and hidden on PIXI. Simple & working.
I recommend also nice art about Effective Design for Multiple Screen Sizes by Bryan Rieger at Mobi forge.

First touch with Palm Pre

My 'Zombie Eliminator' is now ready to download for your PalmPre phone in official Palm App Catalog. Twelve levels of pure fun served in sixteen languages. Check it:

"Impossible is nothing" play-off

Few hours before I want to send our game to Ovi challenge I read on the site that organizers gave us additional week for app polishing. I don't think it was necessary - my game was complete on Monday, about 7-8am. I will use my extra time to change it from WRT widget to Symbian app.
About an hour after the announcement I found something called Rhodes, but using of Ruby and that all 'Network synchronization' stuff effectively deterred me.
What I found next was PhoneGap. Quoting creators:

PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iTouch, iPad, Google Android, Palm, Symbian and Blackberry SDKs

It was everything I need. It seems that it also supports Symbian. My first try was 'Get Started with Symbian (Qt)' part from the tutorial. I installed another tons of useless stuff (really - it was another 20GB to make it 'works').
I did my best but nothing seems to work properly or even close to. I googled thousands of different forums, blogs, tutorials and manuals with no result. I even try to search for my answers on Stack, where i found nothing. So I asked new question in there and few hours later I got the answer (from one of the phoneGap developers), from which i concluded that it simply doesn't work. Fine. So I had to write something on my own.

One of the methods that come to my mind was to render HTML/JS in simple browser-like application. It is possible for example using WebKit.
Tired of installing millions of plug-ins, libs, etc. I download Nokia SDK All in one Beta and start new 'Mobile QT Application' project in Qt Creator.I will explain later what to do if we want render our applications with WebKit, now I'm happy that it works fine. I made minor changes in the game, like control system (now there are no buttons, you simply tap the screen - character goes in direction of your tap. I will also try with accelerometer). Tomorrow I will test it on device and if everything will go well I will submit it to the challenge.

"Impossible is nothing" 9 : 2

I decide not to show everything in here - it has to be a little mysterious and something must motivate you to play when the game will be finished:). What I want to say & show today, two days before the deadline, is very simple table based map editor I write in about 200LOC with simple DOM manipulation using 24 sewers tiles placed in one png file. It is easy and not so annoying to use, just watch the video below. Second part shows early location exiting/entering (it is already changed), Zombies AI, and better than yesterday connected map tiles.
I don't know if tomorrow I will have time to write something because of last corrections. Results will be announced on 3rd June, I have good feelings because it is my birthday, so keep your fingers crossed.

"Impossible is nothing" 8 : 3

IAs I promised before, here is the simple few seconds long video with basic gameplay on uncut scenery tiles. I want to focus now on mechanics, not visual details (I will improve it tomorrow or during the day after).

There is no interaction with Zombies and no Survivors for now, that is my job for the next days.

"Impossible is nothing", first week off, 4 more days.

Today I improved frame rate detection using Scott Porter's Gamelib javascript library, modified by Brent Silby. Now it keeps constant number of frames on each device, I don't have to calibrate engine when I want test it on Nokia's, and i gained beautiful loading screen for introductory splash graphics. I will write something more about the library later.
I also fix few bugs, change sprites for that prepared by Kuba and start to think about particular missions. Unfortunately because of deadline getting closer every second, we decide to make only 2-3 different 'levels' with 5-6 missions each. It seems to be enough for 10-days-created game:). Last but not least for today - meet our survivors:

"Impossible is nothing" 6th day - after the half-way point

Okay, we have now only 5 more days to deadline so without unnecessary words let me introduce Mr. & Mrs. Zombie as a first gamesprites created by Kuba:
No more pandas:). Tomorrow I will try to record screencast from my emulator to show some gameplay details.

And continuing saint war between Flash-lovers and JavaScript developers - Thoughts on Flash directly from the Apple.

"Impossible is nothing" 5th day - six to go.

Today I expand features of my Map editor. It's now ready for multiple type tiles and 'special' cells (like that which are teleporting you to given place when you stand on it).
As I planned I also add first enemies - for now colorful pandas instead of zombies. I gave them simple AI using which they will moving in the player's direction.
I also change my plans about placing enemies and items on the map. I have no time for that. Maps will be designed using map editor, but all element like zombies, pellets and other items will be placed using random techniques (and it will change every time you get out and get back to the screen - I think that makes game more interesting and 'a little bit frightening' - you never know what is around the corner). Check first 15 screens of game world in the editor's mode preview with one screen pasted directly from the game:
And yes, I have changed tiles from simple red/yellow because they 'irritated' my eyes:), but this is still not target graphics.

"Impossible is nothing" 4th day, Only a week more.

After first tests on mobile device my game seems to work. I've done basic logic such as displaying player, simple map (with locations and moving between them) and player control - with collisions with the environment. Tomorrow i will work on enemies (finally, ZOMBIES!) and survivors. I want to finish engine in next two days and use rest of the time to build world, expanded with many locations and put final graphics on. I already found graphic designer with enough free time in that week to make some sprites and tiles - meet Kuba from HighColors. And meet first Zombie I've ever seen - 1st location guy from Resident Evil (it was 1996 on PSX)

And one technical aspect of designing tileset-based map movement. Let us consider map created from simple array with '0' as road and '1' in the role of wall, e.g.

map[0] = [];
map[0].push([0, 0, 1, 0, 0, 0, 0]); //0
map[0].push([0, 0, 1, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 1, 0]); //2
map[0].push([0, 0, 0, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 0, 0]); //4
map[0].push([0, 0, 1, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 0, 1, 0, 0]); //6
map[0].push([0, 0, 0, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 1, 1, 1, 1]); //8
map[0].push([0, 0, 0, 0, 0, 0, 0]);

Movement and collision detection are easy if we want our character just 'jump' from one cell to another. We need then simply calculate if destination tile is not '1'type (wall).

var x = (player.xPosition/tileSize) + deltaX, 
    //if we move along X axis deltaX is 1 or -1 and deltaY is 0
    y = (player.yPosition/tileSize) + deltaY; 
    //and vice versa in here

if (map[actualMapIndex][y][x] !== 1) {

       //move player

} else {
    displayFunnyWallHitAnimation();
}

It gets complicated when we want it to take smaller steps, what is necessary if we want animation. For example our player moves 9px each step in 50px big tile. Because DOM coords are calculated from top-left corner, we can observe case in which our character is moving 'on the wall', like that:

With yellow fields as roads, red walls & dark blue dot as sprite's 0,0. We can see that 0 point of the sprite is on the road but the sprite itself is traveling on the wall. So I got the idea of adding one more point to that, i call it x2, like that:

var x = ((player.xPosition+tileSize*0.2)/tileSize) + deltaX,
    x2 = ((player.xPosition+tileSize*0.8)/tileSize) + deltaX
    y = (player.yPosition / tileSize) + deltaY;

if (map[actualMapIndex][y][x] !== 1 && map[actualMapIndex][y][x2] !== 1) {

   //move player

} else {

    displayFunnyWallHitAnimation();

}

I add 1/5 size of the tile to the 0.0 point, and 4/5 for another one. It's because my sprite has a little free, transparent space from each size. In practice it looks like that:

And because of kind of isometric (or oblique) view I use ('will use', because it's hard to say about perspective if i have only semi-colored squares as background), i don't have to introduce additional point in Y-s. It looks good when character is standing in front of the wall like on screen below (like in the old Pokemon games for gameboy).
Ok, I will return to developing now, because, paraphrasing George Bernard Shaw (I don't really remember how it was originally), "Able is creating, unable is teaching" , and I always find writing blogs as a kind of teaching:).

"Impossible is nothing" 3rd day, only 8 more

Ok, finally I have an idea. Thanks to Squidi's so-called GameDocs, PacMan's birthday the day before yesterday and my true zombie-love I have a plan. I decide to design everything for Nokia 5800 XpressMusic (with 360x640 resolution) with very simple reason - that is one my neighbor have so I can test my game on it.
I use simple map editor I write before, initially for my first FaceBook Snake (where I finally never use it), used later in Eastern Compo Game. I made 7x10 map of 50px height tiles, what gives me up to 90px on the bottom of the screen for navigation panel (coz that device had no keys). Now I have to find someone who can make me some graphic.

"Impossible is nothing" 2nd day - 9 days left

To create any game, you need:

1. idea


2. skills


3. time


4. tools


5. and resources

As I wrote in previous post, I have no skills in mobile dev, no idea for any interesting app, and I'm run out of time. What I have today are tools.

All night long i read mostly everything in the web about creating mobile widgets in web technologies. It wasn't so easy because Nokia's site is one big mess with everything upside-down. I download tons of stuff from there (really, it is almost 10GB, with most annoying thing ever - Symbian Emulator which is 4GB big and you have to reinstall it every time you want to clear all preferences. Fortunately Aptana has additional plugin with browser-based Nokia device emulator too), install everything they asked me to, read and tried to understand every "Getting started" and "Hello World!" tutorials, and not sleep at all.
Finally, I can proudly say that it is working. First photo of some pre-prototype game-like application running on Nokia's device (I don't even have one, thank one more time to Owca for help).

"Impossible is nothing" 1st day - 10 days left

Ok, I give up with J2ME. My mate Jakub a.k.a Owca had an idea of cool J2me application inspired by alcoholic blackouts, with very strong chance to win ODC, but unfortunately Blue-tooth implementation for our needs was to difficult to overcome. Now we have 10 more days (challenge ends 31 May, at 15:00 Central European Time), no experience or even skills in mobile development for Nokias, no idea of any awesome app that could win, and no money to drink from grief.


But there is a little light at the end of the tunnel. According to Nokia Forum there is some way to write mobile applications using Web Technologies, such as HTML/CSS and our favorite JavaScript. I have to get familiar with that. We'll see what will happen.

Mobile applications

Best proof that it's time for develop something for mobile devices is that in new Photoshop option 'Save for Web...' changed into 'Save for Web & Devices...'. That's why in my free time I'm working on social-like fun and nice application for Ovi Dev Challenge. I have almost two weeks, I have to speed up a little. Wish me luck & keep your fingers crossed:).