Have a Cup of Coffee?

Jumping Ponta!

I created another windows store game, named “Jumping Ponta”. You can download it from Windows Store, here. This is my third windows store game, which is made of Javascript + HTML5. At a glance of screenshots, my latest three games look similar. If you watch youtube demo video, you notice these games are quite different. Through a sequence of three games, I handled scroll maps, in a different methodology. “Runner Ponta” is based upon automatic scroll, whereas “Ponta’s adventure” uses arbitrary scroll, where a map moves only when a main character moves. This game, “Jumping ponta” falls in the category of arbitrary scroll, but is significantly different from “Ponta’s adventure”. What are the difference of two? In “Ponta’s adventure”, a main character always locates at the center of the screen. But it is not the case of “Jumping ponta”. In “Jumping ponta”, the map moves only when a main character comes at the margin of the screen. I have done similar thing in previous game, “Jumpman“. In “Jumpman”, the map only scrolls vertically. In this game, the map scrolls both vertically and horizontally.

Global coordinate versus Local coordinate

When handling scroll map, especially for arbitrary scroll, you need to handle both global coordinate and local coordinate and these two are often converted from one to the other. “Global coordinate” means the absolute position in entire map, whereas “local coordinate” refers to the position on the screen. For these three games, I use “canvas” of HTML5, therefore the upper left corner of the screen is (0, 0). So, the key is, we always need to figure out the global coordinate of this (0, 0). In “Ponta’s adventure”, because a main character is fixed at center, the upper left corner (0,0) can be calculated by as follows.

  var screen_left = mainCharacter_pos - canvas.width/2;
  var screen_top = mainCharacter_pos - canvas.height/2;

In “Jumping Ponta”, “screen_left” is only calculated when a main character comes at left margin or right margin. If the margin is too small (say only margin is 1 cell long.), it restricts player’s view. Therefore, I made these margin a bit wider (the margin is 2-3 cell long).

Poke a floor

Other than a scroll map, the main theme of this game is to poke a floor. When the main character’s head hits the bottom of a floor, these segments are lifted up. To complete this part, it took a few days. I had a bug, which I could not figure out why. When a character has a contact with a block (obstacle) at left or right, and press jump key, it fell through a floor. Finally, I came to find out a solution. It has three types of collision, such as character’s whole body collide with obstacle(When walk), character’s head collide with obstacle (When jump up), character’s foot collide with obstacle(When jump down). But these states (walk, jump up, jump down) are not rigidly dividable. When the interval is too short, “walk” state transform directly to “jump down”. So, important thing was to have a cancellation, especially movements of left or right. To do collision detection, first thing you need to check is a collision between whole body and an obstacle. If it has a collision, moving left or right has to be cancelled. After that, we can proceed next checks, such as head collision and foot collision. Anyway, after this modification, the main character never fell through a floor.

Bees and monsters

As you can see, Monsters walk only on 1 chunk of the floor, on the other hand, Bees move across the screen. Blue blocks are spawn points, where monsters and bees are born. To manage monster’s walk, I created “floor” class. In the beginning, the entire map is scanned and the upper-left position of a floor and the length of a floor are stored in the class. A monster belongs to one of “floor” class, so it knows left-end and right-end of the floor. As for bees, the left-end and right-end are same as the screen, so that its local coordinate is used to judge. Having “floor” class make “Ponta” walk easier. Without having “floor” class, just moving on from one cell to the other, the sate changes from “walk” to “jump down”. With floor class, the state remains “walk”.

How to play this game?

This is a game that you get all coins while avoiding hitting monsters and bees. Poke a floor to erase a monster or a bee. If these are on the lifted floor, it will be erased. For jump, touch ↑　button. For move, touch ←→　button. (On keyboard, For jump, press space key. For move, press left or right arrow keys.) Touch jump and move keys at once to jump at an angle. If you take all coins with your life score, you win!

Please watch youtube demo video

You tube demo video is here.
Just watch to see how it looks like. Thanks for reading! Have a nice day!

Ponta’s adventure!

I created another new windows store game, named “Ponta’s adventure”. You can get this game at windows store, here.

