-
Notifications
You must be signed in to change notification settings - Fork 1
FAQs
Probably you’re a developer and you’re trying to figuring out how Akihabara works. If so, directly jump here.
Instead, if you want to read something boring, here comes the content table.
Q. What kind of games I can do with Akihabara?
A. For now, Akihabara can help you on making 2D browser games using any virtual resolution and framerate. The virtual display can be zoomed to any resolution, using a variable ratio. On low-end machines, provides automatic frameskip. Games will work on most of the browsers that supports HTML5. Obviously performances and compatibility depends on the browser capabilities and hardware specs.
Q. Wait! You said ‘any framerate and any resolution’? Not only 25fps and 320×240 pixels?
A. Have you noticed that in the entire sources there isn’t any file called like the framework name “Akihabara”? The only thing called “Akihabara” is the “AkihabaraInit” command in the secondary “help.js” module: this command prepare a nice retro-style environment, with 25fps, 320×240 pixels resolution and different zoom levels depending on the browser. Low resolution, less work: in this way you can just download the Akihabara framework from your workplace, fire up your notepad and any lo-fi paint program and you’re ready for game developing, without the need to install anything else (compilers, web servers, plugins etc)! And you can do a nice game prototype in the time of 2 or 3 lunch breaks! Another main advantage on using that default frame rate and resolution is that 320 pixels is the main width resolution of the iPhone/iPad in portrait (aka Gameboy position ;) ) and 25fps is lower (and standard) enough to make relatively complex game that runs without skipping on 3GS devices. Short answer: AkihabaraInit provides you something compatible and retro. But you can setup any resolution you want. Have a look to what AkihabaraInit does and try to make your MyFavouriteSetupInit command :)
Q. Can I write Metal Of War, Crysys1 or Awesome Ultra Realistic FPS with Akihabara?
A. Get ready for an unpredictable answer! No. But, If you remember some famous mobile phone portings, you can get what I’m try to say: I’ve seen a famous 3D beat-em-up featuring a cool guy with a sword and two Paul McCartney and Stevie Wonder themed guns ported to a 2D scroller, and so many soccer games. Probably these 2D arcades can be realized using HTML5 techniques, and so with Akihabara. I haven’t tried if is possible to create a bullet-hell SHMUP game – we will see together what is doable with Akihabara. I don’t know what is doable with Akihabara, but if is in 2D, just try to do it.
Q. Is Akihabara able to play audio?
A. Yes. The latest version of Akihabara can play background music and sound effects using HTML5’s “audio” tag. For now there are a few of issues, that depends on a missing standard on audio formats (for example, Firefox plays OGG natively but other browsers are MP3 enabled), browsers maturity (some browsers has some audio latency and caching issues or a limit of the number of audio files that can be played at the same time) and the youngness of the Akihabara engine. For these reasons, audio is disabled by default on some browser (i.e. Safari). However, audio playback and mixing works in most of the cases.
Q. These are big fat issues!
A. You’re right, but things are going to be better with new browsers release. Nightly builds of Safari works really better than the current stable version and will soon leave the “experimental” cage. Firefox seems more responsive in its nightly build and Chrome did a big leap on audio in his latest version. When started to develop the audio engine Opera didn’t support the audio tag in his stable version but its beta goes stable during the development and now is the browser that gives the best results. That simply means that is a matter of time.
Q. Why you didn’t used a Flash engine for playing audio, since is more performing?
A. I’m not sure that the computers I use during the day has Flash on board so I wanted to try to keep the minimal requirement of an updated browser for putting together and play a game. I also wanted to learn something about the audio tag and I thought that Akihabara could be a nice playground. Integrating a Flash engine is doable, since the audio functions on Akihabara are quite simple. Someone wants to try? :)
Q. The music in the demos are simply great. You’re a good composer too!
A. I’ve not composed a single bleep from the Akihabara demo and, believe in me, feel lucky since I suck on music, starting from my singing performances under the shower. The musics of the Akihabara demos were composed by a number of great music artists that decided to help the Akihabara project. Their names and original works are here . I’ve used CFXR for most of the sound effects.
Q. I want to make networked games with Akihabara!
A. Do it! For now Akihabara doesn’t help you on networking but I hope that someone (or I, a day) will implement something like AJAX polling or (better) WebSockets synced with the game into the low-level libraries. (gbox.js) Since these tecniques are doabe, you can implement these by yourself – I suggest you to try to integrate them to Akihabara and commit them ;)
Q. Performances are choppy on my iPhone 3G!
A. I know, my friend. Welcome to the old-gen boat :) I’ve a 3G too and I’ve tried do work on some automatic frameskip code to make games at least playable on our device. But I (and some one else, as I’ve read around) have tested the games on 3Gs and games reaches desktop-quality speed.
Q. Is buggy on my Android device!
A. I don’t have an Android device, so I was able to do just a bunch of tests on the Android device we’ve at my workplace. I can’t work on it so much, so – actually – just an Android owner contributor can really make things better on that devices!
Q. Is slow on my iPad!
A. Same as Android: I don’t have an iPad, so I can’t do on-hardware performance tests. But, for this, there is a known bug: FPS calculation on iPad seems totally broken. I suggest to try to run the games with “statusbar=1” parameter like this : for the game, everything is going at full framerate, with high idle time is reported. Try to play with the “fps” parameter like this for really better results – without frameskips. I’ll try fo fix it once I’ll ve an iPad (or someone tries to figure out how to fix it)
Q. The game says “press A to start”. I’ve hit the “A” key on my keyboard one trillion times but nothing happens. Is this the end of HTML5 gaming?
A. I’m guilty to be too retrogamer: Z, X and C were common action buttons in emulators, japanese indie games, lot of DOS games and so on. So, “A button” is your “Z” key, “B” is X and “C” is… well. “C” :) You can configure the keyboard from the settings page on top of the games list ( here ).
Q. The game says “press A to start” and, since I’ve read the last question, I’ve pressed the “Z” key on my keyboard but search-on-type starts or nothing happens. Is THIS the end of HTML5 gaming?
A. Browsers settings are a nice thing, just some of them doesn’t play nice with web pages. Try to click on the upper part of the screen of the game (some pixels upper from the game logo) and a little black bar spawns. Click into that bar and everything should be ok.
Q. My iPhone doesn’t have a keyboard. How I can play games?
A. Usually a touch pad is spawned on the screen on iPhones and Android devices. But, if this doesn’t happens, you can try to append “touch=yes” to the url, like this.
Q. Can I play with a keyboard docked to my iPad?
A. Mmm. Yes, but there is another known bug: seems that holding keys is not correctly supported by iPad, so, if you hit multiple keys at the same time, only the last one is “released”. BTW you can try to dock your iPad, plug the keyboard, go to the game and tap on the upper part of the game’s screen: tap on the box that is spawned and try to play.
Q: is this really a HTML5 game framework? If so, where’s the ‘canvas’ tag in the game file?
A: someone please try this on older browsers, see what happens
Q: ok, i want to monitor two variables in the game, while it is running. How do I do that?
A: try installing the awesome addon called Firebug. You need Firefox to run it. In the source code of the game, insert a line “console.log(var1,var2);”. Now run the game, and remember to enable the Firebug console. You’ll see the variables being logged. On Safari (desktop and mobile), Opera and Chrome, debugging tools are already onboard.
Q: i checked the source files and saw this cels.png file in almost every game. What’s that about?
A: the cels.png is basically like a movie reel, unrolled. it has pictures of objects/characters/weapons in the game. at the start of each game, the movie reel is loaded, with specific positions of the objects marked in the game memory. They can be called anytime!
If you see the character being animated, it probably has a series of icons in different poses in cels.png. (eg: walking south, north, east,west, , swinging sword, etc). The game engine loops through these and voila, you have a moving character.
PS: btw, this same movie reel concept is applied for the game fonts. if you check font.png, you’ll see lines of fonts, each are saved and seperated into individual letters/numbers into game memory each time it loads.
Yes, this means you already have an idea of how to create your own characters and fonts!
Q: how is the background ‘scrolling’ effect produced in the Solitude game?
A: It’s called the parallax effect. In the game Solitude, your fighter plane is actually not moving (unless you move it with your arrow keys). Only the background is constantly scrolling. Let’s dig in deeper into this effect.
in game-solitude.html, somewhere near line 274 there’s a huge variable called stages. The author made only 1 stage in this game ( as a proof of concept , feel free to add your own stages).
think of stage 1 as a vertical movie reel, consisting of the following backgrounds: seas, seasides, and beaches. Each background is 320 pixels tall, attached one after the other. Basically, if you just one to have a scrolling background, you can load the backgrounds, add the setSpeed and setLoop function and you’ll be done.
But that’s boring! We need dialogues and cutscenes to make it fun. So there’s this function called script:function(th,pos,bl). This function with no name basically says:
the parameter pos will have a value starting from 0. the first time this function is run, setLoop sets the max value of ‘pos’. It’ll run from 0 to 320. This means: The movie reel will vertically ‘scroll’ from 0 to 320 px. Hey, that’s neat cos each background png is made to be 320 px tall.
so in the first loop, you get a looping sea background moving at high speed ( setSpeed was 10 )
once the first dialogue is rendered, we quit the previous loop by calling quitLoop(). the pos variable will be free to increment it’s way upwards till the next limit. if you log the value of pos using firebug (using the command console.log(pos)), you’ll notice how fast it increments.
so the pos increases all the way up to 5440. In the meantime, your fighter plane will meet different enemies generated every 1000, 200, 500 and 800 pos units.
once the pos reaches 5760, you’ll meet the boss, and a loop is set again. from 5760 to 6080. What background will play during this interval? Since the height of a background is 320 px, simple math of 5760 / 320 = 18th background for the beginning of loop, and 6080 / 320 = 19th background for the end of the loop. It’s basically two sea backgrounds looped the whole time, at the speed of 10 while you’re fighting the boss. (aka spoiler alert! your wife)
once you’ve killed the boss, the function quits the loop by jumping to maingame.gameIsCompleted() and you see the credits.
As of this point, you already know how to add conditions and different backgrounds to the game!
1 Stands for Cry System, Cry!