It’s been a week or so, since last game. Because I got to know how to create windows store game, with the combination of Javascript and HTML5, It did not take time to create this game. Last time, I struggled with Javascript syntax, very much, as It is so much different from Java, which I get used to. This time, I get used to Javascript more. Although I utilized some of the code of previous game, I changed these code completely. Last time, I said I avoid using “new” operator. But I changed my mind. This time, for every function, I utilize “new” operator, which leads to simplify the code. It may sounds a bit confusing. I show here what I mean.

// code of last time
var funcA = function(){
  var that = {
    funcB : function(){---},
    funcC : function(){---}
  }
  return that;
}
var D = funcA();
D.funcB();

// code of this time
funcA(){
  this.funcB = function(){--}
  var funcC = function(){--}
}
var D = new FuncA();
D.funcB();

The code is much simpler, as it does not use “that” literal and does not need to return object, except everytime I have to “new” the object. So, I got it started with modifying previous code.

Automatic scrolling versus Arbitrary scrolling

The previous game belongs to automatic scrolling, where main character is fixed and background scrolls automatically. This time, I wanted to challenge arbitrary scrolling, where main character moves around large area and background scrolls accordingly. As you can see, most of my 2-D game are based upon automatic scrolling. But this is not my first time for arbitrary scrolling. Actually I have done it in the game of “Jumpman“, where the background scrolls only vertically. So, in a sense, this is my first time, having 2 dimensional arbitrary scrolling.

How do I do it?

Just same as previous game, to create a map, I used tile map editor. In general, I think, scrolling background makes things complicated, because you need to consider 2 types of coordinates, global coordinate and local coordinate. Global coordinate means the coordinate in entire map, whereas local coordinates refers to the coordinate in the screen.To make things simplify, I use cell index instead of pixel. To be more specific, for global coordinate, I use the number of rows and columns of the map. To draw a bitmap in canvas, you need to know pixel value, which is calculated by row and columns multiplied by cell size. To make things simplify, I fixed main character at the center of screen. So the crucial part is how I get to know the left upper corner of global coordinate. (It is obvious that the left upper corner of local coordinate is (0,0)). As main character moves, its coordinate is floating point of cell index most of the time. Because screen has to be covered by the cells entirely, you need to know which cell covers upper left corner and that cell’s local coordinate. (That coordinate is minus values.) I only mention the general idea of it and do not want to dig into that, but I utilize a lot of “floor” functions to get these values.

How to chase main character?

I have done chasing games in the past. (chaser, chaser2)I knew that using same chasing AI method ends up flocking around main character. The main theme is how to avoid flocking phenomenon. Most of the time, I use 2 kinds of chaser state, which are “random walk” and “chasing” mode. These states are alternated. To make each chaser randomized, the duration time of random walk should be randomized. Although these states are alternated, the distance between main character and chaser are calculated and if the distance is close enough, the state should be changed for “chasing” mode, immediately. The chasing time should be short enough. If it is long, the chaser can not go back to “random walk”. I made monster’s speed fast and bee’s speed slow. Monsters walk around entirely, but bees are restricted to walk just around the original position.

Setting screen

As for using Windows JS libraries, I have done one new thing, which is to create setting screen. Previously, I learned how to create app bars. What I wanted to create was “setting charm”. I need it, because I have to make user select input method.(either touching screen or pressing keyboard keys.) It took for a while to figure it out.The setting charm is based upon “flyout” control. I could have create more fancy setting screen by CSS, but I created it in most basic style.

Please watch you tube demo video!

I put youtube demo video here. Again, I sell this game for nearly 1 dollars. (Only in Japan and U.S.) All right, that’s about it. Thank you for reading! Have a nice day!

It’s being a while..

Let me first tell you that, You can buy my game at Windows store (Only US and Japan), here. I have not updated my blog, since March 3, such a long time has passed by. But it does not mean I haven’t worked for anything. Well, sure enough, I continued android programming, right after March 3 around 2 weeks. To tell the truth, I deviated from pursuing physics programming. In stead, I started to learn OpenGLES 2.0 programming. I was going to modify my graphics library to use OpenGLES2.0. But SurfaceRT came to Japanese Market on March 15. I saw it and I decided to buy it. Then I started to think about developing games on WindowsRT. (A few days later, I realized that I need to buy another Windows8 machine to run Visual studio. So, I bought windows8 PC.) I kick-started WindowsRT programming, since that day. I installed “Express 2012 for windows8″ on my brand new PC. I opened developer account and registered as a developer. A bit of conundrum was remote debug, which means to connect between PC and surface, to make surface as a remote-debugger. In the case of android remote debug, we can use USB connection between them. But for windows, it requires ethernet connection. First thing I tried was to use USB-ethernet converter, but that driver has not been supported by windowsRT. So, I decided to use bluetooth connection, and finally I got them work! It took a week or so, but at last, I opened the door to WindowsRT world.

What to choose?

So, the next step was to learn Windows RT programming. There are many kinds of combinations for Windows programming. But It seems to me that Javascript + html5 is the right choice for newbies. My ambition is to create game on DirectX11. Since I created games for 3-D and did some of physics programming on android, my ultimate goal would be to continue these on DirectX11. But DirectX11 syntax is really difficult. It takes quite time to understand them. So, I put it aside and focused on Javascript + html5 programming.

Javascript + html5

I have done programming of these combination on android, before. (Car Race, Puzzle) But this time, things were a bit tougher, because the understanding of windowRT and WinJS are essential. In addition, I had to start over to learn Javascript syntax again. Previously, I only used simple functions. Through learning, I realized that Javascript and Java are worlds apart. I put a few lines on Javascript console on chrome to learn syntax. (Javascript console is really nice tool to learn syntax.) Because I am so familiar with Java-class syntax, it was so hard to understand Javascript prototype. The notion of creating instances or inherit classes are difficult. The thing I realize is that creating instance with “new” is not good way to go. So, I finally created all functions like follows.

var my_funcion = function(){
   var that = {
     a: 3,
     another_function: function(){
       var b = 2;
     }
   };
   return that;
};
var obj1 = my_function();
obj1.a = 5;
obj1.another_function();

With this method, I can avoid using “new” and “prototype”, which make everything easy to handle. There is no class inheritance. I may need more sophisticated understanding for Javascript, but for my first try, I just took the simplest method.

Runner

After learning Javascript syntax, I wanted to start creating a game. But creating a game from scratch may take quite some time. So I decided to remake my old game on android. I picked out “Runner” from there. The heart of this game is to handle tiled-map. Firstly, with tiled-map editor, background-map is created. Because entire map is much larger than screen size, the key thing is that only cells which are inside the screen should be drawn. In addition all cells are shifted along with update. If you are interested in how I created “Runner”, please refer to my old page (Runner).

So cozy..

After creating most of the game, several things were remained. I needed to create “play”,”pause”,”stop” button. On android, I created buttons directly on the screen. I realized that “App bar” is easy to use. (In addition, it helps language localization.) Next, I needed to keep track of records. This time, I use “local container”, which keeps only best record. With this method, it is easy to implement, without creating local files. Finally, I got into localization. It was so cozy. I only need to create language resource files. I only needed to add several lines and all the rest are handled by windows API.

Would my game be approved by windows store?

To tell the truth, I failed 4 times before approved. There are solid screening standard. I failed 4-1 and 6.2 clause. 4-1 is related to network privacy. As a default, in manifest page, the function of “network client” is checked. My game does not use network, so I removed this check mark. 6-2 is related with age-rating. I thought my game is easy and put age rating 3+ at first. But it seems it is better to put age rating as 12+, particularly for games. But that wasn’t enough. For the first time, I thought about selling my game. I put a price of 1 dollar. Originally, I intended to sell my game all countries. But this was the reason I could not pass. Some countries need to submit rating certificate. Not only this, because I am selling a game, I need to submit tax exemption document for each countries. So far I only submitted this document for US. Therefore, the countries I can sell my game are only US and Japan. In addition, I got rating certificate for US. “ESRB” can be obtained online, therefore no time delay. After obtaining “ESRB”, with GDF editor, I needed to create DLL for this certificate and re-compiled with my game. This morning, I got “approved” message, which made me smile.

Please watch You tube demo video!

If you are living outside US and want to know the content of my game, please watch Youtube demo video, as It walks through entire game. I am not sure somebody will buy my game. But I hope some day, some body will buy my game. Thanks for reading! Have a nice day!