tag:blogger.com,1999:blog-35083086190577920992024-03-05T05:36:32.098-08:00Firefox OS GamingBobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.comBlogger104125tag:blogger.com,1999:blog-3508308619057792099.post-77644453647514658212015-06-03T16:05:00.003-07:002015-06-03T16:05:46.941-07:00Going ... going ... gone!After months of lactivity, I have decided to put this blog on permanent hold. I won't kill it because there is some really great code and great games buried in these 100+ posts about Firefox OS gaming.<br />
<br />
I certainly feel guilty for abandoning this blog. Not for the time when I was traveling or attending to family business, but for now when I realize that Firefox OS no longer excites me. In particular, this article about Firefox giving up on $25 phones was the last straw.<br />
<br />
<a href="http://www.cnet.com/news/mozilla-overhauls-firefox-smartphone-plan-to-focus-on-quality-not-cost/">http://www.cnet.com/news/mozilla-overhauls-firefox-smartphone-plan-to-focus-on-quality-not-cost/</a><br />
<br />
I could get excited when Firefox OS was all about bring phones to the masses, but now I'm not sure what Firefox is about. I didn't like it when Google stopped funding them, I was very uncomfortable with the way that that Brendan Eich was bounced (the founder of JavaScript not worthy?), and the alignment with Yahoo and Bing just doesn't sit well with me.<br />
<br />
So I've decided to transfer my energy to another HTML5 hardware container -- Chromebooks! I really like HTML5 and Cromebooks are similar to Firefox OS phones in the sense that the main programming for them is HTML5.<br />
<br />
And Chromebooks are bringing computers to the masses. No, not $25, but you can get nice new shiny Chromebooks for $200 and the price is dropping all the time. It's just a keyboard and a screen, with Linux underneath and Chrome on the top.<br />
<br />
So I'll be starting a new blog for Chromebooks and games.<br />
<br />
One of the mistakes I made with this blog was to alternate posts between game reviews and game programming. For Chrome, I'll have two blogs, one for Chromebook game revie<span id="goog_1618053765"></span><span id="goog_1618053766"></span><a href="https://www.blogger.com/"></a>ws and the other for Chromebook game programming. And yes, I know that Chrome apps and Chromebook apps are the same thing, but I'm really liking the idea of a nice, light, Chromebook. I'm typing this on a new Asus Chromebook and I'll be doing all my programming on it as well as game playing!<br />
<br />
My game programming blog will be called "HTML5 Games on Things" in honor of the new "internet of Things" concept but for games. You can find it at <a href="http://www.html5gamesonthings.com/">http://www.html5gamesonthings.com/</a> but I don't have any posts yet. I called it that because I'm starting on Chromebooks first, but with PhoneGap getting better, I think that I can use HTML5 on Android and iOS.<br />
<br />
My game review blog will be called "Games for Chromebooks" and will be at <a href="http://www.games4chromebooks.com/">http://www.games4chromebooks.com/</a>. No posts there but I'll be doing stuff very, very soon.<br />
<br />
So stay tuned, but not iTuned!Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com4tag:blogger.com,1999:blog-3508308619057792099.post-22142276242185586982014-10-07T18:25:00.000-07:002014-10-08T17:19:14.667-07:00Sprite Sheets in Construct 2I spent a few months traveling and not doing much of anything useful to anyone else, but I had a good time!<br />
<br />
I did manage to review a book on Construct 2 that will help people make apps for Firefox OS. Especially for games, Construct 2 is a fast drag and drop game engine that thinks in HTML5! In case you missed it, my review of <b>Construct 2 Game Development by Example</b> is at <a href="http://firefoxosgaming.blogspot.com/2014/09/construct-2-game-development-by-example.html">http://firefoxosgaming.blogspot.com/2014/09/construct-2-game-development-by-example.html</a>.<br />
<br />
I'll also get back to reviewing games for Firefox OS, so if you know of any games in the Firefox OS Marketplace that you'd like me to review, let me know!<br />
<h2>
Efficient Artwork</h2>
The last real programming post I did was on how to do a platform game in Construct 2 for Firefox OS. You can read it here at <a href="http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html">http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html</a>. Essentially the game worked, but over on the Construct 2 site, a person named Aphrodite (from France) pointed out that it is somewhat inefficient to load in individual pieces of art for each block on the screen.<br />
<br />
Here's what the game looks like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0quRbST2nOOawjNDL5LG-bUxRoCUkxjWgPJYTaeMN2foIeQoG1csVESvdG-_XBVSiru2RpSsfKm9Gf8It0nXRuwWnglL0yNJ3XVgsFpnEz5kPN9bSculSs7naoLLKI07_d8QCpWPUoJM/s1600/climbing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0quRbST2nOOawjNDL5LG-bUxRoCUkxjWgPJYTaeMN2foIeQoG1csVESvdG-_XBVSiru2RpSsfKm9Gf8It0nXRuwWnglL0yNJ3XVgsFpnEz5kPN9bSculSs7naoLLKI07_d8QCpWPUoJM/s1600/climbing.png" height="400" width="240" /></a></div>
<br />
The blue hero is standing on a platform made up of lemon lollypops (minus the stick). Each lollypop is a sprite. Sprites are an easy way to create patterns on the screen. The same sprite can be reused throughout your game, saving on memory. But loading sprites one at at time (which is what I did) isn't the best way.<br />
<br />
But here's a better way to create objects on the screen.<br />
<h3>
Step 1 - Start a new project.</h3>
Download the latest Construct 2 which you can always get from <a href="http://www.scirra.com/">www.scirra.com</a>. Open up Construct 2 and open up a new project. Use the New Empty Project template.<br />
<br />
Why do you want the latest? Construct 2 is trying to match every browser, and every browser is updating madly. So keep up! <br />
<br />
<h3>
Step 2 - Set up Grid and Snap</h3>
Up near the top is a View tab. Open it up and find Snap to grid. Click the box to make snapping happen. For grid-based platformers and role-playing games, grids are great and snapping makes sure that all the squares line up! Also set the grid width to what will match the pieces. In this case the squares are 32x32 pixels.<br />
<br />
You can also click the box next to Show grid. I like this so I can see the grid. You can always turn it off it you want to get the feel of the game after you've assembled the pieces.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9EQwGFAYnbbglt-BEhP-czSb_fqjwhKn4F0BIiYYuQ6AP74rVArz_hZqEc72OJ7JwThrm7NRJ6FOpEtgGybVCL03Lr5DmORWtahqMu-nQcNT2V-By2l-SqnOiX0ysrUBnqg4ejBsyWs/s1600/Snap+to+Grid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9EQwGFAYnbbglt-BEhP-czSb_fqjwhKn4F0BIiYYuQ6AP74rVArz_hZqEc72OJ7JwThrm7NRJ6FOpEtgGybVCL03Lr5DmORWtahqMu-nQcNT2V-By2l-SqnOiX0ysrUBnqg4ejBsyWs/s1600/Snap+to+Grid.png" /></a></div>
<h3>
</h3>
<h3>
Step 3 - Find a Sprite Sheet</h3>
Sprite sheets are wonderful. Instead of loading each little sprite image separately, you can load one bitmap which contains all the sprites you want to use. Here's a great one from the artist I used last time, Kenney. You can get his free art at <a href="http://kenney.nl/">http://kenney.nl/</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghAV79Oh8HMqNn0S3s9GW91JO15xcR99jOHCOL_K_FqBUb-p7EvrHaUSOiKm6H07ojdds04hwK11KmSeaPEkeAqlAlJnVCYDu9Acj3xofoxJlLzZATFubo7-nt9SAnBS7bDptaY82nWv4/s1600/candy-sheet0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghAV79Oh8HMqNn0S3s9GW91JO15xcR99jOHCOL_K_FqBUb-p7EvrHaUSOiKm6H07ojdds04hwK11KmSeaPEkeAqlAlJnVCYDu9Acj3xofoxJlLzZATFubo7-nt9SAnBS7bDptaY82nWv4/s1600/candy-sheet0.png" height="320" width="320" /></a></div>
If you look closely, you can see that he's created 49 sprites and placed them in a 7x7 grid. Thank you, Kenney!<br />
<h3>
Step 4 - Pull the Sprite Sheet into Construct</h3>
The next step is tricky. Make sure you are looking at a Layout screen. Double-click anywhere on the screen. You'll bring up the Insert New Object screen. Double-click on the Sprite object. The Insert New Object screen disappears and you're left with a cursor that has a target shape. Click anywhere on the Layout screen to start the Sprite Sheet process.<br />
<br />
Essentially the process is:<br />
<br />
1. Double-click on the Layout screen.<br />
2. Double-click on the Sprite object.<br />
3. Single-click on the Layout.<br />
<br />
This will place an object where you click, but you can easily move it later. <br />
<br />
When you do that, you get the Edit Image editor. This editor consists of three separate screens. The main screen looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4XMhfxLVnws6WILH_DPwG3PINjmu_Ht0WUsSsliHOMBIjVm7Nb0JsgZObKnRzMXpPKZcjiTNKnhs0LRJBuZvszGbvauqajuKSPApXg9nqeS-ZOZ7_vMq_9y9xtjtNXHP0xGBdvRX8EQ/s1600/edit+screen+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4XMhfxLVnws6WILH_DPwG3PINjmu_Ht0WUsSsliHOMBIjVm7Nb0JsgZObKnRzMXpPKZcjiTNKnhs0LRJBuZvszGbvauqajuKSPApXg9nqeS-ZOZ7_vMq_9y9xtjtNXHP0xGBdvRX8EQ/s1600/edit+screen+1.png" height="303" width="400" /></a></div>
<br />
This screen is where you can manipulate art and do lots of cool things.<br />
<br />
But there are two other screens that are useful for sprite sheets.<br />
<br />
Usually to the right of the main edit screen is the Animations screen. It looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-FrfkuUON_rP038-U_dpvUXS9MivvUImaedo6euNh3ULOQx7SpDc2gOmEyg2jYyZQp-fm6f_O-zG9-jWTtzJjDrdn3V5F4xjaDMAIhliTK6FzLq3D44okXns_lPijHboFICblao9GH8/s1600/edit+screen+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-FrfkuUON_rP038-U_dpvUXS9MivvUImaedo6euNh3ULOQx7SpDc2gOmEyg2jYyZQp-fm6f_O-zG9-jWTtzJjDrdn3V5F4xjaDMAIhliTK6FzLq3D44okXns_lPijHboFICblao9GH8/s1600/edit+screen+2.png" height="400" width="264" /></a></div>
<br />
And finally, the Animation Frames screen, which is usually below the main screen and looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuweos9FMupLOm0T_35tSFoYcj2yzHnIQZLZl5SGD-_H0TreUGIxMjHmEpc0lxFR7bAhKtPvwl7x01_ME2igqqvqU7KpgG9vh8aVCPKUJ0HXc2_m-f6tWq5BuK97EZanyzBHculs54rko/s1600/edit+screen+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuweos9FMupLOm0T_35tSFoYcj2yzHnIQZLZl5SGD-_H0TreUGIxMjHmEpc0lxFR7bAhKtPvwl7x01_ME2igqqvqU7KpgG9vh8aVCPKUJ0HXc2_m-f6tWq5BuK97EZanyzBHculs54rko/s1600/edit+screen+3.png" height="153" width="400" /></a></div>
<br />
Construct 2 has an elaborate animation system that can let you do all kinds of cool things with animated characters, but it also uses its animation system to place pieces of a sprite sheet by treating each sprite as an animation frame. Very interesting!<br />
<br />
So now that you know these three screens and you've brought up the editor, it's time to load the sprite sheet.<br />
<br />
Right-click on the Animation frames screen and select Import frames and then From sprite strip....<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WJa5xos8HUHBgy4uislKoWQGVjmoQv7sH_nLmFgO7JzEJr2hf8cGaIDSmT_4S-ArU60nNbkddGjgJboMw1GhWuOaijZkYFY92V-af5QAOROOAA46r_WlEIzdDwWwRGNHlhjmZURg0mI/s1600/edit+screen+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WJa5xos8HUHBgy4uislKoWQGVjmoQv7sH_nLmFgO7JzEJr2hf8cGaIDSmT_4S-ArU60nNbkddGjgJboMw1GhWuOaijZkYFY92V-af5QAOROOAA46r_WlEIzdDwWwRGNHlhjmZURg0mI/s1600/edit+screen+4.png" height="151" width="400" /></a></div>
<br />
Construct 2 will load the sprite sheet and attempt to figure out how the sprites are arranged. Sometimes it does and sometimes it doesn't. In my case it didn't. I just got this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiziZXSfigvv10qXerqUiuCb7l3fzORX7UCCl5pJwnP3I7R1ynXbdYAfXhNo2EeTDAuWdWXSaSTK6SjJAtR6w8yxPYQ5MWZ1_T8ioVG8MlT1OIritSvy0iJbyPGHjyu93YkuzVec2fTLZo/s1600/edit+screen+5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiziZXSfigvv10qXerqUiuCb7l3fzORX7UCCl5pJwnP3I7R1ynXbdYAfXhNo2EeTDAuWdWXSaSTK6SjJAtR6w8yxPYQ5MWZ1_T8ioVG8MlT1OIritSvy0iJbyPGHjyu93YkuzVec2fTLZo/s1600/edit+screen+5.png" /></a></div>
<br />
Well, no problem. Just tell Construct 2 how the sprites are laid out inside the sprite sheet. I inserted 7 into the horizontal cells and 7 into the vertical cells. I said OK.<br />
<br />
When I do that, the sprites are arranged into 49 numbered parts. Here is what it now looks like in the Animation frames screen:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kvJIODUuuKrEceuV6s5gNyHavkGPQM54QyPB3-sdFLrNWKKjPJP6w82Ud4zZTqEB8aOBKZNozwM-KWo7PLQ06ESq66hh0hTPplr4Ny9mON3BFKIioT6zEA2Kj8KA1Fg5w4Tzn2wyP4E/s1600/edit+screen+6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kvJIODUuuKrEceuV6s5gNyHavkGPQM54QyPB3-sdFLrNWKKjPJP6w82Ud4zZTqEB8aOBKZNozwM-KWo7PLQ06ESq66hh0hTPplr4Ny9mON3BFKIioT6zEA2Kj8KA1Fg5w4Tzn2wyP4E/s1600/edit+screen+6.png" height="153" width="400" /></a></div>
<br />
Right-click on the first sprite (blank) and delete it. Your sprites are now numbered 1-49. We need to do two more steps before we are ready to blast Kenney's sprites onto the Layout.<br />
<br />
<h3>
Step 5 - Remove White Space</h3>
If you look very carefully, you'll see that Kenney left a tiny bit of space between each sprite. You need to remove this so the sprites join up perfectly with no gaps. Other sprite sheets have the sprites flush, but we've got Kenney and the price is right - free!<br />
<br />
Luckily for us all, Construct 2 thought of this and has a way to automatically remove all the white space. Here's what you do.<br />
<br />
Go to the main Image editor window. You should see something like this, with the first sprite in the center.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdklhvTw709zSx9A7HNjLisZIkUYrSATGXMprSg70r9kq849pepYubHRyql4zMFHMqFDRb2WaaDEVOaL_8bnNCgqME7xdF-M_-unN9Hd7x52oc8_1RzSUiskKb21tL4EI7Tklt76KY04/s1600/edit+screen+7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdklhvTw709zSx9A7HNjLisZIkUYrSATGXMprSg70r9kq849pepYubHRyql4zMFHMqFDRb2WaaDEVOaL_8bnNCgqME7xdF-M_-unN9Hd7x52oc8_1RzSUiskKb21tL4EI7Tklt76KY04/s1600/edit+screen+7.png" height="303" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Near the upper-middle you'll see a button that looks like a little target. Counting from the right, it's the sixth one over. Hover over it and it will say Crop transparent edges. Hold shift to crop all of the 49 images. After a minute, the extra white space is gone.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
There's a lot of smarts behind Construct 2, which is why it is cooler than any other game engine. But there's one more prep step to go!</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<h3 class="separator" style="clear: both; text-align: left;">
Step 6 - Resize the Sprites</h3>
<div class="separator" style="clear: both; text-align: left;">
Kenney's sprites are 74x74 pixels. Why? Who knows. Maybe it's because he's from the Netherlands. Doesn't matter. We want our sprites to be 32x32. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Once again, Construct 2 to the rescue. Right to the left of the button that you used to remove extra white space is the Resize button. Click on it and you'll get a little window.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDfkkxtY1_1YhiMOOCL5EReqS04o91RJyoflTxD6Od9djk4P0GXJWkbFjatwD1Llw4o_dqfQ_1PB2w5V2y6DPzJwjshOPEg5Vn-rMhpiJmNI1nPvCMVQOoKv8xcb5ak-JdIUK7QkLxFo8/s1600/edit+screen+8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDfkkxtY1_1YhiMOOCL5EReqS04o91RJyoflTxD6Od9djk4P0GXJWkbFjatwD1Llw4o_dqfQ_1PB2w5V2y6DPzJwjshOPEg5Vn-rMhpiJmNI1nPvCMVQOoKv8xcb5ak-JdIUK7QkLxFo8/s1600/edit+screen+8.png" height="272" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
You want to make some changes. The first change is to put 32 for the Width (pixels) and 32 for the Height (pixels). Then click the box to Apply to whole animation. And keep the Stretch Image choice the same.<br />
<br />
When you press okay, there will be a pause and the sprites will all shrink to 32x32!<br />
<h3>
Step 7 - Place the Sprite Objects</h3>
I covered this part in the last tutorial. Essentially you just close the editor to place your first sprite object.<br />
<br />
You can click and drag on it, taking advantage of the grid. This is image#0, but you might get bored with that later.<br />
<br />
You can copy a sprite object by just clicking on it, pressing control, and then dragging it. You'll be dragging a copy and when you let go, you have a new copy of the sprite. It is still image#0, but you can change that.<br />
<br />
If you click on the sprite object, over to the left, you'll see the properties of the sprite object.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3__MMPKq8RQdk065HpUoQXGmkCg2wFqbaVpV0yfEPHYA5BsVPGfkSWkk9aRqbnSnDP3Di7stkwuhfuT6zVW-vtI0qKBIu2IO5Ch5xFCGzn47BOGgtoGKKd7NGqjen1UXz4sds8ctamg/s1600/edit+screen+9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3__MMPKq8RQdk065HpUoQXGmkCg2wFqbaVpV0yfEPHYA5BsVPGfkSWkk9aRqbnSnDP3Di7stkwuhfuT6zVW-vtI0qKBIu2IO5Ch5xFCGzn47BOGgtoGKKd7NGqjen1UXz4sds8ctamg/s1600/edit+screen+9.png" height="275" width="400" /></a></div>
You'll see that the initial frame is 0, but you can choose from any of the 49 images. Let's make it 11, which is a cherry!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRQoIIFRqcJB18QYYYgDZh1sPTkrGGXLN7QnJjiEWlPhEF8Eq5CwJgiFW5CeS94_ShY4MhHqK53KdnGxRbViK7JjRNsspcjXen0uLzfrNS95qUdAtZbDhR_IcqaI0ZzPCggwLi5yyFUc/s1600/edit+screen+10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRQoIIFRqcJB18QYYYgDZh1sPTkrGGXLN7QnJjiEWlPhEF8Eq5CwJgiFW5CeS94_ShY4MhHqK53KdnGxRbViK7JjRNsspcjXen0uLzfrNS95qUdAtZbDhR_IcqaI0ZzPCggwLi5yyFUc/s1600/edit+screen+10.png" /></a></div>
If you can't remember what frames correspond to which images, just double click on an object on the screen and the Edit Image windows will come up. You might want to even print them out so you can make really cool worlds by combining the individual sprites.<br />
<h3>
Next</h3>
I'll be getting back to reviewing some Firefox OS games from the Marketplace, working a bit more to improve some code I wrote for the same tutorial as I improved just now, checking to see if the Firefox OS build process has changes, seeing if I can upgrade my phones, and beginning to work on a real role-playing and/or puzzle game.<br />
<br />
I've done enough with Construct 2 for now and I'm eager to get back to native HTMl5. Especially the siren song of SVG, and the cool things that only it can do in a web page. <br />
<br />
Until then, stay tuned but not iTuned!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-42950910119482907052014-09-07T23:05:00.000-07:002014-09-07T23:05:09.072-07:00Construct 2 Game Development by Example (Book Review)I've been on an extended vacation traveling around the country, visiting old friends, and thinking what I want to do next with this blog. I've written more than 100 posts and published a 400 page Kindle book on Amazon, all focused on Firefox OS.<br />
<br />
Well, I'm back, but I'm going to go away for another month. However, I just wanted to review an important book on Construct 2. As you know, I've written several posts on Construct 2 because it is an ideal quick way to write games for Firefox OS without a lot of coding. Drag and drop, fill in a few forms, and you're game is ready for the Marketplace.<br />
<br />
However, there has only been one book on Construct 2, <i>HTML5 Game Development from the Ground Up with Construct 2</i>, by Roberto Dillon, published by CRC Press. I've read it but I could never wrap my head around it. It might be because the book covers making odd games that don't really connect. I feel like the author had never made games and the book just seems slow. That's not very analytical, but I just haven't been able to get into it. I find I just don't want to spend the time analyzing why a book doesn't work. One fact that has bothered me is that the version that they provided for Anazon Kindle doesn't navigate very well. It reads more like a PDF. Ugh!<br />
<br />
And there's one other book that is cool, called <i>Construct Game Development: Beginner's Guide</i>, by Daven Bigelow, published by Packt Publishing. It looks very cool, but unfortunately covers the original Construct Classic. Unfortunate because the creators have moved on and Construct 2 is the drag-and-drop HTML5 game engine you want to use. Construct Classic was focused on DirectX but the creators wisely moved on to HTML5, allowing you to produce games that can run on not just Windows, but a big list of other platforms. How big? Would you believe: HTML5 for any Web browser, Wii U, iOS, Android, Windows 8 & Windows RT, Windows Phone 8, Windows Desktop, Mac Desktop, Linux Desktop, Blackberry 10, Firefox OS Marketplace (yay!), Tizen, Facebook, Chrome Web Store, and Amazon Appstore.<br />
<br />
Lucky for the world, Packt Publishing decided to put out a book on Construct 2 and they chose a great author to do it; John Bura. The book is <i>Construct 2 Game Development by Example</i> and it just came out in June. For some reason, Packt asked me to review it and they sent me a free copy, so take that as a disclaimer. But I would happily pay $21.60 for the eBook from Packt or even happier to pay Amazon $16.54 for the eBook and $39.87 for the paperback from Amazon.<br />
<br />
<div class="ci-h">
Why am I pleased to see that the author is John Bura? Well, John is one of those amazingly busy guys who do all kinds of things. I know of him from his amazing videos on Udemy (<a href="http://www.udemy.com/">http://www.udemy.com</a>) and in particular, a video class called <a href="https://www.udemy.com/learn-how-to-make-html-5-facebook-chrome-store-games-and-more/">Learn to Make HTML5 , Facebook, Chrome Store games and more!</a> The class is an amazing 31 hours of lecture broken out into 432 segments. Most of the class covers using Construct 2 but also includes 40 lectures on using FL Studio to make Mega Man game music and even a sequence on Game Salad for iOS. The class is $199 right now but is often discounted and John has a lot of other classes on various game programming aspects.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
So when he writes a book, I'm excited because I know that he understands Construct 2 well. I never felt that way about the Roberto Dillon book, but after watching hours of fun and interesting video, I know that he knows! And anyone who likes FL Studio is cool as well. The two products (Construct 2 and FL Studio) are similar in that they help you create things fast.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
So what's in Mr. Bura's book? Here's the outline:</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Chapter 1 - Getting Started with Construct 2</div>
<div class="ci-h">
Chapter 2 - Inputs and Controls</div>
<div class="ci-h">
Chapter 3 - Variables and Arrays</div>
<div class="ci-h">
Chapter 4 - Game Mechanics</div>
<div class="ci-h">
Chapter 5 - Making a Simple Shooter</div>
<div class="ci-h">
Chapter 6 - Making a Tower Defense Game</div>
<div class="ci-h">
Chapter 7 - Making a Puzzle Physics Game</div>
<div class="ci-h">
Chapter 8 - Exporting Your Game</div>
<div class="ci-h">
Appendix - Where to Go from Here</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Keep in mind that this book is clearly aimed at beginners. If you are an advanced programmer who likes to code by hand, you probably won't read this book. Most of my posts are advanced HTML5 programming based, but I've come to realize that is Firefox OS (and HTML5) is to grow, people who are artists and creatives need to be able to sit down and make a game. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Here's a quick breakdown by chapter:</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Chapter 1 - Getting Started with Construct 2</h3>
<div class="ci-h">
This is a brief chapter that introduces you to Construct and tells you how to download it. If you need more information, the Construct 2 site is extremely helpful at <a href="http://www.scirra.com/">http://www.scirra.com</a>. The only thing might have mentioned a bit more about is the licensing terms of Free, Personal, and Business, but you can read about it at <a href="https://www.scirra.com/store/construct-2">https://www.scirra.com/store/construct-2</a>. I think it's always good to know that you can use Construct 2 as a free version but are limited to a fixed number of events and a few other things. I'm assuming that all the examples work fine in the free version. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Bura doesn't give you a step-by-step guide to installation, but that's maybe okay. It's pretty easy! And you can find it at the Construct 2 site at <a href="https://www.scirra.com/manual/2/installing">https://www.scirra.com/manual/2/installing</a></div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
The rest of the chapter covers basic concepts of how Construct 2 works and will get you comfortable without actually having to do anything.</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Chapter 2 - Inputs and Controls</h3>
<div class="ci-h">
Most programming books would start Chapter 2 with some game programming, something like paddleball. However, John wisely walks you through the concepts and issues of using a keyboard, mouse, and touch for games. This is something that often just gets thrown in, but it is the fundamental part of every game. If you don't have a control of some kind (keyboard, mouse, or touch), you don't have a game. I particularly like him including touch, which is necessary for mobile gaming like Firefox OS. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
The chapter might be confusing for some because he doesn't use real code examples and doesn't show you how to set up a project so you can test the small examples. But if you read it just for the concepts, you're okay. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Often readers want to just get started making things, but I like the idea of talking about some basics before you start programming, even when the programming is easier, such as Construct 2.</div>
<h3 class="ci-h">
Chapter 3 - Variables and Arrays</h3>
<div class="ci-h">
This is a straight-forward chapter that you may think you want to skip if you've had any programming. But keep in mind two things. Not everyone may know about variables and arrays because Construct 2 is aimed at true beginners. And secondly, Construct 2 handles variables and arrays a little bit differently because it is not a straight programming language. You can create lots of games without understanding variables and even more without arrays. And I've noticed over the two years I've been playing with Construct 2 that one of the frequent questions on the excellent Construct 2 forum is "How do arrays work?" So give it a read even if you are a rock star programmer.</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Chapter 4 - Game Mechanics</h3>
<div class="ci-h">
John defines game mechanics as "... how a game works and how a game feels." Again, this book is aimed at beginners and people who are non-programmers (and people like me who are in a hurry). He lists a few game mechanics:</div>
<div class="ci-h">
</div>
<ul>
<li>Running </li>
<li>Jumping </li>
<li>Score keeping </li>
<li>Shooting </li>
<li>Lives </li>
<li>Health </li>
<li>Physics</li>
</ul>
<div class="ci-h">
You get the idea. Mechanics are something people often know, but I personally love looking at game mechanics and I might even write a book on it using Construct 2 for examples! One of my favorite places for game mechanics actually covers board games, but it is really deep (but that makes sense since board games have been around a long, long time). If you want to see amazing lists of abstract game mechanics, check out 51 basic mechanics at <a href="http://boardgamegeek.com/browse/boardgamemechanic">http://boardgamegeek.com/browse/boardgamemechanic</a>. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Anyway, John talks about game mechanics for video games and also touches on emotions, which is good because that's what games are really about. Now I would write a whole book about it, but not for beginners, but John covers the basics. After these first four chapters, you will be ready to create a game. </div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Chapter 5 - Making a Simple Shooter</h3>
<div class="ci-h">
I hope all readers were patient and read through the first four chapters. If they did, they will be well prepared for making a real game. John doesn't skimp here. This is an excellent, detailed walkthrough on how to spawn enemies, shoot them with bullets, and survive! The explanation is crystal clear and very good. He covers keyboard and mouse, but not touch. This is a very simple game and the graphics are just circles and squares, but you can definitely take what he's given you and make shooting games. </div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Chapter 6 - Making a Tower Defense Game</h3>
<div class="ci-h">
This chapter would make me buy the book even if I didn't know what Construct 2 was. There are lots of books that include details on how to make a shooter, but I haven't seen any that explain how to do Tower Defense. That might be because Tower Defense is a newer type of game. John suggests that you Google "Tower Defense" if you don't know what that is, and there are lots of neat Tower Defense games you can play for free. Essentially you have bad guys invading your land and you set up towers to defend your land. This is more of a strategy game than an action game, but each round is quick and its fun to see if your defenses can stop the enemy.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
John shows you how to use touch for this game and that is very useful. Again, he does a great job of walking you through the many steps needed to make a more complex game, but I never felt lost while he was doing that, and that may because he never goes more than a short paragraph without showing you a screenshot of what you must do for that step. A book like this is heavy on the screenshots, but that's what you need because Construct 2 is primarily visual. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
For example, I wrote a recent post on how to do a very simple platform game using Construct 2 and it used almost 30 screenshots! That's a lot and I'm surprised Google didn't complain. You can read my post at <a href="http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html">http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html</a>. So I am saying that he did a good job because it's hard to juggle all those screenshots!</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Definitely I am going to follow his chapter and see if I can make a nifty Tower Defense game. But there is another game to come.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Chapter 7 - Making a Puzzle Physics Game</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
One of the things that sets Construct 2 ahead of just coding it yourself is that it has a lot of physics you can use. What is physics? It's giving each object properties that correspond to objects in the real world. If a ball hits a tall block, the ball will bounce off, and the block will start to shake. If you hit it hard enough, the block will fall over. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
One of the reasons that Angry Birds was so popular was that it was one of the first games that used physics in a really great way. It was fun to shoot birds at the blocky buildings and see if you could do it in just the right way to make the blocks fall and crush the pigs. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Well, this chapter is how to do something like Angry Birds. No birds, no pigs, but you have a cannon and you have blocks that you will shoot at. And here's a picture from the book to give you the idea:</div>
<div class="ci-h">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Z5bsQL3vGod_kdJ9HLWzSFI6iz0D1OUct0DZGXvCWldtpx_OhfwD827nQwu2G9DCw4a9o7HhPTsB-i23RMvqTRR0DIG5yqivCLPPgCTaE8NI2BLriIWNGtv6uwfK2UYeQoQjA65_UDs/s1600/Construct+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Z5bsQL3vGod_kdJ9HLWzSFI6iz0D1OUct0DZGXvCWldtpx_OhfwD827nQwu2G9DCw4a9o7HhPTsB-i23RMvqTRR0DIG5yqivCLPPgCTaE8NI2BLriIWNGtv6uwfK2UYeQoQjA65_UDs/s1600/Construct+2.PNG" height="290" width="400" /></a></div>
<div class="ci-h">
He adds a goal ball on top of the towers that you want to fall down when your cannon ball hits the towers:</div>
<div class="ci-h">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrC-CzVqXQMbI1ByBBilal8AU72hcKmybxqqvFvxfKazf7zMjoXIznmJfh6GpCGAEfwvF5AKrosJGWKCL5QEgKWBlDq0FxMJfB2W2M5cnaM0UiP8DD1KaahSBh86jbDhCyrqKojq2VXqk/s1600/goal+ball.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrC-CzVqXQMbI1ByBBilal8AU72hcKmybxqqvFvxfKazf7zMjoXIznmJfh6GpCGAEfwvF5AKrosJGWKCL5QEgKWBlDq0FxMJfB2W2M5cnaM0UiP8DD1KaahSBh86jbDhCyrqKojq2VXqk/s1600/goal+ball.PNG" height="333" width="400" /></a></div>
<div class="ci-h">
</div>
<div class="ci-h">
Pretty cool, huh? Like I said earlier, I've seen a lot of shooter coverage in various game programming books (I've probably bought them all), but I have never seen Tower Defense or Angry Birds.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
The reason for this is that programming these examples would take hundreds of lines of code but Construct 2 can do it with some drag and drop, a few variables, add this and that, and you're done. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
So there's only three games here, but games two and three are really good examples and definitely not trivial. I can't emphasize enough how well John Bura explains each step as you go along. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Again, I would never think of creating an Angry Birds type of game but I might now. Of course there are a thousand variations but the physics are there for the taking. Annoyed Protozoa, anyone? </div>
<h3 class="ci-h">
Chapter 8 - Exporting Your Game</h3>
<div class="ci-h">
As I explained earlier in this post, Construct 2 can create games for 16 platforms and the number is growing all the time. Right now the export for Firefox OS is perfect and the export for iOS and Android needs a little work, but the rest are pretty good. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Chapter 8 covers exporting to several platforms but some of what he's written has already changed as Construct 2 and the platforms change. But this chapter will give you a glimpse on what to do and where. Construct 2 has great tutorials for exporting to each platform and the tutorials are updated frequently and written by the Construct 2 gurus.</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
Appendix - Where to Go From Here</h3>
<div class="ci-h">
The appendix is simply a short talk on how to think about game design and what to do next. No biggy but certainly worth a quick glance. He does give the valuable advice to work on small games that you can do instead of trying to compete with the big game companies. He talks a little bit about his own game company (Mammoth Interactive) and closes with some good tips.</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
My Summary</h3>
<div class="ci-h">
I can really recommend this book to anyone who wants to learn Construct 2 quickly and easily. The flow of ideas is good, the games are actually ones you might want to create and expand upon. The book is reasonably priced and you won't be sorry you bought it!</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
I won't rate this book, I'll just say buy it. <i>Recommended! </i>You can get more information about it from the wonderful folks at Packt at <a href="https://www.packtpub.com/game-development/construct-2-game-development-example">https://www.packtpub.com/game-development/construct-2-game-development-example</a>.</div>
<div class="ci-h">
</div>
<h3 class="ci-h">
What's Next for Bob?</h3>
<div class="ci-h">
I'm heading out in search of a few more long-lost friends and should be back at blog-making by October 1st. Unless, according to Fred Hoyle, <a href="http://en.wikipedia.org/wiki/October_the_First_Is_Too_Late">October the First Is Too Late</a>. But around then. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
What's better than obscure old science fiction titles? How about <i>The Gods Hate Kansas?</i> </div>
<div class="ci-h">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihETyrzCKcxLhf9KK-NUhAebL_HmCFBkyRDMdU1xIKh7RGpILwv4UsOX7GbTCWQKtY5Ecdsvx7wxPg8EisdfJH7WZExUD5-ULRwQTbsX4Q-tdpoKcizVuS_wdNETKGChNSw6L160beZZQ/s1600/(Startling1941KansasOct.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihETyrzCKcxLhf9KK-NUhAebL_HmCFBkyRDMdU1xIKh7RGpILwv4UsOX7GbTCWQKtY5Ecdsvx7wxPg8EisdfJH7WZExUD5-ULRwQTbsX4Q-tdpoKcizVuS_wdNETKGChNSw6L160beZZQ/s1600/(Startling1941KansasOct.JPG" height="400" width="266" /></a></div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Which later had a paper back edition in 1964. But I digress.</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
I'm thinking about doing two different things:</div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
1. Write a real-live RPG in HTML5 native code for the Firefox OS tablet and then use "Responsive Game Design" to shrink it down to a few different Firefox OS phones. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
2 . Start working on a Construct 2 game mechanics series. There's a lot of interesting stuff in Construct 2 that could use some detailed explanation, especially in terms of what techniques work most efficiently. </div>
<div class="ci-h">
<br /></div>
<div class="ci-h">
Until then, stay tuned, but not iTuned! </div>
<div class="ci-h">
<br /></div>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-20194378396494099172014-06-27T14:51:00.002-07:002014-06-28T00:13:39.023-07:00Freaking Math! (Game Review)Here's a fast-paced game from Hungary that will force you to wake up!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDj-ApN93pRCbnph2I0AUy-67MrzAeNTxrBNsvXOerLPrdVMPk0X2Pc0R9Zz8AD26rGaZIlhF9l7I6qJNOKipMYLXkJ0agrzrqkIcBxPDUD78hWSSqaqfOjekEvRZJZsrsRweVYZEsKGs/s1600/05+Opening+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDj-ApN93pRCbnph2I0AUy-67MrzAeNTxrBNsvXOerLPrdVMPk0X2Pc0R9Zz8AD26rGaZIlhF9l7I6qJNOKipMYLXkJ0agrzrqkIcBxPDUD78hWSSqaqfOjekEvRZJZsrsRweVYZEsKGs/s1600/05+Opening+Screen.png" height="400" width="240" /></a></div>
<br />
This is one of the simplest games I've seen in the Marketplace, but it is very satisfying and forces you to react quickly. The premise of the game is explained when you start:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47HEXdsQsBAAbNOAmHO5UrNyohrt6kUZ30hWuR2G-77Avs342TZsHCGY617hb7pcMXuLgPIs0wqlgwBexSCuC1zlB5wuHegmd_Vid1IOxs0nSFy_rtO26yX2W6IUbu2H6l5m-bQ8O1CQ/s1600/06+fail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47HEXdsQsBAAbNOAmHO5UrNyohrt6kUZ30hWuR2G-77Avs342TZsHCGY617hb7pcMXuLgPIs0wqlgwBexSCuC1zlB5wuHegmd_Vid1IOxs0nSFy_rtO26yX2W6IUbu2H6l5m-bQ8O1CQ/s1600/06+fail.png" height="400" width="240" /></a></div>
<br />
You are shown a simple math expression and you must decide is the answer right or wrong.<br />
<br />
Well, is 1 + 1 = 3 or not? If you think about it, of course it is wrong. But can you react in one-and-a-half seconds to click on the X button?<br />
<br />
Maybe, and maybe not. I seem to remember that the human reaction time in general is 2.2 seconds, but if you are hyper-alert, you can do it faster. But how long ago did you learn your math tables?<br />
<br />
If you get the right answer, you must instantly do another one, and another, until you wait too long. Each time you fail, you'll get a score. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXn3rOtdSupcwJqzfKRVgYDgumjCoWhPKaGS_pC1AlnRGHaml0TpM26VuAxa1Ch93R8xihU8bjjKZPL0wlLZD3IK75GecQcwx39gFJzX8JeQ6JwL7tyxf2I8Dwem2FFmLYh8jDpyTjEkM/s1600/07+Stats.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXn3rOtdSupcwJqzfKRVgYDgumjCoWhPKaGS_pC1AlnRGHaml0TpM26VuAxa1Ch93R8xihU8bjjKZPL0wlLZD3IK75GecQcwx39gFJzX8JeQ6JwL7tyxf2I8Dwem2FFmLYh8jDpyTjEkM/s1600/07+Stats.png" height="400" width="240" /></a></div>
<br />
You can see that my high score is two right answers but my last score was only one! But keep at it. With a little practice, I did get better.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWHsAxlAcuqVJrLd_agRrhvvxPqOhEfPkC4ocmFUDo_ma0YXUZ5DRcy5VEwzNPFMWF2dASCJykP9rZdBMhCu_q7crF3VPOeQGoAg-7gj8aSSCh7yDJUhP2zv2W-NZuqgfVUYqmf6XmXE/s1600/08+Better!.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWHsAxlAcuqVJrLd_agRrhvvxPqOhEfPkC4ocmFUDo_ma0YXUZ5DRcy5VEwzNPFMWF2dASCJykP9rZdBMhCu_q7crF3VPOeQGoAg-7gj8aSSCh7yDJUhP2zv2W-NZuqgfVUYqmf6XmXE/s1600/08+Better!.png" height="400" width="240" /></a></div>
<br />
The game creator is Adam Balogh of Hungary and he has a newer version of the game that does division and multiplication. Unfortunately I can't buy it!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSPzXrjs4XZRerBFFtZ30S3Ko67K1MBDlwaA_h80MDOXZiSGEbSyv34xRYcTqGycRMT2qqSxyK12vTyEUCQ8CxZC404ARsfMbHZrdSjZPR8D4dUoMOUuTSZp7ciiIMYf6TZ9jt0Ey_EA/s1600/03+Cant+buy+freaking+math+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSPzXrjs4XZRerBFFtZ30S3Ko67K1MBDlwaA_h80MDOXZiSGEbSyv34xRYcTqGycRMT2qqSxyK12vTyEUCQ8CxZC404ARsfMbHZrdSjZPR8D4dUoMOUuTSZp7ciiIMYf6TZ9jt0Ey_EA/s1600/03+Cant+buy+freaking+math+2.png" height="400" width="240" /></a></div>
<br />
I'm fresh out of forints anyway.<br />
<br />
But this is a fun little game<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Puzzle<br />
Score: 4 (out of 5)<br />
Tested on: ZTE Open C<br />
Get it at: Firefox Marketplace<br />
Developer: Adam Balogh<br />
<a href="https://marketplace.firefox.com/app/freakingmath/">https://marketplace.firefox.com/app/freakingmath/</a><br />
<br />
<h3>
<b>Announcement One - Thomas Palef has written a book!</b></h3>
Thomas Palef has been amazing us all by writing one game a week. You can read about it at <a href="http://www.lessmilk.com/">http://www.lessmilk.com/</a>. Part of his secret (aside from being just brilliant) is that he uses an HTML5 library called Phaser. You can read all about Phaser at <a href="http://phaser.io/">http://phaser.io/</a>. But Phaser is a little hard to grasp how the pieces fit together, even though it seems like it will help you write HTML5 games more efficiently.<br />
<br />
Well, up steps Thomas Palef, who will shortly be publishing not only a book, but will include complete games with the source code. You can read about it at <a href="http://www.lessmilk.com/phaser-book/">http://www.lessmilk.com/phaser-book/</a> but he sent out an email to his subscribers with more data.<br />
<br />
<blockquote class="tr_bq">
"The book will focus on building a full featured game from scratch that works on desktop and mobile devices. You will control a little guy in a blue world, trying to collect coins while avoiding enemies. <br />
<br />
"Here are some of the things we will cover while building the game step by step: sprites, labels, groups, states, animations, particles, arcade physics, local storage, tilemaps, game scaling, touch inputs, and more.<br />
<br />
"With all this new knowledge you will be able to create your own 2D games in HTML5. <br />
<br />
"What You Will Get<br />
<br />
"I created 3 types of content to help you learn the Phaser framework:<br />
<br />
"- The book. The step-by-step guide to Phaser. It's 125 page-long, DRM-free, and available in 3 formats: pdf, epub, mobi. </blockquote>
<blockquote class="tr_bq">
"- Code. Some resources to help you build your own games faster: the source code of every chapters of the book, a Phaser cheat sheet, an empty game template, and other things. </blockquote>
<blockquote class="tr_bq">
"- Games. I built 3 full featured games with comments that you can learn from: a space shooter, a match-3, and an infinite runner."</blockquote>
<div class="iw">
<span class="gD" name="Thomas Palef">I'm definitely buying this even if I have to go without lunch for a few weeks!</span></div>
<div class="iw">
<span class="gD" name="Thomas Palef"><br /></span></div>
<div class="iw">
<span class="gD" name="Thomas Palef">Andrzej Mazur (Enclave Games) has written several games in Phaser that run well in Firefox OS, so I think that Phaser might be very useful to Firefox OS folk. I'll investigate it when I get back.</span><br />
</div>
<div class="iw">
<span class="gD" name="Thomas Palef"></span></div>
<h3 class="iw">
<b><span class="gD" name="Thomas Palef">Announcement Two - I'm Going on Vacation</span></b></h3>
<div class="iw">
<span class="gD" name="Thomas Palef"></span></div>
<div class="iw">
<span class="gD" name="Thomas Palef">Yes, I know I'm on a permanent vacation, but I'm taking time off from this blog to travel around the country and visit some old friends, and I won't be online, and even when I am, I won't be typing!. So I won't be blogging most of the summer. But I'll be back and I'm sure there will be fabulous things to write about. I have a big list of topics, but they will have to wait. </span></div>
<div class="iw">
<br /></div>
<div class="iw">
<span class="gD" name="Thomas Palef">So come back in September and until then, stay tuned, but not iTuned! </span></div>
<div class="iw">
<span class="gD" name="Thomas Palef"><br /></span></div>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-67558063196464052402014-06-23T18:53:00.001-07:002014-06-23T18:53:44.327-07:00News Flash! Firefox Has In-Browser IDE (Game Programming)By an interesting coincidence, I've been helping a friend set up the Android Development environment and it is a pain! But not FirefoxOS! It is really easy to develop for FirefoxOS ... but it just got a lot easier!<br />
<br />
I've suffered through all kinds of hideous development environments, and most of them are a pain because they 're designed for developers who supposedly are willing to take any kind of abuse. "Are you a masochist? (pause) Well, good, then you'll be right at home with Windows, Android, Apple, and so on."<br />
<br />
Firefox OS was great because you only had to edit file in your text editor and then upload them to the browser (with a few plugins). Well, today is history. The latest Nightly build came out and it has an "Integrated Development Environment." What that means is that once you have Nightly, you're done! No more plugins, no more text editor. I'll miss you, Notepad++!<br />
<br />
So, here's what you are really, really going to want to do and never look back.<br />
<br />
<b>Install Nightly</b><br />
<br />
You already are doing this, right? Just install Nightly and have it update itself every night. Get it at <a href="http://nightly.mozilla.org/">http://nightly.mozilla.org/</a>. You know you want to!<br />
<br />
<b>Enable the New App Manager</b><br />
<br />
Once you have the latest Nightly installed, type this in the search window:<br />
<br />
<blockquote class="tr_bq">
<b><span style="font-family: "Courier New",Courier,monospace;">about:config</span></b></blockquote>
<br />
No spaces before or after the colon. You'll get a warning.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81T1jq4r_8_aL1ndTHK6KZWQQU7oU4i5zpAGnFdCd3sx4DD3WTIA95Drge5ZbajPVOVCRR7DnPu6dzy51tH6A588Nn-7rfU-cFVkUayjlronXbzxYAFr1YfOVdFDM36Tz6CYyY2-oITc/s1600/01+about+config.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81T1jq4r_8_aL1ndTHK6KZWQQU7oU4i5zpAGnFdCd3sx4DD3WTIA95Drge5ZbajPVOVCRR7DnPu6dzy51tH6A588Nn-7rfU-cFVkUayjlronXbzxYAFr1YfOVdFDM36Tz6CYyY2-oITc/s1600/01+about+config.PNG" height="116" width="400" /></a></div>
<br />
Ignore it. You're living on the cutting edge, right? Maybe some of the settings could break your windows, but this just will allow the new IDE to come to life.<br />
<br />
Once you promise to be careful, you'll see a giant list of settings that you can change. Scroll down until you see<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxQy3Lt5OuoHTpdN-7UxhZRyruezKeq6T439VMlGlccI1Tt-_CWLVNV_JE-2IC0q0CJzEfBcikjIKQgtY6OVkuFQmFwNZGCFHw2imdbCJ5495K7i_vflq8cW6LY_giQvsQ8UGMAILDFs/s1600/02+enable+webide.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxQy3Lt5OuoHTpdN-7UxhZRyruezKeq6T439VMlGlccI1Tt-_CWLVNV_JE-2IC0q0CJzEfBcikjIKQgtY6OVkuFQmFwNZGCFHw2imdbCJ5495K7i_vflq8cW6LY_giQvsQ8UGMAILDFs/s1600/02+enable+webide.PNG" height="68" width="400" /></a></div>
<br />
Yes, I know that webide sounds like something spiders clean their houses with, but it really is WebIDE (Web Integrated Development Environment). Right click on<br />
<br />
<blockquote class="tr_bq">
<b><span style="font-family: "Courier New",Courier,monospace;">devtools.webide.enabled</span></b></blockquote>
<br />
and when a little menu comes up, select true. Nothing happens right away, but the magic is about to happen.<br />
<br />
Now go to your menu and select <b>Developer </b>and then <b>App Manager</b>. Yes, this is still called App Manager but the name may change to WebIDE.<br />
<br />
And the App Manager has changed ... a lot!<br />
<br />
<b>Meet the New App Manager, Not the Same as the old App Manager</b><br />
<br />
Here it is:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D_urcJUaV7T0xHJuUukca4cMz1h-uxIi-798zNNbbGlRSufqkJNXg-zizkDNbtmT1aC8gb7R3LeYU23MGr7MtiLU0qs6ytEqsJXuK60W6oopo7ECDwKTB0l7UQN13TAdGqL9zZIxCWo/s1600/03+New+App+Manager.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D_urcJUaV7T0xHJuUukca4cMz1h-uxIi-798zNNbbGlRSufqkJNXg-zizkDNbtmT1aC8gb7R3LeYU23MGr7MtiLU0qs6ytEqsJXuK60W6oopo7ECDwKTB0l7UQN13TAdGqL9zZIxCWo/s1600/03+New+App+Manager.PNG" height="358" width="400" /></a></div>
<br />
It looks simple but it is a lot more powerful than before.<br />
<br />
The first thing I did was to open one of my packaged apps. How? Maybe it's the little button on the left that invites me to <b>Open App</b>? Yes!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLlFCNRoxaIJkAMeyWdV5rA0SnoD4mE-9Q2x1jeDygL5Q_ZipZNl8FGtw6ewSicKm7n1vKaJwMixI3CrinDyQ5T8mUgRcPnXxM21R9a5F6vwV-HymiboyoyN0PlnFmUml-seBwv4F0_E/s1600/04+Open+Packaged+App.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLlFCNRoxaIJkAMeyWdV5rA0SnoD4mE-9Q2x1jeDygL5Q_ZipZNl8FGtw6ewSicKm7n1vKaJwMixI3CrinDyQ5T8mUgRcPnXxM21R9a5F6vwV-HymiboyoyN0PlnFmUml-seBwv4F0_E/s1600/04+Open+Packaged+App.png" height="358" width="400" /></a></div>
<br />
I have choices and I'm choosing <b>Open Packaged App. </b>I navigate to my app and load it. Without any delay at all, my app is loaded and you can see it. I'm using the simulator here but the same is true with an actual phone. Here's my app:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTdUwL3QUms3JWGZnx-YIkMivZczW-9ygXVgHfKC-jIa16FtgncUGtSni5KbWtfkXRoguNNlLSBpv77y0qnidgm6151koHG-mEfcVhyG1CScFH9X_J3mRdGW_tEEdlyxk69_l3oVfqZA/s1600/05+Packaged+App.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTdUwL3QUms3JWGZnx-YIkMivZczW-9ygXVgHfKC-jIa16FtgncUGtSni5KbWtfkXRoguNNlLSBpv77y0qnidgm6151koHG-mEfcVhyG1CScFH9X_J3mRdGW_tEEdlyxk69_l3oVfqZA/s1600/05+Packaged+App.PNG" height="358" width="400" /></a></div>
<br />
Cool already. It shows me the files in my app on the left and information about my app on the right. This is a simple app I'm rewriting right now to convert it to SVG and incorporate the viewport, so I can see how big an app really is. More about that soon. You'll notice that it is a VALID app by the green button on the right.<br />
<br />
The next thing I want to do it run it, so I go to the <b>View </b>menu and choose <b>Manage Simulators</b>. Why? Well, you get a choice of simulators for the different versions that are supported.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBMXB4RvZtX5eR488Mz_L4bFKRzg4Ohp6T1FIuJG6RmsSiTAHbijkDeYEweATTlBwBo4hR3CPHZAscPxAXqHCvXC1umCyuhnZz45zpZW8C9TpXvp3F2PBS3ur5srE3hbAszngyP_QM0Y/s1600/09+Extra+Components.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBMXB4RvZtX5eR488Mz_L4bFKRzg4Ohp6T1FIuJG6RmsSiTAHbijkDeYEweATTlBwBo4hR3CPHZAscPxAXqHCvXC1umCyuhnZz45zpZW8C9TpXvp3F2PBS3ur5srE3hbAszngyP_QM0Y/s1600/09+Extra+Components.PNG" height="358" width="400" /></a></div>
<br />
This shows you what is installed and what is not. I had the ADB Addon Helper and the OS 1.3 Simulator already installed, but by clicking on the install buttons for the later versions, you can see them too. You'll notice that 1.0, 1.1, and 1.2 are no longer supported.<br />
<br />
So pick the OS version of your choice<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObZOp8f-kZX7CeBMLto69zVz4GGAwCpzZLreeoLaCxPtGdDHStL5-P1xv4-uVXSiyvtuHIoiic74JbR1BtL9wV8C-i6vAbJnRui8rNvHbGv41RRK1cLglkMhZyPFQcOrKyV3i9UVDg_0/s1600/10+Select+Runtime.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObZOp8f-kZX7CeBMLto69zVz4GGAwCpzZLreeoLaCxPtGdDHStL5-P1xv4-uVXSiyvtuHIoiic74JbR1BtL9wV8C-i6vAbJnRui8rNvHbGv41RRK1cLglkMhZyPFQcOrKyV3i9UVDg_0/s1600/10+Select+Runtime.png" height="360" width="400" /></a></div>
<br />
Select a runtime. I selected 1.3 since that was all I had at the moment. It will also show your device if you have it hooked up. Once you've done that, just click on the arrow in the middle to start your app.<br />
<br />
Amazing! As expected, it opens up a separate simulator window and you can see your app running. Here's my app, the one that shows you how large your device (or simulated device) is.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60dd1wiHDHY9x1tbQd0-ENtjftMVwSUX4djzBsDAP7Mpb6FutzEqAnCPqEK7arMMv3DgRfEqMoSH-Shr_YQWD7UjRaElA9SQdG99tQkQN6Pe1Dfu9bBfenbPVDk3W6EmULoSxNAWJKGI/s1600/11+Simulator+in+1.3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60dd1wiHDHY9x1tbQd0-ENtjftMVwSUX4djzBsDAP7Mpb6FutzEqAnCPqEK7arMMv3DgRfEqMoSH-Shr_YQWD7UjRaElA9SQdG99tQkQN6Pe1Dfu9bBfenbPVDk3W6EmULoSxNAWJKGI/s1600/11+Simulator+in+1.3.PNG" height="400" width="236" /></a></div>
<br />
So far, not that special. But it now gets cooler because you can load up other environments. Here I am loading up Firefox OS 2.0. I didn't even know they were that far ahead!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPOj9Rd9SVN9v42X3FeyHnZPS2deqkUj4yub0itx0d_5RRvOVlkVwk_wnLnYI3qeWN8X-KU6LqWFAJHWBFZTk7E_fladDhTH5ledLxNZw1-k11Db7PK5foNumDVN6ThLNJN2YFJnsD2c/s1600/12+Installing+1.4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPOj9Rd9SVN9v42X3FeyHnZPS2deqkUj4yub0itx0d_5RRvOVlkVwk_wnLnYI3qeWN8X-KU6LqWFAJHWBFZTk7E_fladDhTH5ledLxNZw1-k11Db7PK5foNumDVN6ThLNJN2YFJnsD2c/s1600/12+Installing+1.4.png" height="361" width="400" /></a></div>
<br />
Let's see what version 1.4 looks like. (Actually I know because that's what is running on the tablet. But I haven't seen it on a phone-sized window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwc5oatFzFb2ZChgViCXR65sj4IOhTD2nY-DZX94f-Z93Pc_vaMwVV0kHE_wiHoGTCZB9bO6A2oSyyf-xuiLsOZv7ZjaeVMD-y-DBGOWeJoR2P6OGHxk5mYsoi_55O5VL-_5hiyIydec/s1600/13+OS+1.4+is+Flat.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwc5oatFzFb2ZChgViCXR65sj4IOhTD2nY-DZX94f-Z93Pc_vaMwVV0kHE_wiHoGTCZB9bO6A2oSyyf-xuiLsOZv7ZjaeVMD-y-DBGOWeJoR2P6OGHxk5mYsoi_55O5VL-_5hiyIydec/s1600/13+OS+1.4+is+Flat.PNG" height="400" width="245" /></a></div>
<br />
It looks different. This is part of the new school of flat icons. Easier to understand. I like the radio!<br />
<br />
Does my app run in 1.4?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-QbtC85SKUuyyNEwPt2b2XcrlCK0KI15eJtEpeuXJACgxD6bR9bhJKKG4yPOIWos588azzFBiuoP5YLpKEALKtJlrduHiM1ft98aCSu-rukh58aREDCdg_Vvj-IbGlv08_P-xq4oC0s8/s1600/14+Simulator+in+1.4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-QbtC85SKUuyyNEwPt2b2XcrlCK0KI15eJtEpeuXJACgxD6bR9bhJKKG4yPOIWos588azzFBiuoP5YLpKEALKtJlrduHiM1ft98aCSu-rukh58aREDCdg_Vvj-IbGlv08_P-xq4oC0s8/s1600/14+Simulator+in+1.4.PNG" height="400" width="242" /></a></div>
<br />
It looks the same, but the height is slightly different. The outer height is slightly larger because there was a file menu that is now gone. But the inner is still the same.<br />
<br />
Okay, so this is slightly nicer than the old App Manager, but what's the fuss?<br />
<br />
This!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-p8W5Z_k8LjVlfhMdbC256rX2lS_nsIWgE3d1xH1Zf1J_RdJXvZJ9eJmCQ_LCZ6FIWDjVnCjHAlGVNdAgN7i6ocI3R6jZFMSAdOaU7xHux9qney-yvlzS3IypQxq-W7Cp1zUAN0YfGOs/s1600/15+IDE.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-p8W5Z_k8LjVlfhMdbC256rX2lS_nsIWgE3d1xH1Zf1J_RdJXvZJ9eJmCQ_LCZ6FIWDjVnCjHAlGVNdAgN7i6ocI3R6jZFMSAdOaU7xHux9qney-yvlzS3IypQxq-W7Cp1zUAN0YfGOs/s1600/15+IDE.PNG" height="400" width="361" /></a></div>
<br />
If I select one of the files on the left, a text editor pops up. I picked the index.html file because that's where the meat is. Notice that the text is colored nicely.<br />
<br />
I can see my icons even though I can't edit them.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Hg3NV9h-RRZsA2mZFbStnxUxezxPTOWwAxxBdJW7HC4WhCh3MTdjzFhTfQhu-zhyphenhyphenkSucJSAmc5_0Cw6mORG6As984q66u_VyxGWWwX0rVVN-AIdbk3gTeSPS0yLKXRp0M5_9HXwdIow/s1600/16+IDE+Icons.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Hg3NV9h-RRZsA2mZFbStnxUxezxPTOWwAxxBdJW7HC4WhCh3MTdjzFhTfQhu-zhyphenhyphenkSucJSAmc5_0Cw6mORG6As984q66u_VyxGWWwX0rVVN-AIdbk3gTeSPS0yLKXRp0M5_9HXwdIow/s1600/16+IDE+Icons.PNG" height="400" width="361" /></a></div>
<br />
Again, only maybe nicer. But it gets better!<br />
<br />
From the project menu, you can select New App and make it all right there in the browser.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbM8ZUo7GfHbMQQWA8CqBesKMQFO54YLpuTajXGZsG5GDruavAvWcw1YNeNe7-OgBi9ebE4XSDfAd2v4o15vtIYg4QwseVzv-f1HXf9_BkWQSiIQt4nl2FX1seAViM15CaCWHsJpUnb64/s1600/18+New+Project.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbM8ZUo7GfHbMQQWA8CqBesKMQFO54YLpuTajXGZsG5GDruavAvWcw1YNeNe7-OgBi9ebE4XSDfAd2v4o15vtIYg4QwseVzv-f1HXf9_BkWQSiIQt4nl2FX1seAViM15CaCWHsJpUnb64/s1600/18+New+Project.PNG" height="266" width="400" /></a></div>
<br />
You'll be asked what kind of app you want. There will be more choices as time goes on, I'm sure. And here's your new app, ready to be filled with code-delicious stuff.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkh48rhEKu-T-00Ady0Pxf7I__5dfV6byyAfUxL907ccaXDFsrXjRcoxE8UAU5tL-4CYL7v9Q6LN-NbWPBO7ooafYGYqFskfCCVOppSgHrxDwq7xlnkQxCQ69ZQFGQDupPuO3VL6G1sUE/s1600/19+New+Projected+Templated.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkh48rhEKu-T-00Ady0Pxf7I__5dfV6byyAfUxL907ccaXDFsrXjRcoxE8UAU5tL-4CYL7v9Q6LN-NbWPBO7ooafYGYqFskfCCVOppSgHrxDwq7xlnkQxCQ69ZQFGQDupPuO3VL6G1sUE/s1600/19+New+Projected+Templated.PNG" height="400" width="361" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is now starting to rock. Now Mozilla is giving you a template with icons, a manifest, and javascript and css files, showing you where everything should go. Thank you, Mozilla!!!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I noticed something really cool that I hadn't hear of before. One of the icons is an SVG file! You can click on it and see that yes, Virginia, it is an SVG file. No art here, just fabulous SVG code.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8gy0QaJXWcfvgb271Oe2ZK1_0CsS1xHZZEEaPZJ1vkkB_YCHZ8aR5iymwnWgzjCUMmBmaYss7pX9ebGWaPAV2bWRJtnEtBoMQ3N3hvlx4QVPYvavxDEhmb5pZWbaEKBquMrQHUL4A3E/s1600/20+SVG+Icon.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8gy0QaJXWcfvgb271Oe2ZK1_0CsS1xHZZEEaPZJ1vkkB_YCHZ8aR5iymwnWgzjCUMmBmaYss7pX9ebGWaPAV2bWRJtnEtBoMQ3N3hvlx4QVPYvavxDEhmb5pZWbaEKBquMrQHUL4A3E/s1600/20+SVG+Icon.PNG" height="358" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
This needs to be investigated. Maybe you don't need anything but one SVG icon and you're done?<br />
<br />
And if you run this new app template, it really does run!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdkzwzRZr6C4eFxrLYQlXXggJqHIvGW-E_Qu7bfrutfwBxspOPt_GEUIWsHUYJwMXzB2sjZTLGnD-TsTQsrN2yChBLbicAEbMcgZ47K05-EpRdE60HKk3k58_e7V-fFC2QymoWeXpt48/s1600/21+Privilidged+Empty+App.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdkzwzRZr6C4eFxrLYQlXXggJqHIvGW-E_Qu7bfrutfwBxspOPt_GEUIWsHUYJwMXzB2sjZTLGnD-TsTQsrN2yChBLbicAEbMcgZ47K05-EpRdE60HKk3k58_e7V-fFC2QymoWeXpt48/s1600/21+Privilidged+Empty+App.PNG" height="400" width="245" /></a></div>
<br />
I'm expecting a set of steak knives with the next release!<br />
<br />
But I've saved the best for last. You can edit your code in the IDE and see the changes immediately. No more going back to your editor and reloading umpteen times.<br />
<br />
Open the debugger in the App Manager and see the code:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzJFjyJTZeMD2aV9EX0lZaAHuwXSxcC0weR82JIPOBoTRVuKI71via87YZhouM7dtuxbXbVYiiancfKqjEGjt9Pna_P-tA6uztbYTn8lbM9RY1bzIMplCheYhbFOVCdbCIp9JyvphjtU/s1600/23+Revise+on+the+Fly.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzJFjyJTZeMD2aV9EX0lZaAHuwXSxcC0weR82JIPOBoTRVuKI71via87YZhouM7dtuxbXbVYiiancfKqjEGjt9Pna_P-tA6uztbYTn8lbM9RY1bzIMplCheYhbFOVCdbCIp9JyvphjtU/s1600/23+Revise+on+the+Fly.PNG" height="358" width="400" /></a></div>
<br />
I've highlighted a line of code that sets the body color. Before it was using the color "Peru" but I changed it to"Blue" and here is what I got.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIGKoWtR8ai2E5E4e8Nn9IB-FBYMGxrqkArCZcfoes25u1DBaJbGwhTc1p8XDXH7g-5S-6uQSzRI8WcI_RTO0F-BiydLcBfhCIEN4Tlj21r1g-k87iuMqYoxk7OCh62Pczv2zxaD-hYA/s1600/24+New+Blue+Background+is+Ugly.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIGKoWtR8ai2E5E4e8Nn9IB-FBYMGxrqkArCZcfoes25u1DBaJbGwhTc1p8XDXH7g-5S-6uQSzRI8WcI_RTO0F-BiydLcBfhCIEN4Tlj21r1g-k87iuMqYoxk7OCh62Pczv2zxaD-hYA/s1600/24+New+Blue+Background+is+Ugly.PNG" height="400" width="236" /></a></div>
<br />
On the fly! This is really astounding. Write your code, see your code, make changes in the debugger, and never leave your browser again. Thank you, Mozilla. This will cut everyone's development time down a lot, so now you won't have an excuse not to turn out tons of cool apps tomorrow!<br />
<br />
This really is now the coolest development environment in the universe.<br />
<br />
The only way it could be cooler is to be able to do this on an actual phone or tablet. Or even in Firefox for Android. Imagine if you could code in your tablet. I've seen several browser IDE apps for Chrome OS, so why not here? But I'm not complaining. This is a giant step forward in programming. Wow!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-43914735388219143742014-06-17T12:57:00.001-07:002014-06-17T12:57:36.750-07:00Maze Climber (Game Review)Some games are simple and some are complex. Simple works well on a phone, and Maze Climber is such a game. The premise is simple. You're in a maze and you must climb.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hZiodTY2mk9npcbyoOkc1Nn6rZYDN2X8KdlEhDCYE7kDp2a9sCpSGr96u_gmdSNZTm2eTdeYQs9ya8ehJInrqgaZTdXe3Jzgh3sDBDeEeVlkq3nUgr3xZi-_-nuT2tZGDPu6RnZiMV4/s1600/01+Splash+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hZiodTY2mk9npcbyoOkc1Nn6rZYDN2X8KdlEhDCYE7kDp2a9sCpSGr96u_gmdSNZTm2eTdeYQs9ya8ehJInrqgaZTdXe3Jzgh3sDBDeEeVlkq3nUgr3xZi-_-nuT2tZGDPu6RnZiMV4/s1600/01+Splash+Screen.png" height="400" width="225" /></a></div>
<br />
Why must you climb? Well, something bad will happen to you if you don't! At first you won't know that. You start out in a side view of a maze like Lode Runner or early Mario. But you might notice that there is a pool of red stuff at the bottom. What can that be?<br />
<br />
You are that little white character near the middle, and you see red ladders and blue bricks. You can climb the ladders but not walk through the bricks.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2OJg3LMu5AAX6Qi_KIeMz-GDm5PgGocc_X2Snkn3cVwCkIenzHrY3dNczsMNTmHHijaFXSdbi_vOaSPAUIJuXLPpYDHZ98Eko3eUFSYtZx46NUh34jMNWVhz9b5HZ1Tccz1xNF7TcDeM/s1600/02+Beginning+of+Game+-+hero+in+middle+-+he+is+white.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2OJg3LMu5AAX6Qi_KIeMz-GDm5PgGocc_X2Snkn3cVwCkIenzHrY3dNczsMNTmHHijaFXSdbi_vOaSPAUIJuXLPpYDHZ98Eko3eUFSYtZx46NUh34jMNWVhz9b5HZ1Tccz1xNF7TcDeM/s1600/02+Beginning+of+Game+-+hero+in+middle+-+he+is+white.png" height="400" width="225" /></a></div>
<br />
Oh, no! The red stuff is rising and it is shooting out little fireballs. I bet it's lava, but I'm not going to sit around to find out what it is. I'm going to climb!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQBwezJkEnCC_1onjcj_UcQYBjbSl0JxQecuBeXs9PVGiO3W7f6j2Krk0sLDCrcfqeGQFTG4b2ofq4q3FalZfe-U7AEkWqgElEVfqPc9qVi6eBb0n6IoR0TkVP196O_8t9gqzWoVLvXU/s1600/03+Lava+begins+to+rise.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQBwezJkEnCC_1onjcj_UcQYBjbSl0JxQecuBeXs9PVGiO3W7f6j2Krk0sLDCrcfqeGQFTG4b2ofq4q3FalZfe-U7AEkWqgElEVfqPc9qVi6eBb0n6IoR0TkVP196O_8t9gqzWoVLvXU/s1600/03+Lava+begins+to+rise.png" height="400" width="225" /></a></div>
<br />
But if I don't climb fast enough, the lava will get me. It is very close. I'm hidden behind some fireballs near the edge of the lava, slightly to the left. You can see my head peeking out.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0iuKL5tUfM4gs6X6JyYIturxikLFyEsKrPlYpvV-MML9EZBJEObOAks_tu8SOczqx4p2yvhyphenhyphenWvgn6KZMSka3FAVvqqwQHvc2OsnJfwGwkBj_Djw7oD0M3cVo2nXc_L1cr-DCNFnzywQ/s1600/04+Lava+almost+has+him+-+climb!.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0iuKL5tUfM4gs6X6JyYIturxikLFyEsKrPlYpvV-MML9EZBJEObOAks_tu8SOczqx4p2yvhyphenhyphenWvgn6KZMSka3FAVvqqwQHvc2OsnJfwGwkBj_Djw7oD0M3cVo2nXc_L1cr-DCNFnzywQ/s1600/04+Lava+almost+has+him+-+climb!.png" height="400" width="225" /></a></div>
<br />
They got me. You can see me on the left, flying through the air. Owwww!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNsFqo9SgUAdAUPGUx5j2h7dbFGJ_S2MLvIWXtACX0VYvEMsdbiYGHsCASnq1sE-IK9wEM7IrHQX6FIf0j7uVTrEYmBcMtyf09Twnb8o_W_MPTlsUn3c1mVWAxoXbS31WOc3Coyg5MefM/s1600/04.5+They+got+him+and+how+he%27s+flying+through+the+air+with+a+nice+sound+effect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNsFqo9SgUAdAUPGUx5j2h7dbFGJ_S2MLvIWXtACX0VYvEMsdbiYGHsCASnq1sE-IK9wEM7IrHQX6FIf0j7uVTrEYmBcMtyf09Twnb8o_W_MPTlsUn3c1mVWAxoXbS31WOc3Coyg5MefM/s1600/04.5+They+got+him+and+how+he's+flying+through+the+air+with+a+nice+sound+effect.png" height="400" width="225" /></a></div>
<br />
And I died!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8rXtLcj_1ljT3U8AMxMt49ZHTyulF002twW6V216amt3oQHJWN98WvgG5Ffm5NxPrNGAILk7kFRGHnRhys-mH1NWiD7mBOcxjPNwq82oQ9X8jpot-t8ex0ObuWK0OeZ2PeGWKiNExBts/s1600/05+Oh+he+died!.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8rXtLcj_1ljT3U8AMxMt49ZHTyulF002twW6V216amt3oQHJWN98WvgG5Ffm5NxPrNGAILk7kFRGHnRhys-mH1NWiD7mBOcxjPNwq82oQ9X8jpot-t8ex0ObuWK0OeZ2PeGWKiNExBts/s1600/05+Oh+he+died!.png" height="400" width="225" /></a></div>
<br />
But I can do this again and again. Here are some scores, showing the data, time, and how many meters I climbed. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0OB-43fTz-WyunG3zib_zgvhPkLFVYvzDxtYqJh5MmXcqoacxzdD0F4TJIzIWhbJP2p9uRirtXG9zz9u5suNHuBa_TClhQFuBph53CLjaeMdzFT5pIBWUDWtX0lVdhrUa3-ft-QwrvQ/s1600/06+Here%27s+his+score.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0OB-43fTz-WyunG3zib_zgvhPkLFVYvzDxtYqJh5MmXcqoacxzdD0F4TJIzIWhbJP2p9uRirtXG9zz9u5suNHuBa_TClhQFuBph53CLjaeMdzFT5pIBWUDWtX0lVdhrUa3-ft-QwrvQ/s1600/06+Here's+his+score.png" height="400" width="225" /></a></div>
<br />
Here's the home page in case you want more games from Short2Games!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDbMI4eev9GyCrNoByQOs1FQl7k3YKBSq__ldP9-GIz0wQ3h9n2S13zQBCsH1p4-9EWY7187OXURDQg-Kwoe76E9e1JEBhWFMkG3IZcSPl4NAc08yihBtkEj5J4witXztk15vBi39zJB0/s1600/07+Here%27s+the+home+page+for+the+game.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDbMI4eev9GyCrNoByQOs1FQl7k3YKBSq__ldP9-GIz0wQ3h9n2S13zQBCsH1p4-9EWY7187OXURDQg-Kwoe76E9e1JEBhWFMkG3IZcSPl4NAc08yihBtkEj5J4witXztk15vBi39zJB0/s1600/07+Here's+the+home+page+for+the+game.png" height="400" width="225" /></a></div>
<br />
And from the website, here's how to play! <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiI4EjzEJUi2_57CQR5KXzAEvadgh80vzTaWpmOrcomTsPpAIYC-5LUsoy2c2_fN4Gp4w6sxdzXY6yoChkqixvSsXvmg5uOccJR5Qc2rhiOkXf8mHCk8vpNOvPLlZRWdQPgO0yjQwg-QQ/s1600/08+Here%27s+how+to+play!.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiI4EjzEJUi2_57CQR5KXzAEvadgh80vzTaWpmOrcomTsPpAIYC-5LUsoy2c2_fN4Gp4w6sxdzXY6yoChkqixvSsXvmg5uOccJR5Qc2rhiOkXf8mHCk8vpNOvPLlZRWdQPgO0yjQwg-QQ/s1600/08+Here's+how+to+play!.png" height="400" width="225" /></a></div>
<br />
Dig? What's this about dig?<br />
<br />
If you touch a nearby brick wall to your left or right, a magic ray shoots out of you and blasts away at the wall. Hadn't noticed it! Makes it a little easier to get to ladders that go up!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4tQJMPFTt9QrPOibCUVbYAakwx1RUnehd70DR-RF5EGpPU4JasS2781Z6HcdTkmw16HIUQdthj_ZqpDuXcgUCCMNq4bZDrQez8eWlA7tkkXI2O8nDTBk_uCDZmOHkcvcnGr7aLkWuN0/s1600/09+Drilling+through+a+well.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4tQJMPFTt9QrPOibCUVbYAakwx1RUnehd70DR-RF5EGpPU4JasS2781Z6HcdTkmw16HIUQdthj_ZqpDuXcgUCCMNq4bZDrQez8eWlA7tkkXI2O8nDTBk_uCDZmOHkcvcnGr7aLkWuN0/s1600/09+Drilling+through+a+well.png" height="400" width="225" /></a></div>
<br />
By the way, the top right has a pause button. If you touch it, you get these choices.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHj4Fxaug1Bup1R5w-fNStNQSaBlvWGSZXIxxvfL5kMt6hu2F1LTXPsx4hv9_oT_K1AFzacRUYojPCN-THE8Qa2kknrXtQKc4YM-QJrm3560c3CVGBZ1Em3N1tWZLp53YlcDRw_ZL1IYQ/s1600/10+Hit+the+pause.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHj4Fxaug1Bup1R5w-fNStNQSaBlvWGSZXIxxvfL5kMt6hu2F1LTXPsx4hv9_oT_K1AFzacRUYojPCN-THE8Qa2kknrXtQKc4YM-QJrm3560c3CVGBZ1Em3N1tWZLp53YlcDRw_ZL1IYQ/s1600/10+Hit+the+pause.png" height="400" width="225" /></a></div>
<br />
I like the choices. Give up, play another game, or go back! Let's go back!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQrVTppZqh9PqphBSoVQX2eR1ya0-LuxuZTFMIjcqdVfUh2B-ph-8ltvweiwHjtAp76rLtlBLNfJThWXpWkBqtm2vFV4DE1_aiWmZ_ontMQDsM6-JRymkQLI8GEyhl_NgHpIZE2gRIrA/s1600/11+Starting+over.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQrVTppZqh9PqphBSoVQX2eR1ya0-LuxuZTFMIjcqdVfUh2B-ph-8ltvweiwHjtAp76rLtlBLNfJThWXpWkBqtm2vFV4DE1_aiWmZ_ontMQDsM6-JRymkQLI8GEyhl_NgHpIZE2gRIrA/s1600/11+Starting+over.png" height="400" width="225" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now watch carefully. I'm going to drill a hole in the wall to my right.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4y4yaagcagLm2YwCJYPxdPGmDPTqUKmt0SbsBlUqC64RGqoL2EAIWKxAC_vsOfG1mE5HKxUqaySnJauP5M3zlw0kh00XHTTBk1e2zLfVZXNurH8dxyAvWFcERJMpD2Gyedp-j2O4SQ4/s1600/12+After+drilling+through+the+wall+to+the+right+and+climbing+up+a+level.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4y4yaagcagLm2YwCJYPxdPGmDPTqUKmt0SbsBlUqC64RGqoL2EAIWKxAC_vsOfG1mE5HKxUqaySnJauP5M3zlw0kh00XHTTBk1e2zLfVZXNurH8dxyAvWFcERJMpD2Gyedp-j2O4SQ4/s1600/12+After+drilling+through+the+wall+to+the+right+and+climbing+up+a+level.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
I drilled through the wall on my right and climbed up the ladder. But the lava is coming up fast!<br />
<br />
In case you are curious, here's a little bit more about the creator of this fun little perfect-for-the-phone game.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvo6WvzMZI5A4_csoCDTsWcqOY5jzBKbeAvjoirASxhaMaNM6_WrgEaJQtaE89DTnEPK6gSBTHThnXLEmICpKqf761FXDb9g6icJ4BdnAC1KGHGZd-u51n6KuS5wCtopzwybx-U1mhDXg/s1600/Sasatakey.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvo6WvzMZI5A4_csoCDTsWcqOY5jzBKbeAvjoirASxhaMaNM6_WrgEaJQtaE89DTnEPK6gSBTHThnXLEmICpKqf761FXDb9g6icJ4BdnAC1KGHGZd-u51n6KuS5wCtopzwybx-U1mhDXg/s1600/Sasatakey.PNG" height="230" width="400" /></a></div>
<br />
The eagle-eyed among you will notice that he lists lots of programming languages, and even my all-time favorite, Forth! It's nice to see that someone still uses it (actually there was some Forth programming in the One Laptop Per Child OS) but it was very popular in the early 80's when BASIC was king and C was barely known.<br />
<br />
By the way, there are sound effects for the rising lava and a cool whistle when you die! No music, but the lava noise would drown it out anyway.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Arcade<br />
Score: 4 (out of 5)<br />
Tested on: ZTE Open C<br />
Get it at: Firefox Marketplace<br />
Developer: Short2Games<br />
<a href="https://marketplace.firefox.com/app/mazeclimber">https://marketplace.firefox.com/app/mazeclimber</a><br />
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-84518999914558006992014-06-13T15:20:00.001-07:002014-06-13T15:20:35.279-07:00Platform Game using Construct 2 (Game Programming)While most of my posts have been about creating Firefox OS games from scratch, I am finding it fun and interesting to use Construct 2 for game making. You just drag and drop, set a few values, and things magically happen. What is especially nice is that Scirra (the makers of Construct 2) has gone to the trouble to allow you to create the game and export it directly to a form that works perfectly with Firefox OS. They refer to it as an "Open Web App" but the icon is for the Firefox OS Marketplace. They also export to 14 other formats! And everything in Construct 2 is based on HTML5, which makes for great compatibility with Firefox OS!<br />
<br />
I wrote two earlier posts about using Construct 2. One on bouncing a ball at <a href="http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html">http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html</a> and the other on a simple paddle game I wrote called PaddleFox at <a href="http://firefoxosgaming.blogspot.com/2014/05/paddlefox-for-firefox-os-in-construct-2.html">http://firefoxosgaming.blogspot.com/2014/05/paddlefox-for-firefox-os-in-construct-2.html</a>.<br />
<br />
Today's game is called Alien Candy Platformer and uses the absolutely cool art by Kenney, who makes cool art and gives it away. I missed out on the Candy Jam, but this would have been my entry! Here's some art by Kenney.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJrpgWFPBFc0bbjt62aWDD6BCVRNf5lFhuukGlgtJvuxp7R2lf6dTwScnHa7j6zF3z4uu3hCWK-PluLzfJs1nOxoTm0Xjb1dYz46fA7OthResUnJlmK2smu2E04FbLJT_McoiaJR9LQc/s1600/p2_jump.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJrpgWFPBFc0bbjt62aWDD6BCVRNf5lFhuukGlgtJvuxp7R2lf6dTwScnHa7j6zF3z4uu3hCWK-PluLzfJs1nOxoTm0Xjb1dYz46fA7OthResUnJlmK2smu2E04FbLJT_McoiaJR9LQc/s1600/p2_jump.png" height="200" width="140" /></a></div>
<br />
You can find out more about Kenney and his cool art at <a href="http://www.kenney.nl/">http://www.kenney.nl/</a> and tweet him at @KenneyWings. Thank you, Kenney, I love your art! You can make a donation to him and get 6000 bits of art. How cool is that?<br />
<br />
<span style="font-size: large;"><b>Game Design</b></span><br />
<br />
The purpose of this game is to have an alien that jumps around and tries to land on various platforms. If the alien misses and falls to the ground, he dies. If he can get to the end and grab a cherry, he wins!<br />
<br />
But we're going to do this for a phone and I'm going to do something different for the controls. In the original designs, platformers had buttons you pressed to jump and other controls to move left or right. Controlling the jumps is very critical.<br />
<br />
But a phone doesn't have buttons, joysticks, or directional controllers. Most phone games attempt to emulate those controls on screen by having shapes that you touch and/or drag. Personally, I don't like that because I have to be too aware of exactly where I am touching and dragging.<br />
<br />
So I've come up with a design that I haven't seen anywhere and might be good for platformers. Here are the rules for touching:<br />
<br />
<ol>
<li>Tap below the hero to move him right or left. Tap below and right to move right, tap below and left to move left, in small increments. </li>
<li>Tap above the hero to have him jump up and left or right. Tap above and to the right to have him jump up and to the right. Tap above and to the left to have him jump up and to the left.</li>
</ol>
These two rules let you keep your eye on the character. You can tap anywhere above, below, left or right. Precise movement on a phone isn't really a good idea, because your fingers are much wider than one pixel!<br />
<br />
The game will be set up so the phone is in portrait mode. You see the game world through a phone-sized window but the world is larger. As you move and jump, the world scrolls so that the view window is always centered on the hero. <br />
<br />
<span style="font-size: large;"><b>Setting Up</b></span><br />
<br />
Get the latest version of Construct 2 at <a href="http://www.scirra.com/">http://www.scirra.com</a>. They update frequently and always have two versions: stable and beta. Go with "stable" and you'll be safe!<br />
<br />
So first you want to set up the size of your "window" which is what the player will see. In the project properties window, set Window Size to 320x448. I picked this size so it will fit on my ZTE Open C, but because Construct 2 will scale things, this will work well on different sized phones. I haven't had a chance to test this on my new tablet yet, but I will soon and report back.<br />
<br />
Here is the properties window for the game:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdACdt57Q7ixQv8kpg2PgcpT0xpq3dGdRpmle0ViDZWQ5bNMA3pYMUSK3lQtfsyEf6wVxT4rCIDVgRf1aDg1jA-vyqDpnUpACjMrDC1JMslpMtSI2PbCthWH65KhOkt4RnH7g61XQCMXk/s1600/01+Game+Properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdACdt57Q7ixQv8kpg2PgcpT0xpq3dGdRpmle0ViDZWQ5bNMA3pYMUSK3lQtfsyEf6wVxT4rCIDVgRf1aDg1jA-vyqDpnUpACjMrDC1JMslpMtSI2PbCthWH65KhOkt4RnH7g61XQCMXk/s1600/01+Game+Properties.PNG" height="640" width="304" /></a></div>
<br />
Change the details in the About section, of course, and sizes are entirely up to you. Scirra has very good documentation on all the values for the various windows. The point of a this is that instead of writing code, you just fill in the blanks and the brilliant programmers at Scirra take care of the details. Most of the time you can go with the default values. Easy!<br />
<br />
Next I want to create a layout, which is the world the game takes place in. I made the size 1920x448, which is the same height as the game window, but is six times the width. I picked these values arbitrarily. That felt right for one demo. Enough to give you the idea, but simple enough to do in a few minutes.<br />
<br />
Here's my layout window properties:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQmWGEqu61JgjlV1zBiGgKm02zmqHiRI2V4YeCLyzNx8yn-LQQ_NeiERM3i20oeAUz7rdjvo8elJ5LtNqfo6LyDFRThp8iSSAI5exscu0aiWhdj7K0nBPHaAsiQ6CR5hqY4V_Bl-TmVE/s1600/02+Layout+Properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQmWGEqu61JgjlV1zBiGgKm02zmqHiRI2V4YeCLyzNx8yn-LQQ_NeiERM3i20oeAUz7rdjvo8elJ5LtNqfo6LyDFRThp8iSSAI5exscu0aiWhdj7K0nBPHaAsiQ6CR5hqY4V_Bl-TmVE/s1600/02+Layout+Properties.PNG" height="320" width="300" /></a></div>
<br />
<span style="font-size: large;">Objects</span><br />
<br />
Now that the game window and the world layout are set up, it's time to add objects to the game.<br />
<br />
<b>The Hero Alien </b><br />
<br />
The first object to add is the hero. I used art from Kenney and I wanted to show simple animation. Nothing elaborate, just a two-step animation that shows the character's legs moving. But it adds a lot of the flavor of the game and is very easy to do.<br />
<br />
Right-click on the Object Types node in the Projects window. Select Sprite. Click on the location on the layout you want the hero to appear. You'll see three little screens (Edit Image, Animation Frames, and Animations.<br />
<br />
We want to load two images that will cycle back and forth. To load the first image, click on the load image icon (looks like an open folder) in the image editor and get your first of two images. You should see it on the main image editor.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIVlz-UNDioB8wD_J1A19udkL-PNPpnW1Q4CE0yyDOiHkx0UQSwgHxeGy6ZnpxYjbdJalwhEilJaZryFTdLpmeEO_Zaga5zja1YMVLXiLyxQAu3Akj4wVEXz6zn2gBZB9KwkDuNlC6FQ/s1600/03+Image+Editor.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIVlz-UNDioB8wD_J1A19udkL-PNPpnW1Q4CE0yyDOiHkx0UQSwgHxeGy6ZnpxYjbdJalwhEilJaZryFTdLpmeEO_Zaga5zja1YMVLXiLyxQAu3Akj4wVEXz6zn2gBZB9KwkDuNlC6FQ/s1600/03+Image+Editor.PNG" height="303" width="400" /></a></div>
<br />
Close the image editor and open it again by double-clicking on the sprite you just placed on the screen. Now you should see a smaller version on the Animation Frames window. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-_89WGZNdmL63k_pxP73Cg1saxyAT8wT3tFodksk8r71pup9Fi6nI3CY2q8CnauopTPmUxR2sglXAl2RKlwagoNd0KNV0rhaPd_vZnnBctbpiRrKYZ4U5RYDcQfud53R3FTD5J95Jns/s1600/04+Animation+Frames.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-_89WGZNdmL63k_pxP73Cg1saxyAT8wT3tFodksk8r71pup9Fi6nI3CY2q8CnauopTPmUxR2sglXAl2RKlwagoNd0KNV0rhaPd_vZnnBctbpiRrKYZ4U5RYDcQfud53R3FTD5J95Jns/s1600/04+Animation+Frames.PNG" height="153" width="400" /></a></div>
<br />
Next, right click to the immediate right of the little image in the Animation frames window and select a second image with Add frame. <br />
<br />
You should now see this screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1msLCIQM4CYAfFop3z8qBItIiJYF_pLSgebRTnbmPQ4xClhyiPJ67EJJn7r9ZyuuEF-Pib540BzbuugTRsyV2ZbCzYT30Q7QbL32yr1r6N5edsFAox1DP2O3WQq_jHjPUIYQ7c4qjj-g/s1600/05+Two+images.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1msLCIQM4CYAfFop3z8qBItIiJYF_pLSgebRTnbmPQ4xClhyiPJ67EJJn7r9ZyuuEF-Pib540BzbuugTRsyV2ZbCzYT30Q7QbL32yr1r6N5edsFAox1DP2O3WQq_jHjPUIYQ7c4qjj-g/s1600/05+Two+images.PNG" height="153" width="400" /></a></div>
<br />
If you look closely, you'll see that the legs are open on the first one and closed on the second. When viewed in rapid succession, they form an animation.<br />
<br />
There is an animation properties window. Make it look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggsx_ka2KskwLq-QU9IQHwVwD4ooCkIQR_Hy6W6idiv079upTDAMHIAlCqey7ONgPu9XTBzPJxae_4o7_jRSXSNF3yIf1BT_QUlXibuRxRUyP3v92Y0oEfIfzXmdzpsmyOG43GQB5xMqA/s1600/08+Animation+Properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggsx_ka2KskwLq-QU9IQHwVwD4ooCkIQR_Hy6W6idiv079upTDAMHIAlCqey7ONgPu9XTBzPJxae_4o7_jRSXSNF3yIf1BT_QUlXibuRxRUyP3v92Y0oEfIfzXmdzpsmyOG43GQB5xMqA/s1600/08+Animation+Properties.PNG" /></a></div>
<br />
This sets the loop speed and where the loop starts.<br />
<br />
I resized the alien pictures to 32x32 which fits the grid I set in the View section at the very top. Having a grid really helps with laying out stuff<br />
<br />
Next we need to add behaviors to our hero. Right-click on the hero (I named him "Alien") and select Behaviors. The first behavior is to give him Platform behavior. This creates a set of defaults that work well for a platform game. The manual says "The <b>Platform behavior</b> implements a side-view 'jump and
run' style movement. It supports slopes, moving platforms, 'jump-thru'
platforms, and arbitrary angles of gravity." <br />
<br />
The second behavior is called ScrollTo and will simply make the camera follow the character.<br />
<br />
Here are the behaviors of the hero (Alien).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hbReOutaw_Z-XZ_YCwbr_UNck3-F1Uy8zCwtDgA4N2xtY84cKIhoGD0Ip7bHgx0wc0yFX6xjs3GobBGU_K2uahRILQxaUzgwe1USeh6bCkCunvTx9vUhjJUpxqXpRj37auu6eax76PA/s1600/06+Alien+behaviors.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hbReOutaw_Z-XZ_YCwbr_UNck3-F1Uy8zCwtDgA4N2xtY84cKIhoGD0Ip7bHgx0wc0yFX6xjs3GobBGU_K2uahRILQxaUzgwe1USeh6bCkCunvTx9vUhjJUpxqXpRj37auu6eax76PA/s1600/06+Alien+behaviors.PNG" height="316" width="400" /></a></div>
<br />
Here are the properties of the hero.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkBTnW61S9i0gCkaSermoKCBK1WmJimHeKpgclsiGM0InRVpgJJLqT37OPX8POfsIl6TUwlVVi9UUlCswk6oPkrMuyPF63xjRzPjMZfq7STSYBcDixG1N1lDZfH1DsscEwqjzvltx1Kc/s1600/07+Alien+properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkBTnW61S9i0gCkaSermoKCBK1WmJimHeKpgclsiGM0InRVpgJJLqT37OPX8POfsIl6TUwlVVi9UUlCswk6oPkrMuyPF63xjRzPjMZfq7STSYBcDixG1N1lDZfH1DsscEwqjzvltx1Kc/s1600/07+Alien+properties.PNG" /></a></div>
<br />
Under the Behaviors - Platform section, I changed the numbers somewhat to make it work the way I wanted to have the jumps. Luckily for us, there is excellent help and you can read all about the Platform variables. <br />
<br />
The Alien is now ready to go, but if you start the game, he'll just fall to the ground and disappear!<br />
<br />
We need some platforms for him to jump on.<br />
<br />
<b>The Platforms</b><br />
<br />
Kenney to the rescue again, with some cool candy art that I used for platforms. This time we're going to use animations a different way by importing a bunch of tiles and then painting them on the screen. Sounds weird but it works.<br />
<br />
Create a new object like before, but this time instead start with the Animation frame window and right click to the right of the blank square. Navigate to a set of sprites. I picked the Candy Expansion from Kenney, which is 95 squares that can be combined to make candy shapes. Go to the folder with the candy and select all the sprites at once and load them in.<br />
<br />
Your Animation frame window should look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuJa2pCVQo2m3BdJ2VJhMADMPY0bVI3AEhWTR4hbYCQSWygmUhxdn_98mLJLUXoIKGOdQCkWEEYXXJieYidNxGOs7aT7Zajc9dU5PuwutdTNjOn-urh9q9vPYKbE1_OFGvfklY7hUQBF0/s1600/09+Candy+Tiles.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuJa2pCVQo2m3BdJ2VJhMADMPY0bVI3AEhWTR4hbYCQSWygmUhxdn_98mLJLUXoIKGOdQCkWEEYXXJieYidNxGOs7aT7Zajc9dU5PuwutdTNjOn-urh9q9vPYKbE1_OFGvfklY7hUQBF0/s1600/09+Candy+Tiles.PNG" /></a></div>
<br />
You'll see 95 tiles, each with a number. You'll need those numbers soon!<br />
<br />
By the way, here's a snapshot of the whole tile set.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtYM5dTCJQOSomfVsJaaTBvW20DCZasiCStZQgtBNu0hvoCn8oqP9XFHkat3-6yAp1NUKRA1v99P8soiUIS4vojfuUVPRmPinvTkzOJ2TMPkxT04mYaggycSXRXwYJUflPN8VAre4_-YU/s1600/sheet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtYM5dTCJQOSomfVsJaaTBvW20DCZasiCStZQgtBNu0hvoCn8oqP9XFHkat3-6yAp1NUKRA1v99P8soiUIS4vojfuUVPRmPinvTkzOJ2TMPkxT04mYaggycSXRXwYJUflPN8VAre4_-YU/s1600/sheet.png" height="200" width="400" /></a></div>
<br />
Games often use tile sets to create complex images. This saves memory because you only need to load in one set of images, but you can copy them to make elaborate kinds of art, as we shall soon see.<br />
<br />
The first tile will be blank, so delete it. Then resize the image from the Image Editor so that the tile is 32x32. Now you are almost ready to start painting with candy!<br />
<br />
But first you want the candy bits to have a behavior. This one is simple. Make it Solid. That way the alien won't fall through it. You want the alien to jump from one platform to another.<br />
<br />
Now to the painting. You have a 32x32 tile. Click on it. You'll see the properties for this first candy sprite.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1Vb6pVEYTJJZrHnlN_6dzvUpqGcAAwjtwMb9spK4nsTxjOgOA0lUI5ZDqS4kxex4hxjf6XnvQx4oFHLDeKnQ-9Y5n9S2ZoPhKX4Jep7_lmheFceHOxfD-d5syjcl3CVH7FaTJAjBGRU/s1600/10+Candy+Sprite+properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1Vb6pVEYTJJZrHnlN_6dzvUpqGcAAwjtwMb9spK4nsTxjOgOA0lUI5ZDqS4kxex4hxjf6XnvQx4oFHLDeKnQ-9Y5n9S2ZoPhKX4Jep7_lmheFceHOxfD-d5syjcl3CVH7FaTJAjBGRU/s1600/10+Candy+Sprite+properties.PNG" /></a></div>
The important variable here is Initial frame. I set it to 42, which is the 42nd image in the sprite pack. That's the left side of what looks like a pie. For reference, here are four images that make up a pie.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0Zt4BpRVxEkZzKjrMRG7NGlM_3lsWpfoGc8PaO1ODSUVOT-IxIzfJaZ8WMCCr1am4ERL2slNq7rITcEnGHOmraou7NokJ7wMnfpDqLh5cbkxLiNJjKILmFKxrNSaJk1VVF_tj3x2ATw/s1600/11+Pie.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0Zt4BpRVxEkZzKjrMRG7NGlM_3lsWpfoGc8PaO1ODSUVOT-IxIzfJaZ8WMCCr1am4ERL2slNq7rITcEnGHOmraou7NokJ7wMnfpDqLh5cbkxLiNJjKILmFKxrNSaJk1VVF_tj3x2ATw/s1600/11+Pie.PNG" height="147" width="320" /></a></div>
<br />
The one on the left is 42. The two middles are 30, and the one on the right is 44. You can refer to the numbers by going back to the Animation frame screen in the Image Editor.<br />
<br />
How do I get the other bits of the pie? The cool part is that you select the first image, hold down the control key, and drag. When you have 4 tiles adjacent to each other, select each one and change the Initial frame number. If you want to start a new pie, just hold down the control key and drag the piece anywhere and then drop it and then click on it.<br />
<br />
Here are some of the platforms I created for this game.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrQ0DdmBLzjUPvFo11_4IgrQ_Lt0YaSBd0OziOAFugZzRWwfst_SwCB1McqFEVrdhFKiLBvRsgBLjNeYU3sdLTrSFjIIRd0ubyqc_ltiVvEUfLuT-7YYJQwbFcIqjKtGBP1cjTnf0EkjI/s1600/12+Platform+02.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrQ0DdmBLzjUPvFo11_4IgrQ_Lt0YaSBd0OziOAFugZzRWwfst_SwCB1McqFEVrdhFKiLBvRsgBLjNeYU3sdLTrSFjIIRd0ubyqc_ltiVvEUfLuT-7YYJQwbFcIqjKtGBP1cjTnf0EkjI/s1600/12+Platform+02.PNG" height="144" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7LJZNkgbCKtV4uW8hYZP9HwDRxwwYtzZK3Kz0cfbndcmWG7XpbPl9CPN1evvx7L4StwNMuL64fgW_z4WT9laIk0WdvmeSnB1vPg2uiC0GtaXnMLdviO34_I_V7kfn34OFD88yf0FpcI/s1600/13+Platform+03.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7LJZNkgbCKtV4uW8hYZP9HwDRxwwYtzZK3Kz0cfbndcmWG7XpbPl9CPN1evvx7L4StwNMuL64fgW_z4WT9laIk0WdvmeSnB1vPg2uiC0GtaXnMLdviO34_I_V7kfn34OFD88yf0FpcI/s1600/13+Platform+03.PNG" height="126" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cCvGQh7-lnvHO8pG-cvZ5qf2w0v4AtGUqBOPpHW6Z7357kxEIRpWjmuIGMSXgFG_VNSVtWoQQer7I9jSwIVW6gDoACgbY7rdKZFXMCi4JU-ZB-58JRnvfn7UrBi_swq9G-Gvg6rxIrQ/s1600/14+Platform+04.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cCvGQh7-lnvHO8pG-cvZ5qf2w0v4AtGUqBOPpHW6Z7357kxEIRpWjmuIGMSXgFG_VNSVtWoQQer7I9jSwIVW6gDoACgbY7rdKZFXMCi4JU-ZB-58JRnvfn7UrBi_swq9G-Gvg6rxIrQ/s1600/14+Platform+04.PNG" height="140" width="320" /></a></div>
<br />
So spend a few minutes putting up platforms and making them so they can be jumped to. You'll want to move them around later. You can move a set by selecting all four and dragging the set. Because you set the View properties to Snap to Grid, it will be easy to place things.<br />
<br />
Next you want one more object.<br />
<br />
<b>The Prize</b><br />
<br />
I selected a cherry from the candy set as the prize. If the alien can touch this, he wins!<br />
<br />
Insert an object and make the image a cherry. No behaviors are needed. The hero just has to touch it!<br />
<br />
Here's the cherry.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkYbP0KO_yQ_7RqFjXE2Dn_SJNxUt-yfqmGVTx_w0WDqDD5PtoHswtW8ZZwa0P7mB7ol0lciDhZMCgwFfZaGX-SsCcVzE9AO8Eb93h6E8-tUQBbPQP-xyP-FHXB2_Ms4fM1_SKUn8yS8/s1600/15+Cherry.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkYbP0KO_yQ_7RqFjXE2Dn_SJNxUt-yfqmGVTx_w0WDqDD5PtoHswtW8ZZwa0P7mB7ol0lciDhZMCgwFfZaGX-SsCcVzE9AO8Eb93h6E8-tUQBbPQP-xyP-FHXB2_Ms4fM1_SKUn8yS8/s1600/15+Cherry.PNG" height="297" width="400" /></a></div>
<br />
The cherry is surrounded by some other platform pieces. You'll want to jump from the pie on the left and the yellow lollypops under it are where you'll want to land safely!<br />
<br />
So we now have our game pieces set up, but we need to add some simple events to allow the action to take place.<br />
<br />
<span style="font-size: large;">Events</span><br />
<br />
This is the closest you get to programming in Construct 2, where you pick events that may happen and actions you want to take place when those events occur.<br />
<br />
There are four mouse events and two alien events.<br />
<br />
<b>Mouse Events</b><br />
<br />
To make things simple, you can use a mouse event and Firefox OS will interpret it as a touch event on the screen. How convenient!<br />
<br />
First you must actually add a Mouse object to your set of objects. It doesn't have any special behaviors, you just add it.<br />
<br />
All the objects are in place and you have given them names. Here's my list of objects.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe1iPEK-BNOH5lPVlF9XRZSMVvvnsQyYiZfGTJ4NRmWGIeqplTOk4G9A3zBbYs6EuexuNdv2PPZfFJCq-6RVwOP-T-k6nSOhyWTgXpLz9svb0wuwosqOcn7MGco2_yPs7aOQROep7xfc/s1600/16+Objects.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe1iPEK-BNOH5lPVlF9XRZSMVvvnsQyYiZfGTJ4NRmWGIeqplTOk4G9A3zBbYs6EuexuNdv2PPZfFJCq-6RVwOP-T-k6nSOhyWTgXpLz9svb0wuwosqOcn7MGco2_yPs7aOQROep7xfc/s1600/16+Objects.PNG" height="176" width="320" /></a></div>
<br />
Next, you can start adding the events. Select the event sheet and click on Add event (faintly seen at the top). As outlined at the beginning, we want two types of events: tapping (clicking) above and below.<br />
<br />
Here is the first event (on the left) and the action you want to happen (on the right).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22_3FdnrFoqPtac3fxL3OyrUnC5fqU6g7fQ48he69IPbosakUmRbjC35F59hlW_mqzSrcgXb1Sv7hWZzBJ9ZZDNmWTTuxNaOlgEHL2tgeTlSnNWEzGTLEoXmtynvJ-DQ_w4bjLreBYYs/s1600/17+Event+One.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22_3FdnrFoqPtac3fxL3OyrUnC5fqU6g7fQ48he69IPbosakUmRbjC35F59hlW_mqzSrcgXb1Sv7hWZzBJ9ZZDNmWTTuxNaOlgEHL2tgeTlSnNWEzGTLEoXmtynvJ-DQ_w4bjLreBYYs/s1600/17+Event+One.PNG" /></a></div>
<br />
Start with the Mouse event and select the On Left button Clicked. Then below it, add two system events. The first system event checks to see where the click is on the screen relative to the alien. We are looking at X values. If the Alien.X is greater than the Mouse.X, that means the mouse was clicked to the left of the alien. X is left-right. Then a second check is made to compare the Y values. If the alien Y is greater than the Mouse Y, that means that the click is above the alien. The coordinate system is set up so that 0,0 is at the upper left hand corner. So if the mouse's Y value is smaller than the alien's Y value, that means that the mouse is above the alien!<br />
<br />
Taking these three events together, you then set up actions. The first action is that character jumps. The details of the jump are in the hero's properties (above). You can vary how much the character jumps, how fast it falls, etc. The second action determines the direction the hero jumps. It sets the X vector (speed and direction) to -600 pixels of the hero. Which means it jumps to the left. So a tap above the hero and anywhere to the left will make the character jump left.<br />
<br />
The event is the same as the first, but jumps to the right if the mouse click is above and to the right.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqR9Ugzgvj-01PKV1_VZrvfA2Mlt_CkRjFKQWwXFI3i3nbs1fl7nXgMUaGV0FUhO9r04-v1redQMTBsoFgqdzOXXmNMtQHJBpO81O0rHH6NW3A3XzDvT2S0VkXMMrwIRGq2JscWvR2uc/s1600/18+Event+Two.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqR9Ugzgvj-01PKV1_VZrvfA2Mlt_CkRjFKQWwXFI3i3nbs1fl7nXgMUaGV0FUhO9r04-v1redQMTBsoFgqdzOXXmNMtQHJBpO81O0rHH6NW3A3XzDvT2S0VkXMMrwIRGq2JscWvR2uc/s1600/18+Event+Two.PNG" /></a></div>
<br />
The same logic, but this time the click is above and to the right and the character jumps up and right.<br />
<br />
The two next events are similar, but look to see if the mouse clicks are below the character. I wanted to do this so the character can carefully move on the platform before jumping. I haven't seen this type of motion anywhere but I'm trying to create something original for touch screens, not just emulate old Arcade and Console buttons. Here's the events for moving left or right but not jumping.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEp1naH1XpAYQbP7KFN92NBEAvurXM-Av3wnJ-3dTIPYE5ts0MpxFbIz5WMZ9blEQpnxVuKFDiH3MNV9TuyJsq5FCkqHTqwC0Cp_w_hxpFQpUln4Gvl3PB72xWg-cxIuErAYMZxO-Ni0/s1600/19+Events+three+and+four.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEp1naH1XpAYQbP7KFN92NBEAvurXM-Av3wnJ-3dTIPYE5ts0MpxFbIz5WMZ9blEQpnxVuKFDiH3MNV9TuyJsq5FCkqHTqwC0Cp_w_hxpFQpUln4Gvl3PB72xWg-cxIuErAYMZxO-Ni0/s1600/19+Events+three+and+four.PNG" /></a></div>
<br />
Again, the events are similar, but this time you are looking to see if the click is below the hero. If it is, you then see is the click to the right or left of the hero. Depending on that, you move the hero 20 pixels left or right. Angle 0 is to the right, angle 180 is to the left.<br />
<br />
<b>Alien Events</b><br />
<br />
You want to add two simple events that look to see where the alien is. You're moving and jumping him around, but you want to see if he does certain things, you want to take specific actions.<br />
<br />
Here are the two alien events:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrlclYz5Rsw_BVCSEop0uWtKvLH1FCBaHaE96YLK1GCOIm7xybgm0SKM0VubuRn5qoESNKBg9IDhrrZu5j7X5Mkk_lum2COF0XkCYC7e3yA0A7QomUDuQe-i_mGyUUcnfoZpgJMR9L4c/s1600/20+Alien+Events.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrlclYz5Rsw_BVCSEop0uWtKvLH1FCBaHaE96YLK1GCOIm7xybgm0SKM0VubuRn5qoESNKBg9IDhrrZu5j7X5Mkk_lum2COF0XkCYC7e3yA0A7QomUDuQe-i_mGyUUcnfoZpgJMR9L4c/s1600/20+Alien+Events.PNG" /></a></div>
<br />
The first simply tests to see if the alien is outside of the 1920x488 layout. If so, this means he fell down off a platform (or possibly jumped too high, or went off the right or left edges). This means the alien has failed. To make things simple, I just simply turn the screen red. rgb(255,0,0) is red!<br />
<br />
The second is a test to see if the Alien is overlapping the Cherry. If this happens, the Alien wins and the screen turns green.<br />
<br />
And that concludes the game. Once you understand the basics of Construct 2, you can see that the game is all about putting in the art, specifying what you want to happen, and you can begin playing.<br />
<br />
<b>Exporting to Firefox OS</b><br />
<br />
You can just run the game at any time in the Firefox browser, which makes it easy to test.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KDPjVQ5MfmN-t7aAnnKX7INTCTg1SVkCb6w8AznNJJfpWbmxFWQV3Psbz7KIrkzqJjV3GTp1lnIwNIE2UiyCnDIzJQ87NuBVIjOK0cyXdrVNAIIZeNk5Kwv4nViFPE3U_AY7gbMaimg/s1600/21+Firefox+Browser.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KDPjVQ5MfmN-t7aAnnKX7INTCTg1SVkCb6w8AznNJJfpWbmxFWQV3Psbz7KIrkzqJjV3GTp1lnIwNIE2UiyCnDIzJQ87NuBVIjOK0cyXdrVNAIIZeNk5Kwv4nViFPE3U_AY7gbMaimg/s1600/21+Firefox+Browser.PNG" height="400" width="284" /></a></div>
<br />
The character is sitting on a pie, ready to jump up to the next platform. Testing in Firefox makes it easy to tweak the game.<br />
<br />
Once you are ready, just choose Export project from Construct 2's file menu and Choose Open Web App. You can pick the folder and choose whether to minify or not. I don't like Java, so I don't, but maybe I will later. You then select Packaged App (unless you want to put it on a server) and enable Storage and Geolocation if you want. <br />
<br />
The app is now ready. It even has a manifest file set up for you. The only change you need to make is to substitute your own 5 icons for the ones that Scirra generates. I wrote about how to submit to the Firefox OS Marketplace at <a href="http://firefoxosgaming.blogspot.com/2014/01/submitting-app-game-programming.html">http://firefoxosgaming.blogspot.com/2014/01/submitting-app-game-programming.html</a>.<br />
<br />
So now you can make cool platformers and put them in the marketplace with Construct 2.<br />
<br />
Here are a few screenshots of my game.<br />
<br />
<b>The Game</b><br />
<br />
Here's our little alien, starting out.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTnWY98mIG5HY6qCF_9D7LIQGf1YuO8UO6X8zInujbSJ5AZEqCtOVSfVxnqCA-BD07Hm_DG6Vwud8CgCg0LC7ugfHNDVvHUn9kDEKlY-C40l0d5YLSvy76uHUL0EPTQNr5Cw0DB4G6XU/s1600/22+Starting+Out.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTnWY98mIG5HY6qCF_9D7LIQGf1YuO8UO6X8zInujbSJ5AZEqCtOVSfVxnqCA-BD07Hm_DG6Vwud8CgCg0LC7ugfHNDVvHUn9kDEKlY-C40l0d5YLSvy76uHUL0EPTQNr5Cw0DB4G6XU/s1600/22+Starting+Out.png" height="400" width="240" /></a></div>
<br />
He can jump to the right or the left. This game has a left-to-right progression. Why? Ask Mario!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd3c6O2TLbeIBckOs87Ec3gl5G4eS33FkIsdo_UGGdYAORngto9ugAvYQAvRBLD-NupNECRPz8jQRgMkhed7_ziQLx-LZ00SxtuO7hikDJ_cYI0C-MclXrfMLFMMJf_DZ3vEC7jhVHipk/s1600/23+Climbin+Higher.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd3c6O2TLbeIBckOs87Ec3gl5G4eS33FkIsdo_UGGdYAORngto9ugAvYQAvRBLD-NupNECRPz8jQRgMkhed7_ziQLx-LZ00SxtuO7hikDJ_cYI0C-MclXrfMLFMMJf_DZ3vEC7jhVHipk/s1600/23+Climbin+Higher.png" height="400" width="240" /></a></div>
<br />
Jump higher or drop down? Or go back? You decide!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxWcdR9YWObtezXm0MUMh9fqQrm4Hp5_qvwKRBNtv-T1js8aG7Hn0MqGKS1HsAicvUH6lElOOrxxELFRUBHfI_B-83zzOG-6T1WGmKT-4AuxCHCPdMpY3GXcl8D1ZMYKOtsg338SQBQs/s1600/24+Continuing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxWcdR9YWObtezXm0MUMh9fqQrm4Hp5_qvwKRBNtv-T1js8aG7Hn0MqGKS1HsAicvUH6lElOOrxxELFRUBHfI_B-83zzOG-6T1WGmKT-4AuxCHCPdMpY3GXcl8D1ZMYKOtsg338SQBQs/s1600/24+Continuing.png" height="400" width="240" /></a></div>
<br />
Either way, he got to the next platform.<br />
<br />
Oh, no, he failed the jump!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2erHMrss-qmhNQEwdZ-CvMVA6ExQ8xE4t3-6c6M0FHZ9owU36ikUoUbzIU6T3hKRJouyXm4g7xSqU5b-FeizRGdX5juEvivYcXhdzI9maDqO8PjPAlz5-r_LxXhq6_qGfKC5fA-YkUFI/s1600/25+Dead.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2erHMrss-qmhNQEwdZ-CvMVA6ExQ8xE4t3-6c6M0FHZ9owU36ikUoUbzIU6T3hKRJouyXm4g7xSqU5b-FeizRGdX5juEvivYcXhdzI9maDqO8PjPAlz5-r_LxXhq6_qGfKC5fA-YkUFI/s1600/25+Dead.png" height="400" width="240" /></a></div>
<br />
Start over and try again ...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBApM6I3x41y5qei9GjveHLTI1MWrPs6M94jPK30xdmxYWPs2AIq7TO3anMoOObsCtyhM9ZdJmXnzwZufaQ846GrBOc9OGOZeCtObxdPtmP6DPHs9YkrBXdFtIOJJpgpipcndN3iHiaY/s1600/26+Try+Again.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBApM6I3x41y5qei9GjveHLTI1MWrPs6M94jPK30xdmxYWPs2AIq7TO3anMoOObsCtyhM9ZdJmXnzwZufaQ846GrBOc9OGOZeCtObxdPtmP6DPHs9YkrBXdFtIOJJpgpipcndN3iHiaY/s1600/26+Try+Again.png" height="400" width="240" /></a></div>
<br />
He goes for the cherry and ...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7eVdBwIHhPAavYdK130oK7s6PUsN9I_OYkMPcgFWZVb2F67Y3TJMWxZZNftCXR5n4hObetnay2TlHniTUHPoKbtjGvQDEGCcQkKdmIH_f2q-ZbdH_E2AE5-u2NcnsF2N-EJc7xgNk2I/s1600/27+Win.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7eVdBwIHhPAavYdK130oK7s6PUsN9I_OYkMPcgFWZVb2F67Y3TJMWxZZNftCXR5n4hObetnay2TlHniTUHPoKbtjGvQDEGCcQkKdmIH_f2q-ZbdH_E2AE5-u2NcnsF2N-EJc7xgNk2I/s1600/27+Win.png" height="400" width="240" /></a></div>
<br />
He wins! The alien wins!<br />
<br />
You can play the game from here: <a href="http://thulfram.com/1GAM/May%202014/ACP/index.html">http://thulfram.com/1GAM/May%202014/ACP/index.html</a>. But be sure to use the Firefox browser!<br />
<br />
So that's it for now. Stay tuned, but not iTuned!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-55362093810790413222014-06-06T13:47:00.000-07:002014-06-06T13:47:55.790-07:00The Firefox OS Tablet has Landed! (Hardware Review)At least it has landed in my mailbox! Before you try to buy one, you can't. You have to fill out a form telling Mozilla what you will do with it. Find out all about it at <a href="https://wiki.mozilla.org/FirefoxOS/TCP">https://wiki.mozilla.org/FirefoxOS/TCP</a>.<br />
<br />
If you want to see one, here's a video Michel Wilhelm made recently at <a href="http://www.youtube.com/watch?v=VvWRpC8Zdts">http://www.youtube.com/watch?v=VvWRpC8Zdts</a> with a nice tune about "What the Fox say!" And notice in the video that the tablet boots up in two seconds!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOaeawR9-xFrnJa6BENGSMq1humIaDFsxBT1omGRPc9cVZPGs2ldziWWcxaPn3rk7goACycU3dScOVjFMFvjQtIJppEGDqZWZM4U8O8tutu56W2qbANtL7f0VGbprcbzDKSqtlT2xN6Ec/s1600/Snip+from+video.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOaeawR9-xFrnJa6BENGSMq1humIaDFsxBT1omGRPc9cVZPGs2ldziWWcxaPn3rk7goACycU3dScOVjFMFvjQtIJppEGDqZWZM4U8O8tutu56W2qbANtL7f0VGbprcbzDKSqtlT2xN6Ec/s1600/Snip+from+video.PNG" height="227" width="400" /></a></div>
<br />
The tablet has several names. The box calls it the InFocus tablet. App Manager calls it Flatfish, my PC calls it SAGA. I like the name SAGA after the Japanese RPG, but I think Flatfish is catching on. I'll call it that.<br />
<br />
Here's the specs, fresh from the TCP site:<br />
<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><b>Brand/Model: Foxconn InFocus New Tab F1<br />Processor: A31 (ARM Cortex A7) Quad-Core 1.2GHz w/ PowerVR SGX544MP2 GPU<br />RAM: 2GB<br />Storage: 16GB<br />Screen: 10.1" capacitive multi-touch @ 1280x800<br />Camera: Dual cameras, 2MP/5MP<br />Wireless: 802.11b/g/n, Bluetooth 2.1+EDR<br />Ports: Micro SD, Micro USB, Microphone, 3.5mm Earphone jack<br />Sensors: Light Sensor, G Sensor, Gyroscope Sensor<br />Other: Speaker 0.7W x 2 Stereo, GPS/AGPS & GLONASS<br />Battery: 7000 mAh<br />Dimensions: 266(L) x 170(W) x 9.7(H) mm<br />Weight: 580g </b></span></span></blockquote>
<br />
It's a big tablet. I'm used to 7" tablets which will fit in my hand in portrait mode and 8" tablets which won't, but this is a big 10" tablet and you have to hold it in your lap. Unfortunately because people didn't know it was coming, many apps force you to tip the tablet sideways to use the app. Oh, well, they can read all about Screen Orientation at <a href="http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html">http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html</a> which also contains a little app you can use to see how it work.<br />
<br />
As promised, I'll get started on creating a series on responsive design that will compare the tablet to the three Firefox OS phones I have (all different sizes) and probably put it all into a book! But today, I'll just talk about the tablet and setting it up.<br />
<br />
After charging it up with the included charger, I plugged it into my PC running Windows 7 and the drivers were very cooperative. Here's a screenshot of what the completed drivers from Windows Update look like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4PiDg-FIjHbZd-4KLNHAL6sxjuqpfzXhwA9K0FUswbx0XiDR0HHxdd3-mGQgCQIZ1vUfLi7_V8Hp1gIPDiYtS8bNWsILRsERuVrxJ1Q2tTFAtfjlwXLrCmpr0juX2_SG_THkWJnTsbD0/s1600/01+Drivers.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4PiDg-FIjHbZd-4KLNHAL6sxjuqpfzXhwA9K0FUswbx0XiDR0HHxdd3-mGQgCQIZ1vUfLi7_V8Hp1gIPDiYtS8bNWsILRsERuVrxJ1Q2tTFAtfjlwXLrCmpr0juX2_SG_THkWJnTsbD0/s1600/01+Drivers.PNG" height="182" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
And as soon as the drivers are loaded, this helpful window pops up, asking me what I want to do with this new drive.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfF38ByL3E5bNr3-nV8qoSRWOVSh9YOetDZWi3BVql1ykLq14bR-KYCUNGOJR80JrbimSck3yGRbCVQciY4rFJOfwRkOdhs5etWUwFx78rwwAHWB0lFg3EjmIYsEKhn7irHy2KzHtSSQ/s1600/02+Saga.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfF38ByL3E5bNr3-nV8qoSRWOVSh9YOetDZWi3BVql1ykLq14bR-KYCUNGOJR80JrbimSck3yGRbCVQciY4rFJOfwRkOdhs5etWUwFx78rwwAHWB0lFg3EjmIYsEKhn7irHy2KzHtSSQ/s1600/02+Saga.PNG" height="297" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Windows thinks this is called the SAGA G1. My very first Android phone was called the G1!<br />
<br />
Well, this isn't a phone, this is a tablet! And here's what the memory looks like from the PCs point of view:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVM9DhMeNsHfxYjeg5YibRUdwjVIzpSoSPAPHAjWd7dDlTa2wGezh2yaJxQclFMqQ3veksF08WSmfyLtjZqE4H324KQvsW6yQCkuSofh1dlG-Gw48Q0RPepTzD75eA9Icow4aaX-gHH1Y/s1600/03+Devices.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVM9DhMeNsHfxYjeg5YibRUdwjVIzpSoSPAPHAjWd7dDlTa2wGezh2yaJxQclFMqQ3veksF08WSmfyLtjZqE4H324KQvsW6yQCkuSofh1dlG-Gw48Q0RPepTzD75eA9Icow4aaX-gHH1Y/s1600/03+Devices.PNG" height="315" width="400" /></a></div>
<br />
Drive E: is my DVD and Drive H: is my SD card used as a <i>ReadyBoost</i> cache (very handy for laptops). But we're interested in Drive I: which is the internal memory for apps on the device. Disk J: is the micro-SD card I stuck in the tablet (8GB which becomes 7.40GB). Lots of room for apps!<br />
<br />
All is good, wireless worked, so I downloaded some apps from the store and some music from my PC. Next to download some of my own apps using the App Manager.<br />
<br />
Here's what the App Manager sees:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZ87aLYUvey1uCJ1OKflgtSAARyX1B-yCfzbmJIC1dPRnQWVFBK8WdBmJeiryWffKPcWVVMi6jzw-9jRSYGmdHwLqLhBNfGkBy0eVh2JU6Dz2BN18ldL4xW6h2njlhIeD_hdPHvGREYs/s1600/06+App+Manager.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZ87aLYUvey1uCJ1OKflgtSAARyX1B-yCfzbmJIC1dPRnQWVFBK8WdBmJeiryWffKPcWVVMi6jzw-9jRSYGmdHwLqLhBNfGkBy0eVh2JU6Dz2BN18ldL4xW6h2njlhIeD_hdPHvGREYs/s1600/06+App+Manager.PNG" height="400" width="317" /></a></div>
<br />
You'll notice that App Manager calls the tablet the FLATFISH_123456 but we'll use the nickname Flatfish!<br />
<br />
I had to make one change, however, before I could load one of my own apps. When using a FxOS phone, you have to check the box allowing remote debugging. With the tablet, there isn't a check box, there is a drop-down menu and it was set to <b>ADB</b>. That didn't work for me. I clicked on the box and found that <b>ADB and Devtools</b> needed to be the option.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0mmJeE4-CYGd6TsaZTYNJmkDzhqLpng8xBqAjMVCoxxKXIOzHrb2U8Vin8-YXb7kzfx9o0cijLQ_wSC73lucfODK2KKn3z3gJbrnHot6eu7dKaGghpEQAP4jeoUtmOBHjr7GzdcZMQg/s1600/07+Remote+Debugging+ADB+and+Devtools.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0mmJeE4-CYGd6TsaZTYNJmkDzhqLpng8xBqAjMVCoxxKXIOzHrb2U8Vin8-YXb7kzfx9o0cijLQ_wSC73lucfODK2KKn3z3gJbrnHot6eu7dKaGghpEQAP4jeoUtmOBHjr7GzdcZMQg/s1600/07+Remote+Debugging+ADB+and+Devtools.png" height="400" width="640" /></a></div>
<br />
Then everything worked perfectly.<br />
<br />
So I uploaded my favorite app, the revised "How Big Am I" app explained in <a href="http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html">http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html</a>. I'm about to revise it again using the Viewport API, but I thought I'd see if it worked on the tablet. It does!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuqqK6tWiP2TXtRjsCa-d3wr2CTCvAJsnCMaNRbS1ntr2v3pWxzNXJRxztNCiFE3FKHwih2GSkcqDVW0nT7dZftI5_XI7UU81FpkUU-XdeKtwBvO3jN9sGxLSiQMZ9Uah9tsWgNJUevM/s1600/09+How+Big+Am+I.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuqqK6tWiP2TXtRjsCa-d3wr2CTCvAJsnCMaNRbS1ntr2v3pWxzNXJRxztNCiFE3FKHwih2GSkcqDVW0nT7dZftI5_XI7UU81FpkUU-XdeKtwBvO3jN9sGxLSiQMZ9Uah9tsWgNJUevM/s1600/09+How+Big+Am+I.png" height="400" width="640" /></a></div>
<br />
Here you can see that the tablet has an outer width and height of 1280x800 pixels and an inner width and height (from the notifications bar taking away 20 pixels) of 1280x780 pixels. That's HUGE!<br />
<br />
By the way, yet another cool thing about the App Manager is that it shows you the size of the screenshot when you take it:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnvcuGA-UPgxhbk-GbrxqNRw_L6quk-nsXaEe1rnRoOz172c0NWlJ9XSfKzOld1MfJVVY5VaQ077bil6jY9SVd59UZNFIGhxn_uyWes1aPRPdPKSTnL0E8MPLDmoEqRBAqqzlY9yPazY/s1600/08+Screenshot+size.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnvcuGA-UPgxhbk-GbrxqNRw_L6quk-nsXaEe1rnRoOz172c0NWlJ9XSfKzOld1MfJVVY5VaQ077bil6jY9SVd59UZNFIGhxn_uyWes1aPRPdPKSTnL0E8MPLDmoEqRBAqqzlY9yPazY/s1600/08+Screenshot+size.PNG" height="113" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
App Manager just is so cool!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So here's a few screen shots. First is the Home screen, showing the one app I downloaded.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxvHTuV1Z5gU4xEaMJZ91CdJRymzdbTHeCIEzRdHXatY0Eabl4v4BDi7VFn3piYEjevCKCvlKIXbtzUYShtACNSZGPMux0xNM7S9WVtd-HKUAdk7M4w2lDbBNNX_MPQtdisJjbHgRGuVw/s1600/10+Main+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxvHTuV1Z5gU4xEaMJZ91CdJRymzdbTHeCIEzRdHXatY0Eabl4v4BDi7VFn3piYEjevCKCvlKIXbtzUYShtACNSZGPMux0xNM7S9WVtd-HKUAdk7M4w2lDbBNNX_MPQtdisJjbHgRGuVw/s1600/10+Main+Screen.png" height="400" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
The icon says FoxBall but the app is really Size Me which is version 2 of How Big Am I? The icons below (done by a better icon maker than me) are Internet, E-Mail, Gallery, Music, Contacts, and Calendar.<br />
<br />
The second screen looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnMrCiygGAsZCKXSZz3vQXaB1YQcNj9L4l_TmvY2VtDtKXLuddRgj31Vmmwuo_tSY5DxebOJX0JJRNQKFZkAAOS1nNP0YfKaSQzaMMndBycn-itCoFAy_p_yhkx_6J6Qpgo9n0EnpUDQ/s1600/11+Second+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnMrCiygGAsZCKXSZz3vQXaB1YQcNj9L4l_TmvY2VtDtKXLuddRgj31Vmmwuo_tSY5DxebOJX0JJRNQKFZkAAOS1nNP0YfKaSQzaMMndBycn-itCoFAy_p_yhkx_6J6Qpgo9n0EnpUDQ/s1600/11+Second+Screen.png" height="400" width="640" /></a></div>
<br />
That's it. Above are Settings, Camera, Clock, Video, and the fabulous Marketplace. Below you already know. No more for now but if you add more apps, more screens will become available.<br />
<br />
If you want to uninstall an app, you must do it through the settings.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCaRf3RQX-MvmW5xI6W2gRXkTHdG9FPsBuagU9a_nas-2NpsopJ4fzIim9Yplu3zVeD764xmf6rLt3WGV77Vsj2FJHq1-aUl2S5dYihyphenhyphen2cPM7vQ0Ush1J2asPoX_H2_Tcmuv_TFWdxHg/s1600/12+Uninstall.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCaRf3RQX-MvmW5xI6W2gRXkTHdG9FPsBuagU9a_nas-2NpsopJ4fzIim9Yplu3zVeD764xmf6rLt3WGV77Vsj2FJHq1-aUl2S5dYihyphenhyphen2cPM7vQ0Ush1J2asPoX_H2_Tcmuv_TFWdxHg/s1600/12+Uninstall.png" height="400" width="640" /></a></div>
<br />
The old way, a long press on an app until it shows a little X in the upper-left corner, is gone (too much like iOS?).<br />
<br />
Also, if you want to see what apps are running and kill one (but not uninstall it), swipe DOWN from the top to expose the apps that are running. Kill them by pressing on the X in the upper-left corner.<br />
<br />
To get back to the Home screen, just swipe UP! So far, most things seem the same as the phone.<br />
<br />
I also found one setting that stopped a problem I was having. After I had been playing with the tablet a few hours, the screen started flickering and changing colors. I thought maybe the tablet was heating up and going bad and I had visions of returning it and being very sad.<br />
<br />
But it turned out that there is a setting in the Developer section that said something about repainting. Don't select that unless you know why you want it. I unselected it and the colors went back to normal. I unselected everything except the <b>ADB & Devtools</b> for remote debugging and everything seems fine.<br />
<br />
<b>Problems</b><br />
<br />
I noticed a few problems with the new tablet. The first is that several apps don't load quite right. I don't know what this is about but here's what happens. I go to load something and instead of an icon, I get a screen like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4P4g5stWwkZ7tszgjF9GYQ56ykWCqtGtCm9u1SRvWoJ-JWRQg5cJ8so-xuA8O1id0_pCliwL1_XPdM6DSUd7f8gFO2gN4sppRVkfJcq9QA52RA9EMe6qub0QAt7WTW_OQC9YjmEnAexA/s1600/13+PDF+Viewer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4P4g5stWwkZ7tszgjF9GYQ56ykWCqtGtCm9u1SRvWoJ-JWRQg5cJ8so-xuA8O1id0_pCliwL1_XPdM6DSUd7f8gFO2gN4sppRVkfJcq9QA52RA9EMe6qub0QAt7WTW_OQC9YjmEnAexA/s1600/13+PDF+Viewer.png" height="400" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
This was for an app called PDF Viewer, but I saw several others. It's not that big a deal because you can just carefully click on <b>index.html</b> and the real app will come up. But odd. Not every app did this. Something to investigate further. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
By the way, the PDF Viewer app really ran slow on the tablet, but runs fast on a phone. This probably is because there are less pixels to crunch. It took like 3 or 4 seconds to fill a page with a double-column PDF. This may be a problem for apps that have to crunch more pixels!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
My other noticeable problem is that the Device Orientation does not seem to work. There is a cool app called Orbland that simulates rolling a steel ball around a wooden maze. It works on the original ZTE Open and the Geeksphone Peak, but does not work on ZTE Open C, and now does not work on the Flatfish!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I had written an app that shows the code for Device Orientation at <a href="http://firefoxosgaming.blogspot.com/2013/12/device-orientation-game-programming.html">http://firefoxosgaming.blogspot.com/2013/12/device-orientation-game-programming.html</a> </div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
and it works on the ZTE Open and the Geeksphone Peak (both running at version 1.2) but does not work on the ZTE Open C (version 1.3) or the Flatfish (version 1.4). The hardware has a gyroscope and the Device Orientation API should work but doesn't. I need to file a bug on this so that people can play Orbland! Seriously, device orientation is important for phones and I'll figure out what the story is. Especially because I'm working on a space shooter that uses Device Orientation to steer. By the way, my blog post on Device Orientation was the most popular post on my blog, but has now been pushed off the top of the pile by my post on the ZTE Open C. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Also, in a similar problem, the Vibration API doesn't work for the ZTE Open C or the Flatfish, but there was some discussion on B2G about how vibration isn't support in the actual devices (even though it was on the ZTE Open and the Geeksphone Peak. I wonder why those aren't supported. I like vibration for tapping on keys and of course for games it really helps explosions!</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Quf220Aitala3wx_MJvuf4IJtTNBHXDKyOqxciZ8Wp6zYDxcF1-G6vDNhsKrNMtkqn0RlKa7gRAUs31lbGoliJAzLECU83SYiqnyQxp7OssqHBIW5cB1At-5bp5rn7WFc26mSoftPfo/s1600/13+PDF+Viewer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
I think that covers the first round of this fabulous new tablet. It seems very well built and I'm happy to put it through its paces and write lots of posts on responsive design because now I have a phone (three actually) and a tablet. Clearly, what works on a phone won't work on a tablet. And by the way, I'm ready to say that if you write an app, have your phone version be portrait, but have your tablet version landscape. Because of the way the plug works, it's not easy to view something in portrait on the tablet.<br />
<br />
So, stay tuned, but not iTuned or iPadded!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-87180278757053028872014-05-15T22:59:00.001-07:002014-05-15T22:59:51.152-07:00ZTE Open C (Hardware Review)Woo hoo!<br />
<br />
I just got my ZTE Open C from eBay and I'm very happy with it. This is my third Firefox OS phone and so far it is really great. I wanted something I could try to use, as opposed to something I could program. I'll be running it through its paces, but so far I'm extremely happy with the $99 unlocked price I paid to the ZTE store on US EBay.<br />
<br />
Why is this cool? It seems faster than the ZTE Open I have. The official Mozilla specs are at <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Device_specifications">https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Device_specifications</a>. From those it looks like the specs are the same as the Geeksphone Peak, but I'm investigating that a little more.<br />
<br />
It looks like this: <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkROE5JvHQq3oxVNCXHdh7tmFE0x6kAOi9W_edhUdbYKbUIRvqRQNlIEctAhsejAQa96pBv6LOKydPC4Uq-0mx1St7a-zoHq3uJ_QQwUfj3dls5Nm9FXxyvH_kqXVFl8ld3mmaMIwEKY/s1600/OPEN-C_eBAY_FINAL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkROE5JvHQq3oxVNCXHdh7tmFE0x6kAOi9W_edhUdbYKbUIRvqRQNlIEctAhsejAQa96pBv6LOKydPC4Uq-0mx1St7a-zoHq3uJ_QQwUfj3dls5Nm9FXxyvH_kqXVFl8ld3mmaMIwEKY/s1600/OPEN-C_eBAY_FINAL.jpg" height="300" width="400" /></a></div>
<br />
<br />
The Geeksphone Peak has this processor: Qualcomm Snapdragon S4 8225 and the ZTE Open C has this one: Qualcomm MSM8210 Snapdragon. If someone wants to tell me the difference, that would be cool. What is cool about the Open C is that it has very similar specs to the "Flame" Firefox OS reference device. Same processor, anyway.<br />
<br />
Of course the first thing I did was to hook it up to my PC and fire up App Manager. Here are a few screen shots. Oh, I forgot to say that the Open C comes with Firefox OS 1.3 out of the box! And when I hooked it up to my 64-bit Windows 7 box, it had more drivers than the one or two the earlier phones had. Here's a snap of the drivers that Windows Update found for me.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheATFP4kCViZ9XLSnhz5_-Zl3p8i4ymTNbFM5NicknBUBg7cKbW_wHpJAqM43kPF8-rI_BvqUYl4ParXk9QEg21j2NOB6MqrvjpZaqeb-ygL_-rSIWKfB_3T-IlWztHfqvoMa-8am6TgY/s1600/Installing+Drivers.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheATFP4kCViZ9XLSnhz5_-Zl3p8i4ymTNbFM5NicknBUBg7cKbW_wHpJAqM43kPF8-rI_BvqUYl4ParXk9QEg21j2NOB6MqrvjpZaqeb-ygL_-rSIWKfB_3T-IlWztHfqvoMa-8am6TgY/s1600/Installing+Drivers.PNG" height="217" width="400" /></a></div>
<br />
Getting Windows Update to do all of that is downright amazing. Someone has a friend in Redmond!<br />
<br />
So here are a few screens showing off version 1.3 of Firefox OS.<br />
<br />
Here is the home screen: <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3UHxjNVDEq-lhlIhhQ4U2EwQ72Kl23B4vRrAs_pHBRvXfb8GTIjM1f4I-YfH8YsFQlw_cyEZ-nRrXxBKRClrvrP8msTwSeTZCkYX-8nPgzq71bnEKwlNAgYp7x0xQ9dCgnpR6AnCvw4/s1600/01+ZTE+C+Home+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3UHxjNVDEq-lhlIhhQ4U2EwQ72Kl23B4vRrAs_pHBRvXfb8GTIjM1f4I-YfH8YsFQlw_cyEZ-nRrXxBKRClrvrP8msTwSeTZCkYX-8nPgzq71bnEKwlNAgYp7x0xQ9dCgnpR6AnCvw4/s1600/01+ZTE+C+Home+Screen.png" height="400" width="240" />N</a></div>
<br />
Those icons at the top take you to selections of relevant apps. I don't know how they are chosen, but I'm sure people will care about them.<br />
<br />
At the bottom you see the usual suspects: phone, address book, messages, browser, and radio.<br />
<br />
The next screen looked like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFNJvkgaX5lsUFzjaOamGa44PClknQ_9vXYy5CdWXs-PlS3ZcCZo3Vam2bJdtpvyDVYQ-PGS6oHh-HzXCIa8eRdJrM9gkEYWB75BV26YmY_ZyT7HfzLEWFGvGe3jvt-pJE2ZvmK05sU0/s1600/02+ZTE+Second+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFNJvkgaX5lsUFzjaOamGa44PClknQ_9vXYy5CdWXs-PlS3ZcCZo3Vam2bJdtpvyDVYQ-PGS6oHh-HzXCIa8eRdJrM9gkEYWB75BV26YmY_ZyT7HfzLEWFGvGe3jvt-pJE2ZvmK05sU0/s1600/02+ZTE+Second+Screen.png" height="400" width="240" /></a></div>
<br />
<br />
The usual suspects: camera, gallery, email, calendar, twitter, facebook, settings, and marketplace.<br />
<br />
There was a third screen:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ivFHCctEICMkGYecc0nJgfS09ZAq3QWdaKZmMEKIBLgUTlUqIpf9_rXEBjpMl1tla8y38vkJUydizeQpvWW3sXdcvdJln_Ymxz_I9M05LZMvgW4T72dVijKFfUE7-gC7k2Rd5jJku3E/s1600/03+ZTE+C+Third+Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ivFHCctEICMkGYecc0nJgfS09ZAq3QWdaKZmMEKIBLgUTlUqIpf9_rXEBjpMl1tla8y38vkJUydizeQpvWW3sXdcvdJln_Ymxz_I9M05LZMvgW4T72dVijKFfUE7-gC7k2Rd5jJku3E/s1600/03+ZTE+C+Third+Screen.png" height="400" width="240" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This one had music, video, clock, notes, usage, here maps, and ... SOFTWARE UPDATE. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If you click on that, here's what you get:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-Vl1M3tTNGYO7dyknDDDe03spWYnuUs-VZU1ESwXhrtCac-oOgwk6YVXwThu5yKheUTzn-kNbLAauW1I-RgKwhAII8C3es0Iql8qdZhDbqPA5yR9espcslAvAgG2sEwZszA-hRIKTzU/s1600/04+ZTE+Software+Update+-+green+arrow+on+third+screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-Vl1M3tTNGYO7dyknDDDe03spWYnuUs-VZU1ESwXhrtCac-oOgwk6YVXwThu5yKheUTzn-kNbLAauW1I-RgKwhAII8C3es0Iql8qdZhDbqPA5yR9espcslAvAgG2sEwZszA-hRIKTzU/s1600/04+ZTE+Software+Update+-+green+arrow+on+third+screen.png" height="400" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I guess ZTE learned their lesson and now there's a button on the screen to update when version 1.4 is ready to go. Thank you! After all the suffering we all did to update the original ZTE Open to anything beyond 1.0, it's nice that they're starting out at 1.3. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
One other cool thing (of many) that I just discovered is that the Notes app connects to Evernote! Very easily, too. By the way, all I had to do was drop in a spare SIM card and add a 16GB SD card, and I was ready to go. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
By the way, when I plugged it in, Windows recognized the device and showed me this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUPRC9LXvDFuz-WrSKjsWo31JRewmQ9aAUyTT-_ccyLOQ4jBaUH7fFzfslVSWbtWVGmyCoUHxz69DSws8j9iICl6SdxEx-VsJiWHGsbRaq4bbDnYJOJu0dECocjTwTi6Nj5gZP7cRf04/s1600/ZTE+C+Storage.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUPRC9LXvDFuz-WrSKjsWo31JRewmQ9aAUyTT-_ccyLOQ4jBaUH7fFzfslVSWbtWVGmyCoUHxz69DSws8j9iICl6SdxEx-VsJiWHGsbRaq4bbDnYJOJu0dECocjTwTi6Nj5gZP7cRf04/s1600/ZTE+C+Storage.PNG" height="131" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
The first drive is the 16GB SD card I put in (okay, everybody lies about memory) and the second drive is what ZTE considers as memory you can use for music, video, pictures, etc. I had a choice about which drive to use but I chose my external SD card for all my music, etc.<br />
<br />
Here's some of the music I downloaded right away:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBNnea_sfhwOvUfsIiePDhhJUF-wTgdDxcJkMgL5jtf3VhJVfepMowvODO3gxtJi4qJN7v_hBpfw9KnongzScejnObmcBy9coSJybLG8EcfR4BJkQpFf2reb93NcS-L7xZdfDVdkVqX3k/s1600/songs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBNnea_sfhwOvUfsIiePDhhJUF-wTgdDxcJkMgL5jtf3VhJVfepMowvODO3gxtJi4qJN7v_hBpfw9KnongzScejnObmcBy9coSJybLG8EcfR4BJkQpFf2reb93NcS-L7xZdfDVdkVqX3k/s1600/songs.png" height="400" width="240" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
A prize for anyone who knows where those songs are from!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I've got plenty of room for storage:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlc6Txl71ZFqwgYjfQDXTQ_nPbH1qlylPdCiZK2tvL2_5v8nmJXn9REVoh6XE_37P8Nwv1fcjcgDR0aavYEHRUqBJzdwl0bfsCn6JABcU4FGKTgYIR0cP0i5ERmtmKU8zPRWcVexJLk8/s1600/new+ZTE+storage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlc6Txl71ZFqwgYjfQDXTQ_nPbH1qlylPdCiZK2tvL2_5v8nmJXn9REVoh6XE_37P8Nwv1fcjcgDR0aavYEHRUqBJzdwl0bfsCn6JABcU4FGKTgYIR0cP0i5ERmtmKU8zPRWcVexJLk8/s1600/new+ZTE+storage.png" height="400" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
I then ran my app that looks at inner and outer dimensions and here is what it produced:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCrLFXf8uyDvHC5PhKG3NGN6rxgMvEW12eA02CFfQ_EnCNyIlShWvVTCCqGN2isL10ZOqMLaxOinGVzYz8An3N5tljiNKz6nDa6loTcTbwYT9IILcTeOcdsZCyflsXG18TWUj2yL5gJt4/s1600/width+and+height+not+400+x+800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCrLFXf8uyDvHC5PhKG3NGN6rxgMvEW12eA02CFfQ_EnCNyIlShWvVTCCqGN2isL10ZOqMLaxOinGVzYz8An3N5tljiNKz6nDa6loTcTbwYT9IILcTeOcdsZCyflsXG18TWUj2yL5gJt4/s1600/width+and+height+not+400+x+800.png" height="400" width="240" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That's the app from <a href="http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html">http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html</a> and the follow up at <a href="http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html">http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html</a>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
However, alert readers will notice that those numbers don't match the numbers in the spec at Mozilla I cited at the top of this page. J. Ryan Stinnett pointed me to the article at <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel</a>. I will need to digest this article and see if there's some way I can make apps that use these different "pixels". My app works just fine and the ball bounces around the edges, but it sounds like if I use viewport, I can get a bigger super-pixel screen. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So far, the ZTE Open C is definitely a winner ... especially at $99. Get yours today from <a href="http://item.ebay.com/291125433026">http://item.ebay.com/291125433026</a>. Right now when I went to check, it said 332 had been sold and 8 people had bought this in the last 8 hours. They're having a 5% off sale if you buy 2! In case you're worried, the seller, ZTE_US, has a 99.% rating, which is great! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I'll be trying out more apps and doing more comparisons of the ZTE Open C and the Geeksphone Peak in the next few days, so stay tuned, but not iTuned!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-37226433784887255392014-05-01T14:59:00.000-07:002014-05-01T14:59:36.904-07:00PaddleFox for Firefox OS in Construct 2 (Game Programming)The more I use Construct 2 (from Scirrra at <a href="http://www.scirra.com/">http://www.scirra.com</a>), the more I am convinced that Scirra and Firefox OS make a great team-up for HTML5. I especially like how Scirra has made it really easy to make a game AND put it in the Firefox OS Marketplace.<br />
<br />
But first, go back and read my recent post on using Construct 2 to bounce a ball. <a href="http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html">http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html</a>. I've written several posts on bouncing balls, showing six different ways to do it with CSS, Canvas, and SVG. But now there's a seventh way, and a very easy way, to do it with Construct 2.<br />
<br />
Compare the 154 lines of "simple" HTML5 CSS code to bounce a ball in my latest CSS shell post at <a href="http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html</a>. Now compare that with the roughly 20 steps for doing the same thing in Construct 2. But those 20 steps are all about picking from lists, filling in blanks, and not worrying about missing a semicolon! And we won't even talk about how hard it would be to write the same code in Java for Android or Objectionable-C for iPhone!!!<br />
<br />
Today's post is about taking that boring bouncing ball and turning it into a simple game. Why not try PaddleFox?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfonp4TJ39KBK3UMF3ueJjurrMW8Xsk_UrGxLYfsOwdVb_z3ncHqb_-Jq2_mzzp85h1kerlQ_SAuZ8qji-CQDR7v0u4s2PDZ9wisboKfI9kdy730jrY8hDVOlXM9vmszSbfUESHJqg_H4/s1600/PaddleFox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfonp4TJ39KBK3UMF3ueJjurrMW8Xsk_UrGxLYfsOwdVb_z3ncHqb_-Jq2_mzzp85h1kerlQ_SAuZ8qji-CQDR7v0u4s2PDZ9wisboKfI9kdy730jrY8hDVOlXM9vmszSbfUESHJqg_H4/s1600/PaddleFox.png" height="400" width="225" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is the game that I wrote and placed in the Firefox OS Marketplace. You can get it there at <a href="https://marketplace.firefox.com/app/paddlefox">https://marketplace.firefox.com/app/paddlefox</a> and you can read how I created it at <a href="http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html">http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html</a>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
PaddleFox is 268 lines of juicy HTML5 goodness made possible by using SVG (in its most delicious form, the direct SVG DOM) with a little bit of CSS thrown in for good luck. But no Canvas. Ugh. I hate Canvas. (Well, not really, but I really like the object-oriented retained-mode SVG much better!)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So, how would I do this in Construct 2. Well, the answer is ... I did it extremely easily. I already had a bouncing ball. All I had to do was add a paddle! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So let's begin where we were with the bouncing ball. Here's Construct 2 with the ball in place.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCjtw5VevNaWAxUswjbBcOoFuPGyUaMRwNvCCnFlvFcMrzaZs0NfaJpWhQvjPA07qRgOuyrHodd5m3k423auHrrFPYh0muo_Z0mQ35qcX8OcfC357-5TERshgqVPmNuxA2mFJXDU8RXUo/s1600/C2+000.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCjtw5VevNaWAxUswjbBcOoFuPGyUaMRwNvCCnFlvFcMrzaZs0NfaJpWhQvjPA07qRgOuyrHodd5m3k423auHrrFPYh0muo_Z0mQ35qcX8OcfC357-5TERshgqVPmNuxA2mFJXDU8RXUo/s1600/C2+000.PNG" height="301" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The first thing to do is create a paddle. Double-click on the board (Layout 1) and add a Sprite. Click where you want it to go on the board. You'll get the Edit Image dialog. But instead of loading an image, let's do something simpler. We'll make a sprite out of thin air. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
First pick a color for the sprite by clicking on the paint bucket on the left. The color picker will come up. Pick a color. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hRbaaqn1wW5MqQ4fQSc2ogfzla1QuQonSq5QO5sZvvyAwVcNvxDWgO64ZzqFsu0wODDBPGFWGkIxCAJnV83nyKBCv5Yc_RDcgJyRN7fatuJxs4DQDcIaMlM2kpB6B732fmZ9FdTSGV4/s1600/01+Colors+for+Paddle.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hRbaaqn1wW5MqQ4fQSc2ogfzla1QuQonSq5QO5sZvvyAwVcNvxDWgO64ZzqFsu0wODDBPGFWGkIxCAJnV83nyKBCv5Yc_RDcgJyRN7fatuJxs4DQDcIaMlM2kpB6B732fmZ9FdTSGV4/s1600/01+Colors+for+Paddle.PNG" height="400" width="235" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
I picked blue! That's RGB(0,0,255) if you're curious. But because this is Construct 2, all you need to know is blue, you don't need to care about all those messy numbers!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then once you've picked your color, click on the square in the middle of the Edit Image dialog. It will turn blue (or whatever color you picked). </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, grab the edges of the blue square and resize it so it looks like a paddle. Here's what I did:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BLRYOVXOg6Bn3DBeyEfiemyulwl_9Psb9H09mJGgrgUC6ySfUkXKxSKHUunecd3wN9pkmBMXrsa6FOy4UN3Mnifv-gPyOMzi0F0pacaWIU7q5XcjbQGqzh2Ar52WB9RioXrhpeGED84/s1600/02+Paddle+shape+and+color.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BLRYOVXOg6Bn3DBeyEfiemyulwl_9Psb9H09mJGgrgUC6ySfUkXKxSKHUunecd3wN9pkmBMXrsa6FOy4UN3Mnifv-gPyOMzi0F0pacaWIU7q5XcjbQGqzh2Ar52WB9RioXrhpeGED84/s1600/02+Paddle+shape+and+color.PNG" height="302" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Kill the Edit Image dialog and modify your new paddle. Notice that you didn't need art because you were making a rectangle. Dull, but good enough for now. Your paddle is sitting on the board now, keeping the ball company. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But let's go to the paddle properties and make sure your paddle is a good paddle.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9s9Nwg4xHCULrE9KJTPKxhiBqtHpyOcA1S4uFSOAtvV9X4A505VWD9RwAJIyDeSO8v_Q5G2VBGv3y73NcqRHK6rRK8We98QHIDYkNkX9a7Ksttfqdmt-AANwLlVKDbtDYCWHEL-QoN24/s1600/03+Paddle+Properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9s9Nwg4xHCULrE9KJTPKxhiBqtHpyOcA1S4uFSOAtvV9X4A505VWD9RwAJIyDeSO8v_Q5G2VBGv3y73NcqRHK6rRK8We98QHIDYkNkX9a7Ksttfqdmt-AANwLlVKDbtDYCWHEL-QoN24/s1600/03+Paddle+Properties.PNG" height="400" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I made the paddle 128 x 32 pixels and gave it a position at 160,400. This makes it fit on the grid nicely. It could be anywhere as long as its near the bottom, but I thought it might be helpful to have everything on a simple 32x32 grid. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next I wanted to give the paddle some behaviors. You'll see this a lot. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. Create an object.</div>
<div class="separator" style="clear: both; text-align: left;">
2. Position it on the board.</div>
<div class="separator" style="clear: both; text-align: left;">
3. Give it behaviors.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That makes it a real object with form, position, and ... behavior. Well, what kind of behavior should a paddle have? (And I keep hearing Austin Powers saying, "Oh, behave!"</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click on Behaviors in the Properties window.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHAt9plLCzxdpGGBSaAfl6Jy-rD_0YTWurb6Fc9nwOH8T0UqlevJku9TpzLgwMKiQaB94EJni_q6ys1rQEwcxCvXEPSWq9S8lER6MeiLahW7xA2JFSKPxrwTjn_NRn1DDRB1b3lSg6Qo/s1600/04+Paddle+Behaviors.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHAt9plLCzxdpGGBSaAfl6Jy-rD_0YTWurb6Fc9nwOH8T0UqlevJku9TpzLgwMKiQaB94EJni_q6ys1rQEwcxCvXEPSWq9S8lER6MeiLahW7xA2JFSKPxrwTjn_NRn1DDRB1b3lSg6Qo/s1600/04+Paddle+Behaviors.PNG" height="323" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I gave it just two simple behaviors. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. <b>Solid</b>. It is good to be solid. That way balls can bounce off it.</div>
<div class="separator" style="clear: both; text-align: left;">
2. <b>Bound to Layout</b>. This keeps the paddle from going off either side.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The second behavior would take complicated code in HTML5, calculating the edge value and making sure you don't go beyond it. But Construct 2 does this for you with one quick choice.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Also, give the paddle a name. Go over to the Projects window and rename the new object something like "Paddle" so you can come back to it later. Naming is always a good idea! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The paddle is ready. But how do you move it? In HTML5 you'd set up an event handler and process it when the mouse (or finger) does something. In the HTML5 version of PaddleFox, I calculated where the mouse click was and if it was on the left side, I moved the paddle left, and right, right. Firefox OS will interpret a touch on the screen as a mouse click, by the way, and Construct 2's mouse clicks are interpreted the same way.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So I want some way to interpret clicks. After thinking about it, and wanting it to be easy and as calculation-free as possible, I came up with this solution. You may have another. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
What I did was to have two invisible objects, one of the left, the other on the right, and do something when you click on them. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To make things easy, the first step of doing this is to create a new layer. In the free version of Construct 2, you're limited to 4 layers and 100 events (we'll see events in a minute). But we only need two layers here. The first you've already been using, and the second will now appear. Layers are an easy way to keep objects separate and also serve as a series of planes so that the top layer is what you see first and lower layers may be obscured by objects on the top. Also, layers can be temporarily turned off so you can work on complicated stuff, on layer at a time. You can read about layers in the Construct 2 manual at <a href="https://www.scirra.com/manual/85/layers">https://www.scirra.com/manual/85/layers</a>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Layers are under the Projects window. There's a tab at the bottom of that window that says Layers. Click on it to see the current layers. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkeUipJM5pKBnLaZjyo8gBk43HW8m2Of4K9X-m4IDTf8TYEHlgEyb70DIGNnolL25a-ov7hSKahxT_n7phiTRL-bEaxTYFH4vL_ZUH1RFCbMU2781eIhElNbvrFvhVnQjmix0uUNfsO4/s1600/C2+Layers.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkeUipJM5pKBnLaZjyo8gBk43HW8m2Of4K9X-m4IDTf8TYEHlgEyb70DIGNnolL25a-ov7hSKahxT_n7phiTRL-bEaxTYFH4vL_ZUH1RFCbMU2781eIhElNbvrFvhVnQjmix0uUNfsO4/s1600/C2+Layers.PNG" height="308" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click on the + (plus) button to create a new layer. I called my new layer Layer 1 but you can call it anything you want. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After you do that, you'll have two layers to play with:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkEz3qo-Ii31kO0DHvkF6oDwsl9cW_8Vc6uQG-I-1BtZXJFGwPaj3_dbuwSD59lbpu011IqUY5yVfmbfuCD-eQcOjnFEIp4JHyVzW7A3KV9lzc8ABC22VpzfQ35pVpGaMwdoGhmbc0CM4/s1600/05+Layer+Bar.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkEz3qo-Ii31kO0DHvkF6oDwsl9cW_8Vc6uQG-I-1BtZXJFGwPaj3_dbuwSD59lbpu011IqUY5yVfmbfuCD-eQcOjnFEIp4JHyVzW7A3KV9lzc8ABC22VpzfQ35pVpGaMwdoGhmbc0CM4/s1600/05+Layer+Bar.PNG" height="320" width="312" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Layer 0 was the earlier layer and is "behind" Layer 1. Notice that I've unchecked Layer 0 right now because I don't want to see the ball and paddle.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I want to add an invisible object that will cover the left side of the screen. So the first step is to create a new object. Just double click on the board and like you did with the paddle. You don't want any art and you don't want any fill. Once you've got your new object, kill it. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You've got a new object on the screen. Stretch it to cover the whole board so it looks like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEzFYp8TFO5LO18Qcxogv_JmBxkcdZesTSthX4JaLH1gqTBttfr5AZ0G8zZerLE6hWilWefDVZ_aDLx0Ao-CggX7HQVScEqkDMq-Xji7bbvTTpCKLei0HmB_DWsI-mHUOjCoFGyHjzk0/s1600/07+Layer+1+Only+Selected+Layout.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEzFYp8TFO5LO18Qcxogv_JmBxkcdZesTSthX4JaLH1gqTBttfr5AZ0G8zZerLE6hWilWefDVZ_aDLx0Ao-CggX7HQVScEqkDMq-Xji7bbvTTpCKLei0HmB_DWsI-mHUOjCoFGyHjzk0/s1600/07+Layer+1+Only+Selected+Layout.PNG" height="400" width="286" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next, drag the right edge over to the middle so it looks like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTUk1CZCN4e2xoGIhyphenhyphenv7F-PxLQdQiszWn59XxwCA_fMFGzs1apYE80zbR8qhozyDu0psJoL4lp73JL2ZgZ82OxOOT5Wwlp0eYao5dT2QE_Bh5Olj0Ylmj9lFUBdLRUnvHP1DMJj7ye0c/s1600/08+Left+Touch+on+Board.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTUk1CZCN4e2xoGIhyphenhyphenv7F-PxLQdQiszWn59XxwCA_fMFGzs1apYE80zbR8qhozyDu0psJoL4lp73JL2ZgZ82OxOOT5Wwlp0eYao5dT2QE_Bh5Olj0Ylmj9lFUBdLRUnvHP1DMJj7ye0c/s1600/08+Left+Touch+on+Board.PNG" height="400" width="156" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
When using invisible objects like this which will be used for what is called "hit testing" you can overlap the edges, but you'll want to keep the right edge of this left object flush with the center so you don't have a confusion if the user taps near the center. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Rename this object something like LeftTouch. You can check the values with the Properties window:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5ydx9CRKOFYkmYUHd5YtDlAElX2uPVXApF04peK9VMTHDXfC2_e3QtzwQ1RSYOUbB2dvvCn5v-LV-kc70SbXOvnpZj8CQbcFDAFb3dCIHV1KTdJtoXtwp8h2onCXBKwzEIsZlUiVth0/s1600/09+Left+Touch+Properties.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5ydx9CRKOFYkmYUHd5YtDlAElX2uPVXApF04peK9VMTHDXfC2_e3QtzwQ1RSYOUbB2dvvCn5v-LV-kc70SbXOvnpZj8CQbcFDAFb3dCIHV1KTdJtoXtwp8h2onCXBKwzEIsZlUiVth0/s1600/09+Left+Touch+Properties.PNG" height="400" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Note that Opacity for 100 means solid, so you should see it. But you don't because there isn't a picture or color there. An interesting quirk. If you added a color, you could make it zero opacity so it was invisible and then when you touch it, you could make it 100% opaque for a second so the user know they touched something. But I'm trying to be simple here.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Do the same procedure for a right invisible object covering the right side of the board on Layer 1. Name it something clever like RightTouch.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next you need to add Mouse functionality. Do this by going to the Projects window (push Layers out of the way) and right-click on Object types and select Mouse. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now you are ready for the mysterious world of Events. You've had the Layout tab selected all this time so you could see the board. Up at the top but before the ribbon you'll see a few tabs. Click on Event Sheet 1. It will be blank.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To add your first event, double-click on the Event Sheet. You'll be asked to select an object.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYpAHuGr1hEHk4cdri6r-XJF1-t4SvogBQcHQstTzxIzLi8RT4x1r_j-CLhNNfkbUJ_jQ3GTUIgz6G4q6I_v4EnwHi0zEb_h4vMmcQFwC4tPNqS0PQV_O-qnh30zFt3wFNFYC519_eyw/s1600/10+Add+Mouse+Event.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYpAHuGr1hEHk4cdri6r-XJF1-t4SvogBQcHQstTzxIzLi8RT4x1r_j-CLhNNfkbUJ_jQ3GTUIgz6G4q6I_v4EnwHi0zEb_h4vMmcQFwC4tPNqS0PQV_O-qnh30zFt3wFNFYC519_eyw/s1600/10+Add+Mouse+Event.PNG" height="336" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This will match the objects you have added to the project. Double-click on the Mouse object.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9r5GPHTD4-Y1yyWmvEb7mCwjAA2kHSbM1WXPjAdYngDqojoeL5XjUc9XxGMmPK0kvqw_M7ht3LGwsiGy8RCSuB5OvyaJZmXsvdzjgn99VfNUb3afFSIpuKY-vMdHXIRC8HRbmbOGbHM/s1600/11+Specific+Mouse+Event.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9r5GPHTD4-Y1yyWmvEb7mCwjAA2kHSbM1WXPjAdYngDqojoeL5XjUc9XxGMmPK0kvqw_M7ht3LGwsiGy8RCSuB5OvyaJZmXsvdzjgn99VfNUb3afFSIpuKY-vMdHXIRC8HRbmbOGbHM/s1600/11+Specific+Mouse+Event.PNG" height="325" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
These are the events that the mouse can respond to. Pick "On object clicked". You'll get this dialog:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtpgEBPtL_SulSdm2oi2fIaiOGVaxBLOfVluGiaabgc_IBjPqkVrUO-E1mRx_Szphkc7zI86RKGwrR2AqqpVACGF84d1QG3cxUjFbUG3L-NJ_Ka0_MBcOrONbA7ZPSXp8AlHMJs6waH0/s1600/12+Pick+Object+to+be+Picked.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtpgEBPtL_SulSdm2oi2fIaiOGVaxBLOfVluGiaabgc_IBjPqkVrUO-E1mRx_Szphkc7zI86RKGwrR2AqqpVACGF84d1QG3cxUjFbUG3L-NJ_Ka0_MBcOrONbA7ZPSXp8AlHMJs6waH0/s1600/12+Pick+Object+to+be+Picked.PNG" height="342" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This asks you which object you want to see if it was clicked. Pick one of the hit target objects we just created.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjknqkZZvaZ3-OlX8w2RDBgHJmuyoD6xJ8LTmw0uTSzJ30_x5tEAZyIsad-bAS9eagz3CjQEAueHuURJ7Ejpb16zQJUAojIuxYOPB602rNFSqt6setj6oVeGLFYUF-xLqpRkfsEzd69LSI/s1600/13+Mouse+Parameters.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjknqkZZvaZ3-OlX8w2RDBgHJmuyoD6xJ8LTmw0uTSzJ30_x5tEAZyIsad-bAS9eagz3CjQEAueHuURJ7Ejpb16zQJUAojIuxYOPB602rNFSqt6setj6oVeGLFYUF-xLqpRkfsEzd69LSI/s1600/13+Mouse+Parameters.PNG" height="256" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then choose the values you see above for the RightTouch object. You want to detect the left mouse button, you want to detect a click, and you want it to be the RightTouch object. Click Done and you are done. Except you want to do the same thing for the LeftTouch object. Your event sheet will now look something like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfRSwJdbby_R_mQnSZBJdL3Wwy1udDNCGzVLg8yK9jyk6UM7ewrzJ4W1UDl_LBchi_PSafiiwv2qyms-q3pqxVoAVZ6yb6Juv3eeItk6M4kYkkLSqUT8pNKysGLqno1QIu3Jbh9WEzHs/s1600/C2+Events+1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfRSwJdbby_R_mQnSZBJdL3Wwy1udDNCGzVLg8yK9jyk6UM7ewrzJ4W1UDl_LBchi_PSafiiwv2qyms-q3pqxVoAVZ6yb6Juv3eeItk6M4kYkkLSqUT8pNKysGLqno1QIu3Jbh9WEzHs/s1600/C2+Events+1.PNG" height="204" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
This tells you that the LeftTouch and RightTouch objects are ready to be clicked on by the mouse's left button.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But what happens? You've got the events, but nothing will happen. You need to supply <b>Actions</b>!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Actions are needed for an event. Think of them as event handlers. An event takes place, like a mouse button click, but you need an action to then take place. To the immediate right of an event you'll find the words <b>Add action</b>. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You'll get a list of object to pick from. Pick the paddle. You want action on that paddle. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZHbpoFIUkcigkqo0kbuCofXcV89Bk4oIi8n8NGTfJUMGHM_-Z75XVKOVHkdRh2kGuAXNlL1u_152hn7U-oQrYPRGDxasTySNup9dyevRgxbQRxpzicsTF-9PwLo6HkWy4nTNCiWfErA/s1600/15+action+is+move+at+angle.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZHbpoFIUkcigkqo0kbuCofXcV89Bk4oIi8n8NGTfJUMGHM_-Z75XVKOVHkdRh2kGuAXNlL1u_152hn7U-oQrYPRGDxasTySNup9dyevRgxbQRxpzicsTF-9PwLo6HkWy4nTNCiWfErA/s1600/15+action+is+move+at+angle.PNG" height="293" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The action you want to choose is "Move at Angle". Notice that you see a little picture of the paddle to remind you that you're moving the paddle. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
When you choose that action, you then need to tell Construct 2 what angle:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIl4V7YKeqL9xh2aghyphenhyphenf8ifjBS3p-8-45_q0Cr99RSuvXe5TDIZhWq5nwv_kzlyW71SKE1LcdCn4OXU3MkpAWyyiVIuCh1czsm3uACFpLPRb4Xa_uIo2CXV1UTEp8XnpdOptpE0XuxEoA/s1600/16+Parameters+for+moving+at+angle.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIl4V7YKeqL9xh2aghyphenhyphenf8ifjBS3p-8-45_q0Cr99RSuvXe5TDIZhWq5nwv_kzlyW71SKE1LcdCn4OXU3MkpAWyyiVIuCh1czsm3uACFpLPRb4Xa_uIo2CXV1UTEp8XnpdOptpE0XuxEoA/s1600/16+Parameters+for+moving+at+angle.PNG" height="203" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The angle is 0. For Construct 2, zero degrees is straight right. So this is for the RightTouch object and the distance you want it to travel is 16 pixels. Every time you click on the RightTouch object (representing the right side of the screen) the paddle will move 16 pixels right until it hits the edge and then it will not go further.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Do the same for the LeftTouch object, but make the Angle 180, and you're set for the paddle! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Your Event Sheet should look like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ut9VxfZtiTdFZfq2mWxTNqGqQ50NuVays2IeBB-DQ5azv74Z-uuZVsNKe_WBEBHvlAyJE1r11PnrLeAo_e8n3yjZ-k2ucRDxZZUN9QLAm52b1oA3Bu-lpG7-xLE3L5nlbRaq4IDrLbY/s1600/17+Event+Sheet.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ut9VxfZtiTdFZfq2mWxTNqGqQ50NuVays2IeBB-DQ5azv74Z-uuZVsNKe_WBEBHvlAyJE1r11PnrLeAo_e8n3yjZ-k2ucRDxZZUN9QLAm52b1oA3Bu-lpG7-xLE3L5nlbRaq4IDrLbY/s1600/17+Event+Sheet.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This tells you what events will be processed and what action will happen. This is really nice because you can tell what will happen.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click on the big arrow at the top of Construct 2 and you can watch the ball bounce around. Click on either side of the screen and see the paddle move. Cool!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And the ball bounces off the paddle. Amazing. But ... there are two more things that would be nice to add that would make it a real game.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. Have it so that if you miss with the paddle, and the ball hits the bottom edge, the game is over.</div>
<div class="separator" style="clear: both; text-align: left;">
2. Notify the user that the game is over!</div>
<div class="separator" style="clear: both; text-align: left;">
3. Stop the ball from moving.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And this is really easy with Construct 2. We'll do it by displaying a message saying that the game is over and stop the ball.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To do this, we need to add a Text object. Go to the Projects window and right-click on Object types and choose a Text object. Place it on the Layout screen where you want the text to be displayed. Somewhere near the top.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Check out the Text object Properties:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdS39fFY96EdvesFxpqSn4JeaF_MXmyIinog_Iaod3aZ3MPC2VBiPOmRrGYk2muoNugjWbfEQsZq9wcofxn_dUZZzuY8bG0aDk3Yc-Laxtrj9cR8-6i5f3BSu1mJo3Ri_kzZ6ks5vOb48/s1600/21+Text+-+Invisible+-+value+GAME+OVER!.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdS39fFY96EdvesFxpqSn4JeaF_MXmyIinog_Iaod3aZ3MPC2VBiPOmRrGYk2muoNugjWbfEQsZq9wcofxn_dUZZzuY8bG0aDk3Yc-Laxtrj9cR8-6i5f3BSu1mJo3Ri_kzZ6ks5vOb48/s1600/21+Text+-+Invisible+-+value+GAME+OVER!.PNG" height="400" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The important property here is to make the Initial visibility to Invisible. You don't want this text to display until the game is over. And now to set that up.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We need to add one more event. We want to see what will happen is the ball hits the bottom edge. As you may recall, in the bouncing ball example in my earlier post on Construct 2, each of the four edges is an invisible box that is just a line. I called mine EdgeBottom.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Double-click on the Event Sheet and select Ball. You'll get this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1F_8k9-JJRyQ0H24FE3nZOAM_126pe3o3YxGd1T_LAxmmfgpMkPVR9rXBFUb99VkupEHuVFv6qD4UGex2MUyYyIsPgTDNjumvy5JyvdqH5A4CXVcCh9FwwOl8IIe7RmPDfnW0d5-7qM/s1600/18+Ball+Event+for+collision.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt1F_8k9-JJRyQ0H24FE3nZOAM_126pe3o3YxGd1T_LAxmmfgpMkPVR9rXBFUb99VkupEHuVFv6qD4UGex2MUyYyIsPgTDNjumvy5JyvdqH5A4CXVcCh9FwwOl8IIe7RmPDfnW0d5-7qM/s1600/18+Ball+Event+for+collision.PNG" height="337" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You are interested in Collisions and in particular, "On collision with another object". Select that and click on Next. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-5o4g5TGPW5gOKurw7sz4VUWWecGxys6bdEyzvg7ZER-BSCzexN7rBlyZGCU8SEHG5l7Cw-d2Wct1_Z1xim3khYHUwK5xlv5DgjpjIiRaZpeNYclj5QscsCzu2OoJBJIpasrFtkuyyo/s1600/19+Ball+collision+parameters.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-5o4g5TGPW5gOKurw7sz4VUWWecGxys6bdEyzvg7ZER-BSCzexN7rBlyZGCU8SEHG5l7Cw-d2Wct1_Z1xim3khYHUwK5xlv5DgjpjIiRaZpeNYclj5QscsCzu2OoJBJIpasrFtkuyyo/s1600/19+Ball+collision+parameters.PNG" height="172" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Construct 2 wants to know what object you want to collide with. How about EdgeBottom?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6Vc0GdQgLUqaZKPFndL23WGpeEyKHtOzYsbs5Vzb7k52NtUNuvbPXNlAgqh8NwrRU48e-SbnOpM9N0dnOGxLpvAfyJ_pkUQfBgSflq6Chx1986aLIokLcPK_yy_U9x7a-WaXauKsiXs/s1600/20+Ball+Collision+with+EdgeBottom.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6Vc0GdQgLUqaZKPFndL23WGpeEyKHtOzYsbs5Vzb7k52NtUNuvbPXNlAgqh8NwrRU48e-SbnOpM9N0dnOGxLpvAfyJ_pkUQfBgSflq6Chx1986aLIokLcPK_yy_U9x7a-WaXauKsiXs/s1600/20+Ball+Collision+with+EdgeBottom.PNG" height="193" width="400" /></a></div>
<br />
Click on Done to end your Event. But now you must select an Action to go with that Event.<br />
<br />
Click on Add action and choose the Text object. Then select "Set Visible" and make the visibility "Visible".<br />
<br />
Next do the same thing and add a second action and then choose Text and this time select "Set Text" and give it the value "Game Over!"<br />
<br />
Finally, to stop the ball, add a third Action for the ball. Under Bullet, select "Set Speed" and give it the value zero. Your ball will stop.<br />
<br />
Here's what your Event sheet should look like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQN26sSSxGbe98t4rocwRriZMdgAhDql55-iiohQP-VWWNrzR5FzQxKcOzcx27ov4NkYK_02ydELGdOp4ZRrDeuajNzTCHX_k3sk-GTtt5pMYjjzCpuFUhXUYnUUvfYx8rNdgL8yN0u2Y/s1600/23+all+events.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQN26sSSxGbe98t4rocwRriZMdgAhDql55-iiohQP-VWWNrzR5FzQxKcOzcx27ov4NkYK_02ydELGdOp4ZRrDeuajNzTCHX_k3sk-GTtt5pMYjjzCpuFUhXUYnUUvfYx8rNdgL8yN0u2Y/s1600/23+all+events.PNG" height="162" width="400" /></a></div>
<br />
That's it. You're done! Just press the big arrow at the top and run the game. You can export it and choose "Open Web App" which is the name of the Firefox OS Marketplace. If you want to put it in the Marketplace, just make sure you change the icons from Construct 2 to your own icons and that all your information applies to you, not to me or Construct 2 defaults.<br />
<br />
This is just so cool! Now anyone can make a game for Construct 2.<br />
<br />
Here is what the results looks like for Firefox OS:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEhKsX1nwLubjN3QBfYAMrbHNzF444lpv87vCyn_mXJXiMJrWlSw60ApMZt4D5v2-8DKQsmhBjBYk-wRfZnwhGwQnJbK17tu3yO5KGCl7mmNaNS7lU9IosRF_dq6SxmLbkHEGTb4HP8Q/s1600/ball+and+paddle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEhKsX1nwLubjN3QBfYAMrbHNzF444lpv87vCyn_mXJXiMJrWlSw60ApMZt4D5v2-8DKQsmhBjBYk-wRfZnwhGwQnJbK17tu3yO5KGCl7mmNaNS7lU9IosRF_dq6SxmLbkHEGTb4HP8Q/s1600/ball+and+paddle.png" height="400" width="225" /></a></div>
<br />
And here is what it looks like when the game is over!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_E2rOQCsXuPqiTAsbtv17iHxr2-W5nVpoOs6SWHsfEHKq5CsPspYjvQpGJVK2SBkKbzfwqtEDttj7LcGYQmy54cZEBjPo5bwfMnLZGO1rqV08xcfH2bHrlW6yd8EZrNPrZdvu7ZN1sko/s1600/game+over.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_E2rOQCsXuPqiTAsbtv17iHxr2-W5nVpoOs6SWHsfEHKq5CsPspYjvQpGJVK2SBkKbzfwqtEDttj7LcGYQmy54cZEBjPo5bwfMnLZGO1rqV08xcfH2bHrlW6yd8EZrNPrZdvu7ZN1sko/s1600/game+over.png" height="400" width="225" /></a></div>
<br />
If you want to download a copy to run in Construct 2, you can get it at <a href="http://thulfram.com/1GAM/April%202014/PaddleFoxC2.capx">http://thulfram.com/1GAM/April%202014/PaddleFoxC2.capx</a><br />
<br />
I'll be playing around with Construct 2 for the next few weeks, finding out other cool things it does and how to transfer those cool things to Firefox OS.<br />
<br />
Stay tuned, but not iTuned!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-61311714527605927022014-04-30T10:29:00.000-07:002014-04-30T10:29:20.739-07:00Long Lost Cousin to Responsive Design (Game Programming)In my recent post on Responsive Design, at <a href="http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html">http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html</a>, I noted the interesting problems with the Software Home button and how that robbed precious screen real estate from the ZTE Open. The same issues apply to other phones, but the ZTE is especially important because the screen is small.<br />
<h2>
Software Home Button</h2>
To refresh your memory, here is the ZTE Open with no Software Home button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZa_dOF6WvKqxju1K1vSimhyBxTfgT5pVxuqrlJKTC3Hv8Ubo-e7hPvx4VprnCIyYtXb8tZ_NuXA6Mxnf8FKhcsAGYTkXEL2KvTfItJwxGz66XD3w5FytAO1YE-UtIIpVoDaLsCBY-nvQ/s1600/zte+how+big+no+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZa_dOF6WvKqxju1K1vSimhyBxTfgT5pVxuqrlJKTC3Hv8Ubo-e7hPvx4VprnCIyYtXb8tZ_NuXA6Mxnf8FKhcsAGYTkXEL2KvTfItJwxGz66XD3w5FytAO1YE-UtIIpVoDaLsCBY-nvQ/s1600/zte+how+big+no+home.png" height="320" width="213" /></a></div>
<br />
And here is the same ZTE Open with the Software Home button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGlEQ7aot8j8mpeWA1qu6hCNA8wWbgUHjbx9U7b1tzAVHhTJ6kvBHZ0F0EpXRJ2yfUp9_MtJRvmMu6KPVOys63q0h0e97LQAQugfXEiRDZtZDqSY2pH8a9THx0rZZHw_EtGR9ibrCipU/s1600/zte+how+big+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGlEQ7aot8j8mpeWA1qu6hCNA8wWbgUHjbx9U7b1tzAVHhTJ6kvBHZ0F0EpXRJ2yfUp9_MtJRvmMu6KPVOys63q0h0e97LQAQugfXEiRDZtZDqSY2pH8a9THx0rZZHw_EtGR9ibrCipU/s1600/zte+how+big+home.png" height="320" width="213" /></a></div>
<br />
50 pixels lost! <br />
<br />
André Jaenisch did some digging and discovered that this is documented on MDN. Thank you, André!<br />
<br />
MDN programming at <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System#The_software_home_button">https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System#The_software_home_button</a> says to use this CSS to detect and display the Software Home button:<br />
<blockquote class="tr_bq">
<pre class="brush: css language-css" data-number=""><b><span style="font-family: "Courier New",Courier,monospace;"><code class=" language-css"><span class="token atrule">@media not all and (-moz-physical-home-button)</span> <span class="token punctuation">{</span>
<span class="token selector">#screen:not(.software-button-disabled) > #windows > .appWindow </span><span class="token punctuation">{</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></span></b></pre>
</blockquote>
And mentions the ability to set this in the Developer Settings here at <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button">https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button</a>.<br />
<br />
I never noticed this but somewhere when I upgraded my ZTE Open from 1.0 to 1.2, the Software Home button was enabled and I noticed it.<br />
<br />
This button will turn out to be important when tablets for Firefox OS become available.<br />
<br />
You don't need to worry about this, but if you want to, you can always put in that extra bit of CSS. In any case, make sure you actually detect what your screen size is and act accordingly.<br />
<h2>
Upgrading the ZTE Open to 1.3 or 1.4 </h2>
By the way, if you have a ZTE Open, André also dug up some links on how to upgrade the ZTE Open to Firefox OS version 1.3 or 1.4. Again, thank you, André!<br />
<br />
Upgrade to Firefox OS 1.3 at <a href="http://www.gizbeat.com/4223/how-to-build-firefox-os-1-3-2/">http://www.gizbeat.com/4223/how-to-build-firefox-os-1-3-2/</a>.<br />
<br />
Upgrade to Firefox OS 1.3 at <a href="http://blog.chellinsky.net/putting-firefox-os-v1-4-on-a-zte-open/">http://blog.chellinsky.net/putting-firefox-os-v1-4-on-a-zte-open/</a>.<br />
<h2>
Viewing Screen Sizes</h2>
I actually forgot to put in the code of how to generate the numbers you see in the screen shots above. Start out with the code from my latest CSS Shell code (adapt if you're using Canvas or SVG) at <a href="http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html</a>.<br />
<br />
First I added a bit to the body to give the information a place to display:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> <h3>Width</h3><br /> <p id="ow">Outer Width</p><br /> <p id="iw">Inner Width</p><br /> <h3>Height</h3><br /> <p id="oh">Outer Height</p><br /> <p id="ih">Inner Height</p></span></b><br />
Then I added this code in the section that runs after the page is loaded:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> // Get height and width.<br /> ow.textContent = <br /> "Outer Width = " + window.outerWidth;<br /> iw.textContent = <br /> "Inner Width = " + window.innerWidth;<br /> oh.textContent = <br /> "Outer Height = " + window.outerHeight;<br /> ih.textContent = <br /> "Inner Height = " + window.innerHeight;</span></b><br />
<br />
You can also put this into console.log format. The important thing is that you know the inner and outer width and height, so you can program accordingly, but in this case, also display it so you can see what you are dealing with when looking at various devices. <br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-17355600793496461832014-04-29T17:09:00.004-07:002014-04-29T17:09:50.683-07:00Color Puzzle (Game Review)Sometimes there are games I like because I used to play them in some earlier time. Color Puzzle is one of those tames.<br />
<br />
Harken back to those early days on the Internet, around 2005 or so. I was really in love with the new iGoogle home page. It not only helped me to collect all those links I needed, but had these cool things called widgets. You could plaster them all over your home page and get the latest weather, news, and games! One of those games was called Flood-It and it had a simple but appealing game play. You chose a color and tried to fill a block by flooding.<br />
<br />
The game was by Lab Pixies. Alas, iGoogle is no more and according to Google, we don't need no stinkin' home pages. And Lab Pixies were bought up by Google and are now doing something cool for Google. Who knows what? You can still get Flood-it on Apple and Android at least, and now something similar to it for the Firefox OS Marketplace called Color Puzzle.<br />
<br />
By the way, Flood-it was so interesting that some academic researchers wrote about it and you can study their research here: <a href="http://arxiv.org/abs/1001.4420">http://arxiv.org/abs/1001.4420</a>. Interesting. But we're here to talk about Color Puzzle, which looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzPiAS7FEJ_VTHu_q49B4kHC1Kk6wRGL6Wh4r5mSjO5BuO4-vCTJbFCvegrvt8VHWNoF9PNoM0sDaH6ClYWSasKKyE9pjglSKLz7Mbr1hZdodSrNgUQePW0BmKDgniWJtU4rCbnj8kz0/s1600/CP+01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzPiAS7FEJ_VTHu_q49B4kHC1Kk6wRGL6Wh4r5mSjO5BuO4-vCTJbFCvegrvt8VHWNoF9PNoM0sDaH6ClYWSasKKyE9pjglSKLz7Mbr1hZdodSrNgUQePW0BmKDgniWJtU4rCbnj8kz0/s1600/CP+01.png" height="400" width="225" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
This screen shot was taken from my Geeksphone Peak and it might have been nice for the creator to fill in all that boring white space with some design or a distracting ad, or anything. White space isn't cool. Responsive game design hasn't come to Color Puzzle!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So the game is very simple. How simple? Here's the help screen for this game:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9usAH0sKAvCrw8NjNg5DTB3Pt8bY1NH9ylo9brWny13exePeGbqtg8ciJjkFFcYKr8shwE8sV9l_jcvPk4pUvdggiLXzQEp5ArfL7aweg3H865XmzIeORnTIDbuUi6wkhjy1hFxwep8/s1600/CP+07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9usAH0sKAvCrw8NjNg5DTB3Pt8bY1NH9ylo9brWny13exePeGbqtg8ciJjkFFcYKr8shwE8sV9l_jcvPk4pUvdggiLXzQEp5ArfL7aweg3H865XmzIeORnTIDbuUi6wkhjy1hFxwep8/s1600/CP+07.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That's pretty exact and works well. A simple game, but that research paper I cited above is a 20 page PDF. Whew!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This game also has score boards so you can see how well you do against others. You get to those scores by clicking on the "hamburger" on the upper left. Yes, that's what the three bars are called (or was that hot dog? Or a trigram for the I Ching?) Click on the three bars and you get these choices:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6x-r8eFyQmg1VCyxz29SFeeBZmwsuSEYoajl_-O3SI5QkBbalG8cW8X7-hNiLZfw699yxxOzBXM0S34PC6jAmtrSenjYPWdlsiK0C9x2xHvfFq5vW8lRUFNw-54au6gnRf8uCVITwnwU/s1600/CP+02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6x-r8eFyQmg1VCyxz29SFeeBZmwsuSEYoajl_-O3SI5QkBbalG8cW8X7-hNiLZfw699yxxOzBXM0S34PC6jAmtrSenjYPWdlsiK0C9x2xHvfFq5vW8lRUFNw-54au6gnRf8uCVITwnwU/s1600/CP+02.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Interesting! The black menu on the left goes all the way to the bottom of the Geeksphone Peak, but looks fine on the ZTE Open. Responsive after all, but doesn't fill that white space.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You've already seen "How to Play" and here's what the "My Profile" looks like:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieyGKWZTDJusqxZz6iQckiJaNVW90xvCLykkOi8LFUC9TkxsiqNe2hv2ang1fbYpkWsWB5PqnPMOi2GOKnAbjDCr1gnJwtxnWJthECundlbAbqzXsqnAEzD-hXB3E2mAX38zwNYRIkG8/s1600/CP+03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieyGKWZTDJusqxZz6iQckiJaNVW90xvCLykkOi8LFUC9TkxsiqNe2hv2ang1fbYpkWsWB5PqnPMOi2GOKnAbjDCr1gnJwtxnWJthECundlbAbqzXsqnAEzD-hXB3E2mAX38zwNYRIkG8/s1600/CP+03.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Wow! My first game and I got a score of 5,649,661. In fact, I'm ranked number 3496 in the world. Maybe I should become a professional Color Puzzle gamer. Well, maybe not, when I see that Nicole has a score of 46,010,683. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But the screen continues:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UrxqazqvTr4rDoC7PORR-uGL_CmLaoRE3BiSboIlVyJBYqQZo7EMIP0NGo916SpZ90nYyfg2Xny9LS1rCD9joKe5TvmXoNfZMO-6GVnxrq5oXRVuUqRbkhVGHIfKePIgWGcyP8hmneA/s1600/CP+04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UrxqazqvTr4rDoC7PORR-uGL_CmLaoRE3BiSboIlVyJBYqQZo7EMIP0NGo916SpZ90nYyfg2Xny9LS1rCD9joKe5TvmXoNfZMO-6GVnxrq5oXRVuUqRbkhVGHIfKePIgWGcyP8hmneA/s1600/CP+04.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I got some badges. Scrolling down more:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDo4gdKF9mMkLyjDnNfvv-HUaNwXfp02Gftv9d3OpVCCU8sp9YyABvBP-heTT8_0O8EQKea4Rx0ryEXHpzSFQa2kFOrXRy6zsMO3jpXlWZ6k_CMpy9eAEVaRNluYLP2VSATPb6wWtnKU/s1600/CP+05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDo4gdKF9mMkLyjDnNfvv-HUaNwXfp02Gftv9d3OpVCCU8sp9YyABvBP-heTT8_0O8EQKea4Rx0ryEXHpzSFQa2kFOrXRy6zsMO3jpXlWZ6k_CMpy9eAEVaRNluYLP2VSATPb6wWtnKU/s1600/CP+05.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
And more badges!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
When I go to the Leaderboard menu item, I see that I'll never be a player! Apparently the scores above are just current, perhaps for the day or week. Here's the real players:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTdflGnFDbM8IPpjVvQyoO_AMGpVhJBh5IIgRy0IbEQOtc9EacVUFYvURogiKZ8aeUXhol4STqotNbK0Gdk1onpN_PWAXz3xPXlACuDA6mGtSlsY-0hNEIERkDQ6F8XkJkgfvzJSdN34/s1600/CP+06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTdflGnFDbM8IPpjVvQyoO_AMGpVhJBh5IIgRy0IbEQOtc9EacVUFYvURogiKZ8aeUXhol4STqotNbK0Gdk1onpN_PWAXz3xPXlACuDA6mGtSlsY-0hNEIERkDQ6F8XkJkgfvzJSdN34/s1600/CP+06.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
OMG! A score of 1,186,632,207,378. Maybe they should use scientific notation! I bow down to Mustang Sally, the first trillionaire. Clearly this not only a game of skill, but also one of speed. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So how do you play?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's is a typical screen:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieh0J6nuZjNJ5QOh_2DqQSEkf0Jqxhum61UHkqQoLM0BWa1_6OEwgHcvdk2wqC79U_iCTZwLYilVjjYtJO9sqv4PO8sp15Rw53-z4c8InbF7mTj509NvTPwA1B5sdi2JdXFWCQlbdv1_w/s1600/CP+08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieh0J6nuZjNJ5QOh_2DqQSEkf0Jqxhum61UHkqQoLM0BWa1_6OEwgHcvdk2wqC79U_iCTZwLYilVjjYtJO9sqv4PO8sp15Rw53-z4c8InbF7mTj509NvTPwA1B5sdi2JdXFWCQlbdv1_w/s1600/CP+08.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
You have six large squares at the bottom, each a different color. You start out by looking at the light blue square at the top left. You want it to expand, to flood, by picking the color it should change to. Your best choices are yellow or orange. If you pick orange, you get two squares for your first score. They will turn orange. But it you pick yellow, you'll have three squares and they will be yellow.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The strategy is to expand the number of blocks as much as you can with each move. So I picked yellow and got this screen:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiFdu6Udu7AEk4qzJwaBjFlt7eocB1JZk7U_CPS31t3Vn4RgGKHRqtCsF-xFFVynBSsvDUMlDZbqhhpFPeif6b0uNqlEYa9ct9LX5Sp29QA6UWhgO2YmdQ_1We4oBOAtmIf5WZMszaL64/s1600/CP+09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiFdu6Udu7AEk4qzJwaBjFlt7eocB1JZk7U_CPS31t3Vn4RgGKHRqtCsF-xFFVynBSsvDUMlDZbqhhpFPeif6b0uNqlEYa9ct9LX5Sp29QA6UWhgO2YmdQ_1We4oBOAtmIf5WZMszaL64/s1600/CP+09.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The next step is obvious. Pick green! That way you will increase the number of blocks you "own" to eleven! Sometimes it is obvious, but like many other strategy games, sometimes you will choose a shorter gain for a longer gain, something that will take you to a big gain. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I picked green.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC47T3tOPdrtSzgb-0z5X0eCzmE4CjiyArTo7NIUtNMaEP84npmKj47iBvlHZB89sd3yydvY42N292BxeTwEa5K1Wn2vOe416xuWM0ZvTzeUmYhnlbpqbg4-6VIdWUblFCiQwp3nR4VlA/s1600/CP+10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC47T3tOPdrtSzgb-0z5X0eCzmE4CjiyArTo7NIUtNMaEP84npmKj47iBvlHZB89sd3yydvY42N292BxeTwEa5K1Wn2vOe416xuWM0ZvTzeUmYhnlbpqbg4-6VIdWUblFCiQwp3nR4VlA/s1600/CP+10.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
What next? </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I picked orange because there were four orange blocks touching the green. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now it looks like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsFc7S7RjlY2iTKKaHWBhcj7HDb9DS3aGT_sRjXL3V3dbCLN9kERoHJAfZe2V2EA5MYT-ejFS6bd6lf-xZFtUA9lVy32Nib7fLxkMfRN22ttyGKLccREqQJMEgWwRtGPRlCRgMaJpu50/s1600/CP+11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsFc7S7RjlY2iTKKaHWBhcj7HDb9DS3aGT_sRjXL3V3dbCLN9kERoHJAfZe2V2EA5MYT-ejFS6bd6lf-xZFtUA9lVy32Nib7fLxkMfRN22ttyGKLccREqQJMEgWwRtGPRlCRgMaJpu50/s1600/CP+11.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
I'll skip the next several steps and show you what it looks like near the end:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMO_CSGs1Au0SsN544qyxyjaazZChk42NWp_KR_lcajSeWEQ0-pE3Bwie8obUGzdzbhWYD_MLjFyTiSv0QmeiWQB8ptrGzyGgqrNjUnNVI1i-5SGbyW0LAHmnsHV-8a0pFwPYAhlOq-cM/s1600/CP+12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMO_CSGs1Au0SsN544qyxyjaazZChk42NWp_KR_lcajSeWEQ0-pE3Bwie8obUGzdzbhWYD_MLjFyTiSv0QmeiWQB8ptrGzyGgqrNjUnNVI1i-5SGbyW0LAHmnsHV-8a0pFwPYAhlOq-cM/s1600/CP+12.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Here we can see that the field is nearly flooded with dark blue. What to pick next? The answer is NOT purple. If you do that you can't flood the purple square in the lower right corner this turn. So the next move would be to flood something else and open up the purple corner. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
How about orange? Yes! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDP8p5i6uRh11ZXBgpFhQnNvjuTyPUViunL3Fhxsbg1p5jjk1iG0gX7t78OaM7PFJDuL90Etn8XS4UrrzyQZNtZNreDknxAmNNxQmaXjlXFii5S1Vn_Z-Bpp-kLQD-3admDpcDhu4t-gQ/s1600/CP+13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDP8p5i6uRh11ZXBgpFhQnNvjuTyPUViunL3Fhxsbg1p5jjk1iG0gX7t78OaM7PFJDuL90Etn8XS4UrrzyQZNtZNreDknxAmNNxQmaXjlXFii5S1Vn_Z-Bpp-kLQD-3admDpcDhu4t-gQ/s1600/CP+13.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now it doesn't matter. Pick purple and then green and the game is over! That's how I got my score, but I'm sure I wasn't fast and you can do a lot better. Maybe even take on Mustang Sally.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's my first score:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBQgNyAID72md5S1OykJpvaWSSt9n6AwdU24QzZBhTE1WLGH09ajuEUWsyUgbJJeYWnyP1UgLGh_oDuBZiSw39V-hEiF5btzjziN4XtsvutsGIvmlrEwT6M5JJCnF8PTa6HGTGd4DZAEA/s1600/CP+14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBQgNyAID72md5S1OykJpvaWSSt9n6AwdU24QzZBhTE1WLGH09ajuEUWsyUgbJJeYWnyP1UgLGh_oDuBZiSw39V-hEiF5btzjziN4XtsvutsGIvmlrEwT6M5JJCnF8PTa6HGTGd4DZAEA/s1600/CP+14.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Actually my second, but I wiped the game and started over again so I could get better screen shots. You can see that the score is a factor of moves and time. I'm not sure how it is calculated, but maybe someone more mathematical than I can figure it out. My only math skills are Boolean.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Anyway, this game is just great and works as advertised. No music, a little too much white space, so this only gets a 4 out of 5, but it was close to a 5. Maybe a 4 because this isn't an original game and Lab Pixies got there first!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Puzzle<br />
Score: 4 (out of 5)<br />
Tested on: ZTE Open and Geeksphone Peak<br />
Get it at: Firefox Marketplace<br />
Developer: Catlin Software<br />
<a href="https://marketplace.firefox.com/app/color-puzzle">https://marketplace.firefox.com/app/color-puzzle</a><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-49303312591865094212014-04-23T18:35:00.000-07:002014-04-23T18:35:35.579-07:00Bouncing Ball in Construct 2 (Game Programming)Construct 2 is a game-making engine. With a few clicks, you can make almost any kind of game and publish it in an amazing variety of platforms. At last count, you could create games for the following:<br />
<br />
The Web (HTML5)<br />
Wii U<br />
iPhone<br />
Android<br />
Windows 8 <br />
Windows RT<br />
Windows Phone 8<br />
Windows Desktop<br />
Mac Desktop<br />
Linux Desktop<br />
Blackberry 10<br />
Tizen<br />
Facebook<br />
Chrome Web Store<br />
Amazon Appstore<br />
<br />
and<br />
<br />
<b><span style="font-size: large;">Firefox Marketplace!!!</span></b><br />
<br />
And it does this with no coding required!<br />
<br />
You can try it out yourself for free at <a href="http://www.scirra.com/">http://www.scirra.com</a> and see what you thing. If you like it, you can buy a personal copy for £79 ($119) or a business copy for £259 ($399). While that may seem high, it is a one-time fee and you only need to pay for a business license if you earn more than $5000 USD. That's cheaper than most other similar products (GameMaker and Stencyl).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnszNDY4uOddRndhAL3KGWNUeTyWq2vap0bIEksg5Zz3hlhxzpZuoxTvRUuwEIte1wsD3ylNnXeP8-evPeBOGafAqxD1euSZEsAFVOIvaIBUpsDsrK9Ls7g9byYJpQJnEfEuqevD_HU8/s1600/Scirra+Monster.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnszNDY4uOddRndhAL3KGWNUeTyWq2vap0bIEksg5Zz3hlhxzpZuoxTvRUuwEIte1wsD3ylNnXeP8-evPeBOGafAqxD1euSZEsAFVOIvaIBUpsDsrK9Ls7g9byYJpQJnEfEuqevD_HU8/s1600/Scirra+Monster.PNG" /></a></div>
<br />
That's the Construct 2 monster you see when you boot up the actual game engine. Construct 2 was started by two brilliant brothers in London named Ashley and Tom Gullen, and their web site and forum is the most helpful and fun place for people using their product!<br />
<br />
I've used Construct 2 in the past and even put up a (lame) game in the Chrome Web Store called Tilt-A-Twirl at <a href="https://chrome.google.com/webstore/detail/tilt-a-twirl/klabggekijaanbjbakdimcdikdhihhdn">https://chrome.google.com/webstore/detail/tilt-a-twirl/klabggekijaanbjbakdimcdikdhihhdn</a> for a contest. I like coding and I think that coding in HTML5 with JavaScript, CSS, SVG, and Canvas is a lot of fun.<br />
<br />
Construct 2 started out as a game engine to create HTML5 games. But it has grown rapidly! I first took notice of them again when they provided an export for games on the Wii U. Right now you can buy a game made in Construct 2 in the Wii U eShop called Block Drop U, a cool game that's a cross between Jenga and Angry Birds. Writing games for Nintendo hasn't been easy, but now it is!<br />
<br />
Then, I was happily surprised to see that Construct 2 then supported exporting to Firefox OS. So I thought I would try it out and I'm very pleased. I'll write some games and share them with you and if you have been held back because coding in HTML5 looks complicated, you might want to see how easy Construct 2 is for making a game you can put in the Firefox OS Marketplace!<br />
<br />
In keeping with tradition, my first game will be bouncing a ball, similar to the way that I already did in previous posts.<br />
<h2>
Bouncing Balls</h2>
<b>CSS</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-in-css-game-programming.html">http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-in-css-game-programming.html</a><br />
<br />
<b>Canvas Arc</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-with-canvas-arc-game.html">http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-with-canvas-arc-game.html</a><br />
<br />
<b>Canvas Bitmap</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/canvas-bitmaps-and-requestanimationfram.html">http://firefoxosgaming.blogspot.com/2013/11/canvas-bitmaps-and-requestanimationfram.html</a><br />
<br />
<b>SVG Body</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-1-game-programming.html">http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-1-game-programming.html</a><br />
<br />
<b>SVG JavaScript</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-2-game-programming.html">http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-2-game-programming.html</a><br />
<br />
<b>SVG DOM</b><br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-3-game-programming.html">http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-3-game-programming.html</a><br />
<br />
Whew! Six ways to bounce a ball in HTML5, all working in a Firefox OS phone. And what a trip down memory lane for me!<br />
<br />
But now I'll show you a much simpler way to bounce a ball in Firefox OS, and one that will even prepare all the files for you to submit to the store.<br />
<h2>
Getting Started</h2>
For this demo, you just need a simple ball. I redrew mine slightly, making it 32x32 with the ball being solid and the rest transparent.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27Y7IKquOWJfRqR1ImsVYh3HAZMFzb-1l4wW5sWwmEzHovcL28cMjnAaI39eeEye8u5XnOtPEStJXMbyIaKNdI_fMyrnnEjB3nU0ClYqmfhqtrwxLdqJnEHv2EmbO5QrvbJ9O66OqT5Y/s1600/ball.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27Y7IKquOWJfRqR1ImsVYh3HAZMFzb-1l4wW5sWwmEzHovcL28cMjnAaI39eeEye8u5XnOtPEStJXMbyIaKNdI_fMyrnnEjB3nU0ClYqmfhqtrwxLdqJnEHv2EmbO5QrvbJ9O66OqT5Y/s1600/ball.png" /></a></div>
<br />
I went with 32x32 because I wanted to experiment with grid sizes and that seems like a good place to start. The old one was 20x20. Pixels, not furlongs.<br />
<br />
Next I booted up Construct 2. It looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjivBVYQX0B0zHRALU58P7cyAYxRvoD6Qf7XmQhqW4rf17O5_AXeJy1JOS8SrUorhqKc5Mv3wseee0pXAfuWkMzH6BKloXV6F_rwjAbUAy3kFC_30ctryMfCbMugDQWcADweUlCpzrZ47U/s1600/Construct+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjivBVYQX0B0zHRALU58P7cyAYxRvoD6Qf7XmQhqW4rf17O5_AXeJy1JOS8SrUorhqKc5Mv3wseee0pXAfuWkMzH6BKloXV6F_rwjAbUAy3kFC_30ctryMfCbMugDQWcADweUlCpzrZ47U/s1600/Construct+2.PNG" height="300" width="400" /></a></div>
<br />
I won't try to explain how the user interface works. There are lots of tutorials, but I'll just say that there are windows on either side and top and that the game board will be in the middle.<br />
<br />
Here's what Construct 2 looks like when you start a new project:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_Y_VjWoqJNsIntAqUjIOPMJU9oYxiWLhkS8rzzS5Vysa_ceg7aTMJU4EZfxVbhYhpYNEOuBKu3V4aD0fYMQCk1V5Nh37W6DEaUbLV835lwI3tY9OzY5Tsur1y3rcaPtc6WwxZvBtYn4/s1600/Construct+new+project.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_Y_VjWoqJNsIntAqUjIOPMJU9oYxiWLhkS8rzzS5Vysa_ceg7aTMJU4EZfxVbhYhpYNEOuBKu3V4aD0fYMQCk1V5Nh37W6DEaUbLV835lwI3tY9OzY5Tsur1y3rcaPtc6WwxZvBtYn4/s1600/Construct+new+project.PNG" height="301" width="400" /></a></div>
<br />
When you start, you can choose from a ton of different projects, depending on the type of game you want to create. I just created a blank one.<br />
<br />
The project consists of a Properties window on the left, a Projects window on the upper right, and a Quick Access tool bar at the top. The contents of these windows will change as you progress. In the middle is the Layout for your game.<br />
<br />
The first thing to do is set up the main details of your game. In Construct 2, there are many ways to work with various windows, so I'll give you one way and you can find others. To get the project started, click on <b>New project</b> at the top of the <b>Project </b>window at the top right.<br />
<br />
This will set up the main project Properties in the window on the left so you can fill in the main details. Here's what my details are:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhtkIO3Ar1q9eZjkaxX5GVVdTzBD0EpDe_Gr7p9HG80_m0m9qo-ndU8FU7ci3lAtPpvl1j98LT8dSBaEq6uM5ml2aGC2O-Vgd49VQuBb_gmvCIcPC8gItedYGkXBBqe91W3LvpTX6Q6Y/s1600/Project+Properties+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhtkIO3Ar1q9eZjkaxX5GVVdTzBD0EpDe_Gr7p9HG80_m0m9qo-ndU8FU7ci3lAtPpvl1j98LT8dSBaEq6uM5ml2aGC2O-Vgd49VQuBb_gmvCIcPC8gItedYGkXBBqe91W3LvpTX6Q6Y/s1600/Project+Properties+01.PNG" height="400" width="237" /></a></div>
<br />
The first block (About) is unique to each game. The ID is created from the website name but the rest is obvious. The important thing in the Settings is the size. I chose 320x448 because that is roughly the size of the ZTE Open and not much smaller than the Geeksphone Peak. I chose the defaults for the Configuration section except that I chose Letterbox scale for the Fullscreen in browser and Portrait. You can fiddle with the rest and it's all documented very well by Construct 2. Essentially I'm picking something that will fit on a Firefox OS Phone.<br />
<br />
Next I wanted to set up the Layout (game board). I clicked on <b>Layout 1</b> in the <b>Project </b>window on the right. The Properies window on the left changes to reflect this, and here is my Layout 1 properties. By the way, you can have more than one layout so you can have different levels. Each layout can have multiple layers. Here's mine:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4LYpPULBDrDY_98McDnVWtipakIenz3xPmG6LYX-Bg3bGeQT3hCTGpJiU5VTfhsN7Q33u3UAk1BaCDRLKFcYGZy-_osLwT2iK_O4i0SynwT1jbpfoA6UgbgvazRM_7maRVYRVwiiDMKw/s1600/Layout+View+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4LYpPULBDrDY_98McDnVWtipakIenz3xPmG6LYX-Bg3bGeQT3hCTGpJiU5VTfhsN7Q33u3UAk1BaCDRLKFcYGZy-_osLwT2iK_O4i0SynwT1jbpfoA6UgbgvazRM_7maRVYRVwiiDMKw/s1600/Layout+View+01.PNG" height="400" width="305" /></a></div>
<br />
This is pretty simple. All I changed was to make the layout the same size as the screen I defined for the Project view: 320x448. The Margins are just the space outside of the actual layout.<br />
<br />
Next I turned on the grid. Having a grid to place objects is very handy. You can do that by clicking on the View tab at the top and then selecting a grid size like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojY5mAp_FPyPTNAygkryQ0-G47o3w5BgHDonFrj4wiM0zvwbesF64_iuT-766qO6J9BzKw9P64TbWGoHlBIpY2_6k33lgZzxY8maxq5bKzxrNEYzkkYnhkO4p4gFlFPA-lc8f6kRhK0k/s1600/Project+View+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojY5mAp_FPyPTNAygkryQ0-G47o3w5BgHDonFrj4wiM0zvwbesF64_iuT-766qO6J9BzKw9P64TbWGoHlBIpY2_6k33lgZzxY8maxq5bKzxrNEYzkkYnhkO4p4gFlFPA-lc8f6kRhK0k/s1600/Project+View+01.PNG" height="133" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Snapping and showing are good things and the size is 32x32 pixels.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Everything is set up to start adding art and making them objects. To add the ball, double-click on the center of the screen, which should be Layout 1. If you don't see Layout 1 highlighted in the tabs at the top, click on that to make the layout active. You can tell if the tab is active because you can see a little X in the right of the tab. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's the tabs showing that Layout 1 is active:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga54P1szQIeOmdBMiLHiVrsyTHpCUhl0nIfds1kQm55pEHxYjjRB7aWcSeje2WhaAM2jiUQDt8SbFXQKcfY1WcJZoYxcfZHHBsOE4t4n_eovYbPvcBeHNR_SuoK9nfxk5pvaCGjGjWVfw/s1600/Construct+active.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga54P1szQIeOmdBMiLHiVrsyTHpCUhl0nIfds1kQm55pEHxYjjRB7aWcSeje2WhaAM2jiUQDt8SbFXQKcfY1WcJZoYxcfZHHBsOE4t4n_eovYbPvcBeHNR_SuoK9nfxk5pvaCGjGjWVfw/s1600/Construct+active.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
And here's one showing that Layout 1 is not active. This demo doesn't use event sheets but they are cool once you get more complicated games with ... events!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_X4i52oasm0BYoNtbh4f9t5R4ZTKF7vhP8kZy4qlqHEMbU6_1ALvq_xhkeV2rTuVb9joC2c5uwEpwjAKHd83B22jMvlYmHtfQSNKXVf7q6JOm1O4Ueb6hFnHRUB9urKsPglhsIgXats/s1600/Construct+not+active.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_X4i52oasm0BYoNtbh4f9t5R4ZTKF7vhP8kZy4qlqHEMbU6_1ALvq_xhkeV2rTuVb9joC2c5uwEpwjAKHd83B22jMvlYmHtfQSNKXVf7q6JOm1O4Ueb6hFnHRUB9urKsPglhsIgXats/s1600/Construct+not+active.PNG" /></a></div>
<br />
So anyway, double-click on the layout sheet. You'll bring up an Insert New Object dialog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksZkFWze44Fi3mx5HRT6zB-VhahM3H-ma-T5qb0fO1VMbQkuEzgYe84Lkj8Kg1S28eHvEEe6ynXAnAyzSP463rCyD0NZjAK29KPSs7lFNDz5DHQSWMnXkqWLNy-E2uuiFAxqdLLZymoY/s1600/Construct+new+object.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksZkFWze44Fi3mx5HRT6zB-VhahM3H-ma-T5qb0fO1VMbQkuEzgYe84Lkj8Kg1S28eHvEEe6ynXAnAyzSP463rCyD0NZjAK29KPSs7lFNDz5DHQSWMnXkqWLNy-E2uuiFAxqdLLZymoY/s1600/Construct+new+object.PNG" height="343" width="400" /></a></div>
<br />
Double-click Sprite. The window will disappear and you'll get a cross-hair. Click where you want the sprite to go on your layout. When you do, you'll get a new dialog saying <b>Edit Image: Sprite</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdqjDnpUbMES86PiIMxFwzla3YCZoWRsHkiy2OEt7DZoQvg_sdJl_ZS8eonv2sGaoHB4MdT0_d9QR6RljjNUYmWVg4gjrd8nwPm1ODTSjjrmqfCmFTIZTINGQn3_jY8EfvV8T1dB0LTk/s1600/Consruct+edit+image.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdqjDnpUbMES86PiIMxFwzla3YCZoWRsHkiy2OEt7DZoQvg_sdJl_ZS8eonv2sGaoHB4MdT0_d9QR6RljjNUYmWVg4gjrd8nwPm1ODTSjjrmqfCmFTIZTINGQn3_jY8EfvV8T1dB0LTk/s1600/Consruct+edit+image.PNG" height="303" width="400" /></a></div>
<br />
Click on the little folder near the upper left to insert an image. I picked my old 20x20 ball.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhNRLRI4zvu02Cj_xxxIxrzl-7UstcWsUv6_QGMNwXOO1SBVX_-VMNsKumWz_yw9OdECQqDv8Sb681NUcS4LXzy3IcNtgy2ivgkKx4rZHyLg5DXDptW6yYQ_b4sZDwE_DQfP7nTIrbjvw/s1600/construct+edit+image+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhNRLRI4zvu02Cj_xxxIxrzl-7UstcWsUv6_QGMNwXOO1SBVX_-VMNsKumWz_yw9OdECQqDv8Sb681NUcS4LXzy3IcNtgy2ivgkKx4rZHyLg5DXDptW6yYQ_b4sZDwE_DQfP7nTIrbjvw/s1600/construct+edit+image+2.PNG" height="303" width="400" /></a></div>
<br />
You'll see at the bottom that it says 20 x 20 but I wanted it to be 32x32. So all I had to do was click on the Resize button near the top right (a two-headed arrow) and then resize it.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ojlWbXfvs1TDQFI-6bwI0Vf45DVMn-wsmnSYXcSEr7tUk9ikR0LmCi8fVYqhXX6CbqwZUlUd1R4DKE3was3zxgT8Z876CUZ1QNcQ-sJhy6r23jq5y8ZGIXkeCIWlzpZeDjt5ImauuhM/s1600/Construct+edit+image+3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ojlWbXfvs1TDQFI-6bwI0Vf45DVMn-wsmnSYXcSEr7tUk9ikR0LmCi8fVYqhXX6CbqwZUlUd1R4DKE3was3zxgT8Z876CUZ1QNcQ-sJhy6r23jq5y8ZGIXkeCIWlzpZeDjt5ImauuhM/s1600/Construct+edit+image+3.PNG" height="303" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Easy! Just click on the red close button at the very top right and your ball will be on the board known as Layout 1.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5sBq_etvFJFnzyU-07P_bSvs-yS9EnOla5ylnqDVc1kMHsQtL-55p3M-uRx4BPnW3BrR-alno-BObQxVdwfPjoixWw9YrkrRkgnHOwL-iyCi9o_e-RkEnIdlyMo6hy0O4bnjeoZC1YA/s1600/Construct+Layout+with+Ball.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5sBq_etvFJFnzyU-07P_bSvs-yS9EnOla5ylnqDVc1kMHsQtL-55p3M-uRx4BPnW3BrR-alno-BObQxVdwfPjoixWw9YrkrRkgnHOwL-iyCi9o_e-RkEnIdlyMo6hy0O4bnjeoZC1YA/s1600/Construct+Layout+with+Ball.PNG" height="400" width="290" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pretty cool. Huh? But that's not a game yet and not even a ball bouncing. For it to bounce, we need walls. Four of them.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So next you want to insert invisible walls. They will be at the four edge of the screen. Here's how I did it. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I inserted an object like the ball, but this time I didn't give it any art. I did the wall on the right first. Once you create an object, you can resize it on the layout. So I dragged it over to the right edge so it looked like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MRTtKVx9vizFJ7HrE55IQJKCGT2QK3oYATWK1JZoAr6LMDlJp5XNHT3nvG-gc3vinr4JTRCgC-ZnCLuPFJc31-lb_Kxi521_cemZriJGF7-N0sdQFmrHUwQFByuurjofpTNUXXKgt5U/s1600/Edge+Right+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MRTtKVx9vizFJ7HrE55IQJKCGT2QK3oYATWK1JZoAr6LMDlJp5XNHT3nvG-gc3vinr4JTRCgC-ZnCLuPFJc31-lb_Kxi521_cemZriJGF7-N0sdQFmrHUwQFByuurjofpTNUXXKgt5U/s1600/Edge+Right+01.PNG" height="400" width="85" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I dragged it so that the wall is on the right side. It's the light purple rectangle. The right edge of the wall is flush with the right edge of the layout, and the top and bottom match.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then I dragged the left edge of the wall so it is flush with the right edge of the board so it looks like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5cgroRe7-y8XybIgSaG9iPHJgAxz0Hk_abhffHB1hN55nVejDp2vP0D8lX1p9h-N0cariTYEPxVEAC-zQNdR9xe9BgYJmETexCy_1YcfZSTH_3M4aGsx60EotvM3gQp-LWVvr5HBHSs/s1600/Edge+Right+02.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5cgroRe7-y8XybIgSaG9iPHJgAxz0Hk_abhffHB1hN55nVejDp2vP0D8lX1p9h-N0cariTYEPxVEAC-zQNdR9xe9BgYJmETexCy_1YcfZSTH_3M4aGsx60EotvM3gQp-LWVvr5HBHSs/s1600/Edge+Right+02.PNG" height="400" width="73" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can hardly see it, because now it is just a dark blue line with handles on the middle and ends. Handles are bits you use to drag an object. Be careful. Once you click elsewhere on the layout, the wall will vanish. But you can always see it again by clicking on the wall name in the Object types list of the Projects window. As you create each wall, you might want to give them names so you can identify them in the Projects window more easily. Create the other three walls, give them names, and then give the ball a name also, like "Ball". Your object list should look like this:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCs-8c_fKJ4T0tazxD_7RWm2P4_M9mWqLVRXlrWviuyCmmcoaMqxmWmfivMY11tgbYVoVgo2G01NXBbQwaaB-P1-M58zJzqIfR1yhUIpyx77yiaOlpEmuXSkbpMna23WjznljoFfn5GD8/s1600/Project+Objects+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCs-8c_fKJ4T0tazxD_7RWm2P4_M9mWqLVRXlrWviuyCmmcoaMqxmWmfivMY11tgbYVoVgo2G01NXBbQwaaB-P1-M58zJzqIfR1yhUIpyx77yiaOlpEmuXSkbpMna23WjznljoFfn5GD8/s1600/Project+Objects+01.PNG" height="400" width="241" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Object lists are great because you can see what objects you have, and by click on one in the list, that object will be highlighted on the board layout. Note that the Edges (walls) don't have an icon because they don't have art and are invisible.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Your objects are in place. Now you just need to set a few properties and your game is finished.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
First let's set the properties of each wall. Click on one of the Edge objects. You'll see the properties on the left:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnJF_u9Ih7AkRO51XxB1EqMIcqDi44WcWbttnxpZafibCBnKQmhOK75rTfiGFAYbam8XL2Ied3xGrzKc_Bzj_Dm84-JXd-FAakEsoCbR9UI4i8nY2DszpyAfM_4I8QuRpHJbxrfA078c/s1600/Construct+Behaviors+-+wall.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnJF_u9Ih7AkRO51XxB1EqMIcqDi44WcWbttnxpZafibCBnKQmhOK75rTfiGFAYbam8XL2Ied3xGrzKc_Bzj_Dm84-JXd-FAakEsoCbR9UI4i8nY2DszpyAfM_4I8QuRpHJbxrfA078c/s1600/Construct+Behaviors+-+wall.PNG" height="400" width="191" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I didn't change anything here except to click on <b>Add / edit Behaviors</b>. This brings up the behavior dialog, which lets you define how objects ... behave!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRWOgZPmEuu_wdaKDVSdSnedDUodFnKt8rEJkDbDuZ0_yQ1hzPIsk6WEo-AjwfD0VziX4lOiCx_tbGb4hcDPAHPvUd-fsI_56hmIj9WBXuaUmFLmYSntfX3Zbnd0NyAjHIjM36k79YMzY/s1600/EdgeTop+Behavior+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRWOgZPmEuu_wdaKDVSdSnedDUodFnKt8rEJkDbDuZ0_yQ1hzPIsk6WEo-AjwfD0VziX4lOiCx_tbGb4hcDPAHPvUd-fsI_56hmIj9WBXuaUmFLmYSntfX3Zbnd0NyAjHIjM36k79YMzY/s1600/EdgeTop+Behavior+01.PNG" height="322" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the screenshot above, I've already defined the one behavior you need for a wall. <b>Solid</b>! You get this by clicking on the + sign and adding Solid from an a list of object behaviors. The point of this is to make the walls solid so that the ball will bounce off them! Do this with all four walls and you are finished with the walls.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next comes the ball. Do the same as before. Click on the ball object in the list, and then click on the <b>Add / edit Behaviors</b> button. This time you're going to add two behaviors:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaez25B9YEHmwMJ2OFQ83xiP6rGczq4S7CIKm9DwTNXUAQUXDbu9jgKzuMOgB5dtoMq3G2uOKD0bp_dn9yzcif4rsmWfeaG9zvZY707uDsnYqOHktt7I1dvpppkPZrhZmx9F89l4NK01Y/s1600/Sprite+Behavior+01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaez25B9YEHmwMJ2OFQ83xiP6rGczq4S7CIKm9DwTNXUAQUXDbu9jgKzuMOgB5dtoMq3G2uOKD0bp_dn9yzcif4rsmWfeaG9zvZY707uDsnYqOHktt7I1dvpppkPZrhZmx9F89l4NK01Y/s1600/Sprite+Behavior+01.PNG" height="318" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Again, you're pick objects from a list by clicking on the + sign and then selecting a particular behavior. In this case, I'm making the ball be <b>BoundToLayout </b>so even if it slips past one of those walls I placed, it still won't leave the screen. The other behavior is called <b>Bullet </b>and is an example of what Construct 2 can do to make a hard task easy. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Once I've picked the behaviors, you can change the details in the Properties window on the left.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1OG2UKKLacnpiFM9-TiKglX5hXRBKDQNf9wsqxRCltHyH89iDwIz9B39cVSZsNl1WRkecj6VeN3-XzYI_UT216gdwRqLzXV8L6-_tVIcf3ddVBrkO_hbh8BQlXT0Juo5QYdrw2XnGR4/s1600/Sprite+Behavior+02.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1OG2UKKLacnpiFM9-TiKglX5hXRBKDQNf9wsqxRCltHyH89iDwIz9B39cVSZsNl1WRkecj6VeN3-XzYI_UT216gdwRqLzXV8L6-_tVIcf3ddVBrkO_hbh8BQlXT0Juo5QYdrw2XnGR4/s1600/Sprite+Behavior+02.PNG" height="273" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The Bullet properties are well documented in the docs, but essentially what I am doing here is saying that the ball starts traveling at 400 and will bounce off solids. I set an angle (45) in the ball properties (we're looking at behaviors) to give it an angle. The coolest thing about using a bullet behavior is that when the ball bounces, it has a little bit of spin so that the ball won't keep bouncing in an exactly regular manner.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We've now set up the project, layout, objects, art, and behaviors. What's left? Just click on the Run Layout button at the top (or press F5). The ball will start moving and bouncing in your default browser. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I'll go over the details later of how to put this in a Firefox OS phone, but here is what it will look like in a browser:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuWaARsGKR6XGPmiIPwNbpUwxY8Q_Ow4dlPeg-9Kdgj8rQjwsaOVygaNzluXj7pkBq4eq_0xPF9Xsw_WA2kmwyw3ZVAVnwl89yfVju51eZUpv6NwCJJceLz1lDWQqCM0T83HdL4LKE4k/s1600/Desktop+02.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuWaARsGKR6XGPmiIPwNbpUwxY8Q_Ow4dlPeg-9Kdgj8rQjwsaOVygaNzluXj7pkBq4eq_0xPF9Xsw_WA2kmwyw3ZVAVnwl89yfVju51eZUpv6NwCJJceLz1lDWQqCM0T83HdL4LKE4k/s1600/Desktop+02.PNG" height="400" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I resized the browser so it would exactly match. But because I chose the Letterbox scale value, if I resize the browser slightly, black bars will appear to make up the difference.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's a wider version. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoAcWs01OuSvpBF1TrEivUN9fevAPjbZNR7jj2aaaNoX9fzyoA0FNQyDtuC6T_akC95HUkH8gHYIuQQ8pqMxmlglXgbnTDIooCW2V_ZB2DFOmgXzmcEIAjMak0NSWefwj8ZJRQU7VaQM/s1600/Desktop+03.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoAcWs01OuSvpBF1TrEivUN9fevAPjbZNR7jj2aaaNoX9fzyoA0FNQyDtuC6T_akC95HUkH8gHYIuQQ8pqMxmlglXgbnTDIooCW2V_ZB2DFOmgXzmcEIAjMak0NSWefwj8ZJRQU7VaQM/s1600/Desktop+03.PNG" height="400" width="328" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And a taller one:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObsdGO2r4P7IdNsNvLQYfZ0MkGkeD7pNqEOtexXFbYLFDhlAvWPQV6EECYQEBe6_adOBBjKYGyF__vzO4WcsbvvwCnpr3tONHkjcADlpaoxqF6iREEYiaDyVJK1U0RC2SHPKBh4SyDco/s1600/Desktop+04.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObsdGO2r4P7IdNsNvLQYfZ0MkGkeD7pNqEOtexXFbYLFDhlAvWPQV6EECYQEBe6_adOBBjKYGyF__vzO4WcsbvvwCnpr3tONHkjcADlpaoxqF6iREEYiaDyVJK1U0RC2SHPKBh4SyDco/s1600/Desktop+04.PNG" height="640" width="304" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
And here is what it looks like on a ZTE Open:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrRoVqzJJJhrhN6OBf-riqu4-BId-UJW15QedoviJiB-8HNV7ZAf_tlUR_sWw4PfCgk3fobjXcRmgf84Aie5ywfWydgiwBRcam0YDpDQ-czE4hJ56iBMgYRSPP1Mg6mzRICs4egRRYnM/s1600/ZTE+Open.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrRoVqzJJJhrhN6OBf-riqu4-BId-UJW15QedoviJiB-8HNV7ZAf_tlUR_sWw4PfCgk3fobjXcRmgf84Aie5ywfWydgiwBRcam0YDpDQ-czE4hJ56iBMgYRSPP1Mg6mzRICs4egRRYnM/s1600/ZTE+Open.png" height="400" width="265" /></a></div>
<br />
And on the Geeksphone Peak:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4lesffees7vVuu7hwEYGPeGuVJ7BKgSHqpcmAfyRljWagld7Xj_NVLljlRCX4nwVry3F3VMyMulRo_ylUgGYLOl7gqKicx0FinsthXqBLLunVAzNJn5lFMu8p5GvWC56aMJDU69cZHg/s1600/Geek+Peak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4lesffees7vVuu7hwEYGPeGuVJ7BKgSHqpcmAfyRljWagld7Xj_NVLljlRCX4nwVry3F3VMyMulRo_ylUgGYLOl7gqKicx0FinsthXqBLLunVAzNJn5lFMu8p5GvWC56aMJDU69cZHg/s1600/Geek+Peak.png" height="400" width="225" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And finally in the Firefox OS Simulator:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0xGenRf5Zuxu0hU7tKVa5xW5jNcWxwLknf_mv4aMPPWi2SbRGhx2x357KR3whmDrDM5izY0LFPhxCZdRbZiJNCGXmKirFdtRrqxer7cCjgi2e5fK2gBQVIUgzbEqazhxrcEG6iwdclU/s1600/Simulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0xGenRf5Zuxu0hU7tKVa5xW5jNcWxwLknf_mv4aMPPWi2SbRGhx2x357KR3whmDrDM5izY0LFPhxCZdRbZiJNCGXmKirFdtRrqxer7cCjgi2e5fK2gBQVIUgzbEqazhxrcEG6iwdclU/s1600/Simulator.png" height="400" width="241" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
So even though there are several screens and properties to define, you'll quickly see that you only do a few things to get a particular effect, and the Construct 2 docs are great. And if you can't figure out how to do something, search in the forums and if that doesn't work, ask a question and someone will answer. The people in the forums are very polite and patient. More so than any other forums I've seen, which is why I've followed them so long and now they've followed me to Firefox OS.<br />
<br />
Best of all, if you want to see how it works, you can just download the free version of Construct 2 and load my ball bouncing program here at <a href="http://thulfram.com/C2/Construct2.html">http://thulfram.com/C2/Construct2.html</a>. There's only one file there now, but I'll be adding more soon.<br />
<br />
Compare these simple choices with the 90 lines in my CSS bouncing ball program or the 132 lines in the third SVG bouncing ball program.<br />
<br />
For a while I'll be playing with Construct 2 and next I'll be adding a paddle and making a version of PaddleFox. The original I wrote in SVG was 268 lines and you can read about it at <a href="http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html">http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html</a>. But as you can guess, it won't be a lot of extra work to add the paddle and bounce the ball off of it in Construct 2.<br />
<br />
So stay tuned, but not iTuned!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com1tag:blogger.com,1999:blog-3508308619057792099.post-328100292225909372014-04-22T15:48:00.001-07:002014-04-22T21:49:36.481-07:00LittleMan (Game Review)I am fascinated by the varieties of games in the Firefox OS Marketplace and take it as a sign of genuine interest by game creators world wide. Today's game is from somewhere by Bruno Eduardo da Cunha. There's no web site or Twitter, just an email. A casual trip through Google doesn't get me any more. Most of the time I can find out more about a game developer, but not this time. If anyone knows Bruno Eduardo da Cunha, let me know. I'll send him an email!<br />
<br />
And it doesn't matter. A game speaks for itself, whatever person or country it comes from. The game under the microscope is called LittleMan and it's about a ... little man!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkM8uiELZrgj5LEt9iSf4YVPt9E0EhIW8X2heyHGyElnvfRecS26zB-dlCdcgNkHnbJjQovM8FmJvo9DJAr3GTLeEsWxYJle_DrvnMjcO4ZXi_MCzjAdOiVVOa_BtxubABETUS3aGjbds/s1600/little+01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkM8uiELZrgj5LEt9iSf4YVPt9E0EhIW8X2heyHGyElnvfRecS26zB-dlCdcgNkHnbJjQovM8FmJvo9DJAr3GTLeEsWxYJle_DrvnMjcO4ZXi_MCzjAdOiVVOa_BtxubABETUS3aGjbds/s1600/little+01.png" height="225" width="400" /></a></div>
<br />
One of the things I noticed right away was that the clouds are moving in the background of the title screen. I like that attention to detail.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOk_Er5k5jwiEOx4MHxZOCZOLh3M8cscaMmILFOfkjv8LEV4wKbhvvqDU_SgOBUzQW1XCVKqsiWh0c8vfPqVQjXDZXt6jrlw9vw7Ko-i0HpE4AiE1OpHomqpOK-1XD1yJ3egDiCkmWVM/s1600/little+02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOk_Er5k5jwiEOx4MHxZOCZOLh3M8cscaMmILFOfkjv8LEV4wKbhvvqDU_SgOBUzQW1XCVKqsiWh0c8vfPqVQjXDZXt6jrlw9vw7Ko-i0HpE4AiE1OpHomqpOK-1XD1yJ3egDiCkmWVM/s1600/little+02.png" height="225" width="400" /></a></div>
<br />
The screen also has some nice little details: the broken column, the greenery at the top, and the cracked tiles. The title screen also lets you mute the sound and start over.<br />
<br />
And the game has music! A happy chip-tune inspired music that you won't want to turn off! <br />
<br />
By the way, the game loads over the Internet and takes a while, but when you see the art and realize how many screens there are, you'll understand.<br />
<br />
Once you start the game, you'll get to pick a level to play.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3AQuTt6cy4N5R6gQYnSmMKnrj_jvwE99ym7t71eaRk5NkS1V3Er99SPAOXGHRY9Fx1C94wYaTe625i4y45MAN9na8Vgy1kBCaVUk2ya1nw78lNgNOptDC_qdiuqiDHhizd8tsqQz_Yw/s1600/little+03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3AQuTt6cy4N5R6gQYnSmMKnrj_jvwE99ym7t71eaRk5NkS1V3Er99SPAOXGHRY9Fx1C94wYaTe625i4y45MAN9na8Vgy1kBCaVUk2ya1nw78lNgNOptDC_qdiuqiDHhizd8tsqQz_Yw/s1600/little+03.png" height="225" width="400" /></a></div>
<br />
And this game has a lot. Assuming you get through the first 15 levels, there are another 15 levels.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDm5jHrl0BWpGIYf8kHOHcrfSWeOp52nMrII_GEWtIVlW26nuskV56_ksp_U1bCXp6NXU5_2lLgi_KwMpFvUg24vXCVtlYMYsmCtq5lMWG48BsnaWbZMnLcrvFTUa0jNwz65K2Z56oU2M/s1600/little+04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDm5jHrl0BWpGIYf8kHOHcrfSWeOp52nMrII_GEWtIVlW26nuskV56_ksp_U1bCXp6NXU5_2lLgi_KwMpFvUg24vXCVtlYMYsmCtq5lMWG48BsnaWbZMnLcrvFTUa0jNwz65K2Z56oU2M/s1600/little+04.png" height="225" width="400" /></a></div>
<br />
Note again that this second level screen is a sunset view and helps you to see that it is different.<br />
<br />
Each level is different and each level is difficult. That's the most important thing to say about this game. It isn't easy, but each level makes you solve different puzzles as you attempt to get through the level. <br />
<br />
Clicking the first level takes you to the first screen:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebH_osl8UKbG8P3dKtBv1EL8awXzl4ySU_T3UA3vpFuSDj1h4YYLPNTKSKfSrAdUvbJPbskvQhAOTIULZlbayJp1QOkMaoMHswNT1PsDCCNp941u8-BkGL2HwQ9LZ64qOann8KoLSV2E/s1600/little+05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebH_osl8UKbG8P3dKtBv1EL8awXzl4ySU_T3UA3vpFuSDj1h4YYLPNTKSKfSrAdUvbJPbskvQhAOTIULZlbayJp1QOkMaoMHswNT1PsDCCNp941u8-BkGL2HwQ9LZ64qOann8KoLSV2E/s1600/little+05.png" height="225" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You are that little man, standing in the doorway on the left. The top left shows you the level number and the top right, "Menu", takes you back to the level select menu.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The game controls are simple. The two blue arrows move you left or right, and the A button makes you jump. That's all you need to know. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here is the little man moving from the door to the middle. No dangers yet!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhtWCSCRKW5oZCOkD__lWgPoY0T1SzkArfB9RlZt3vx0996L_7Dn2vh8qYWFzD8-kqYLU7gz1txyyYo4S8FWXGFfMeH6AXaSvdFzQ73qjhpXT0J3aAtZBewV1_exCE3BFoyOFdOvdATs/s1600/little+06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhtWCSCRKW5oZCOkD__lWgPoY0T1SzkArfB9RlZt3vx0996L_7Dn2vh8qYWFzD8-kqYLU7gz1txyyYo4S8FWXGFfMeH6AXaSvdFzQ73qjhpXT0J3aAtZBewV1_exCE3BFoyOFdOvdATs/s1600/little+06.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And the clouds move here, too! The point of the game is to move and jump, but avoid deadly traps. Here is the little man after he's jumped up on the single block just to the left of the center pillar. He can go past the pillar, but he can't jump over the three vertical blocks.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4elEViPr_0ZhOJD9H3lfG0Ip3mFvvDRmx50GREsTI6wqXMuHTTaNgokFW3cHX62O6yPBFxe9DRrcy8K1uwdXp4ZQIsOgeLpGKyo0UcUBOK4r6uPEdksj5DUIzFdqYb0JMIrqOOmymz8o/s1600/little+07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4elEViPr_0ZhOJD9H3lfG0Ip3mFvvDRmx50GREsTI6wqXMuHTTaNgokFW3cHX62O6yPBFxe9DRrcy8K1uwdXp4ZQIsOgeLpGKyo0UcUBOK4r6uPEdksj5DUIzFdqYb0JMIrqOOmymz8o/s1600/little+07.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But maybe he can jump from where he is to the top of the three vertical blocks?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5Fxfn6UcyWBQb44JYbdTt1DAb2caH0DVsihKjMbYWy7WKwDWlP3WghFHtNC-dQmB1sidkJKMmDM-W8cCdftWn1y54REZ8DURSyPlby0h6glkvPKoNF0fco-inU8SsGT2P1r4TkxY02s/s1600/little+08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5Fxfn6UcyWBQb44JYbdTt1DAb2caH0DVsihKjMbYWy7WKwDWlP3WghFHtNC-dQmB1sidkJKMmDM-W8cCdftWn1y54REZ8DURSyPlby0h6glkvPKoNF0fco-inU8SsGT2P1r4TkxY02s/s1600/little+08.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Yes! He did it. A combination of pressing the right arrow and the "A" key does it. But you have to time it just right. But now he must be careful. If he hops off the block, he's in danger of falling onto the deadly spikes. He must hop to the two horizontal blocks and then off again.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is just the beginning. That was easy. After avoiding the spikes, he keeps moving and sees more of the level.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc1hNVO3gHS6JQNdrlCyzDUjzcyj7SaxS16sCvxkDRWj7UqBbi2O5GWAWL6yg2K5-uPK1PrQbKy-BMve_BAGBFP0-KkGpuEB3JoYVUKDgzN0pyW-Syl-zKSL2gn6KXFxbp2-DxUKifwPA/s1600/little+09A.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc1hNVO3gHS6JQNdrlCyzDUjzcyj7SaxS16sCvxkDRWj7UqBbi2O5GWAWL6yg2K5-uPK1PrQbKy-BMve_BAGBFP0-KkGpuEB3JoYVUKDgzN0pyW-Syl-zKSL2gn6KXFxbp2-DxUKifwPA/s1600/little+09A.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The gray block with a face is moving up and down. What to do? That tower on the right is full of spikes. But he can't get there!</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKfSKxtJ03zIqlEemMMgH2jtAQ-JPmkM11mJF7Asz4shVTGfG3JSbVMOOM-OwRzSoO30QrEcXpSfgQbCQnPiGH9YC07Aumxyc0AbqvJYoaJcR77RwMxrQqeLwcsxREbPNfqrg4cZKCc0/s1600/little+10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKfSKxtJ03zIqlEemMMgH2jtAQ-JPmkM11mJF7Asz4shVTGfG3JSbVMOOM-OwRzSoO30QrEcXpSfgQbCQnPiGH9YC07Aumxyc0AbqvJYoaJcR77RwMxrQqeLwcsxREbPNfqrg4cZKCc0/s1600/little+10.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Well, yes he can. But it is tricky. You can't just jump up to where you see the little man above directly. You must jump onto the block under the moving gray block while the block is moving up and then quickly jump up to the left block before the moving block comes back down. Then you can jump up to the higher block on the other side of the moving block, but don't let that gray moving block touch you or you die! From there you can jump to the top of the tower and then down to the other side and the exit door.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFfORC_Ff1f2NJJyAj6zStFqCR79ZTHP6ACacAkqTaS3I1E_C7xNDIcC2c7zLe479B-XlHfpF6qxIkEooyPKF2PadcYdwS607jYE13F-48abXmRDgmORL2x1Rb4_iWaENbgZbODK1LJQ/s1600/little+11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFfORC_Ff1f2NJJyAj6zStFqCR79ZTHP6ACacAkqTaS3I1E_C7xNDIcC2c7zLe479B-XlHfpF6qxIkEooyPKF2PadcYdwS607jYE13F-48abXmRDgmORL2x1Rb4_iWaENbgZbODK1LJQ/s1600/little+11.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And that's just the first level. Whew!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's the second level.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV84ZkglyOzEjt701jmt7FNHmprVJcy-qfHDvf2VwxgZ6T7dT-SWwQiJlXAMWnL6fi0L3N0TC9Ly6kujX-nh0ke6JhWu8geZo8R9Dihlh69LPJDGAy6Q3yqnEAv2bCCxn3hp7gQYMWOPY/s1600/little+12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV84ZkglyOzEjt701jmt7FNHmprVJcy-qfHDvf2VwxgZ6T7dT-SWwQiJlXAMWnL6fi0L3N0TC9Ly6kujX-nh0ke6JhWu8geZo8R9Dihlh69LPJDGAy6Q3yqnEAv2bCCxn3hp7gQYMWOPY/s1600/little+12.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This level is more difficult because you must make a series of jumps right away and get very high up to grab a key that you can see in the upper left corner. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And so on and so on! More puzzles await you involving both logic and dexterity!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I like this game a lot and it promises several hours of fun, trying to solve the puzzles and not dying. However, if you do die, you only go back to the start of the level you are in and there isn't any scoring. I give extra points to the art and the music because they create a mood. Go, little man, go!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Platformer<br />
Score: 5 (out of 5)<br />
Tested on: ZTE Open and Geeksphone Peak<br />
Get it at: Firefox Marketplace<br />
<a href="https://marketplace.firefox.com/app/littleman">https://marketplace.firefox.com/app/littleman</a><br />
<br />
PS: one of the reviewers on the Marketplace said it didn't work on the ZTE Open, but it does work on my ZTE Open. Because you load the game over the Internet, that might cause problems, and the download is long because 30 screens is a lot!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-53340892407400834682014-04-15T11:40:00.000-07:002014-04-15T11:40:07.406-07:00Responsive Design (Game Programming)One of the many reasons I like to write about game programming as well as other people's games is that often a game I review inspires me to dig deeper into game programming issues for Firefox OS. In my last post, when I reviewed <i>Drag the Dots,</i> <a href="http://firefoxosgaming.blogspot.com/2014/04/drag-dots-game-review.html">http://firefoxosgaming.blogspot.com/2014/04/drag-dots-game-review.html</a>, I noticed that one of the games overlapped the buttons at the top.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrmJsFSULX_OSVeJwAIdgrXKLGvAnX1e5ewSXyKxP8SLMmQJRoHLhEfr2FrDFyNgTeBQeDWFrp1aGY76UaXuozHC9HzZn7ge0i0TaicESEdhtp8XYpStYvOSPdwylvl6yTkzBPtJdlUU/s1600/dots14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrmJsFSULX_OSVeJwAIdgrXKLGvAnX1e5ewSXyKxP8SLMmQJRoHLhEfr2FrDFyNgTeBQeDWFrp1aGY76UaXuozHC9HzZn7ge0i0TaicESEdhtp8XYpStYvOSPdwylvl6yTkzBPtJdlUU/s1600/dots14.png" height="320" width="213" /></a></div>
<br />
Above is a screenshot on the ZTE Open. Because the game developer had made the <b>quit </b>button and the time display panel semi-transparent, you could still play the game just fine, but it is a small annoyance.<br />
<br />
Further annoying is the little-known <b>Software Home</b> button. See that little Mozilla fox at the bottom. That is only displayed if it is enabled in the Developer section of the settings. If you don't see it, you can enable it by going to developer settings and check "Enable Software Home button". It does the same thing that the hardware Home button does just below it. I didn't even know it was possible until I upgraded my software to version 1.2 and all of a sudden the fox was there but I didn't even notice it!<br />
<br />
I'm sure there's a reason of the Software Home button, but it takes away precious screen area. I'm curious if there is some way in my game I can make sure this is not enabled. I'll poke around and see! But maybe it is important to have it. Anyone know?<br />
<br />
This prompted me to go back and look at my post called How Big Am I?, <a href="http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html">http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html</a>. I'm looking forward to the Firefox OS tablet, which has made me want to think about sizes and how much space you have for a game. I decided to rewrite my little program and have it display the inner and outer height and width. One thing led to another and I decided to add some new features to my CSS Shell code, <a href="http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html</a>.<br />
<br />
Instead of using an alert, I display the values in the page itself. And here's what I have found for the ZTE Open and the Geeksphone Peak.<br />
<br />
ZTE Open with the Software Home button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOq8_1NBbIiWRCXqxA1bvmamx3t5HWSg9VAfVtlwE78ArHLyFd7Qb7TqqCUFNZDhX_4w9bpkAofLmOsles9C2dEklUMTCb2gp-52ELYIq1TacMTWdfS7M-voKGVmzbK0pnl64qJVc9VI/s1600/zte+how+big+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOq8_1NBbIiWRCXqxA1bvmamx3t5HWSg9VAfVtlwE78ArHLyFd7Qb7TqqCUFNZDhX_4w9bpkAofLmOsles9C2dEklUMTCb2gp-52ELYIq1TacMTWdfS7M-voKGVmzbK0pnl64qJVc9VI/s1600/zte+how+big+home.png" height="400" width="266" /></a></div>
<br />
And here's the ZTE Open without the Software Home button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQ5PFgGvuEKNs3wSXRw3tcJRHJjUIZqrVxovAHVzhe5pQPWC7csZh80qw-8QxSvjdOhBu5UeuuJXOrpefAAyyYD8BAQG5zc4fpagOsWccAhIK_Wy2k7DXybezUXKWMzg0FGg8MWLvKNQ/s1600/zte+how+big+no+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQ5PFgGvuEKNs3wSXRw3tcJRHJjUIZqrVxovAHVzhe5pQPWC7csZh80qw-8QxSvjdOhBu5UeuuJXOrpefAAyyYD8BAQG5zc4fpagOsWccAhIK_Wy2k7DXybezUXKWMzg0FGg8MWLvKNQ/s1600/zte+how+big+no+home.png" height="400" width="266" /></a></div>
<br />
As you can see, the outer height is the same (480 pixels) but the Software Home button costs you 50 pixels, which is a large amount for such a small screen.<br />
<br />
And the Geeksphone Peak with Software Home button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6y-2jnmkXeD98rH0MNz-q-ffgBNuNACKWbsrS2St936411HYgPsE2cLk669kSKsvQjM27LjSxXAYMr8kVMS6HZdT4CnkwU9-GTThfFZgTOVaWolf4u0wasQDYPWfMo5iEcW9jlt3VcU/s1600/geek+how+big+with+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6y-2jnmkXeD98rH0MNz-q-ffgBNuNACKWbsrS2St936411HYgPsE2cLk669kSKsvQjM27LjSxXAYMr8kVMS6HZdT4CnkwU9-GTThfFZgTOVaWolf4u0wasQDYPWfMo5iEcW9jlt3VcU/s1600/geek+how+big+with+home.png" height="400" width="225" />. </a></div>
<br />
And without the Software Home button:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkBrc-XV68AwYvI_1eUF_u4qgIpHPbxyNADBK4YbxuLFdhy_8OGgDxQG8zdqWQ6muwQxAiR6vyZvgPiF9ZijVK4zwHlV5CG7fYzr_GqSJc_-knNXYTYP_UCrFNLAQ6l9jFatZ8EOH77c/s1600/geek+how+big+no+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkBrc-XV68AwYvI_1eUF_u4qgIpHPbxyNADBK4YbxuLFdhy_8OGgDxQG8zdqWQ6muwQxAiR6vyZvgPiF9ZijVK4zwHlV5CG7fYzr_GqSJc_-knNXYTYP_UCrFNLAQ6l9jFatZ8EOH77c/s1600/geek+how+big+no+home.png" height="400" width="225" /></a></div>
<br />
Still a 50 pixel loss. But if you think about the variations of the two phones and the option of the Software Home button, the height can be as much as 620 on the full Peak without Home button and as low as 410 on the ZTE with Home button enabled. 210 pixels!<br />
<br />
The widths don't vary, but the Peak has 360 pixels and the ZTE only has 320. Either way, the two phones definitely have a drastic difference in ratio of width to height.<br />
<h2>
What Does This Mean?</h2>
It means you need to know two things:<br />
<br />
1. How big is your screen? You can test this when you start up the game.<br />
<br />
2. Adjust your game accordingly. There are various options, depending on the game.<br />
<br />
I'll be analying this more in the coming weeks, but I strongly recommend that if you are making a game, that you do two things:<br />
<br />
1. Test your game on different devices.<br />
<br />
2. Write code so you can adjust.<br />
<br />
There are obvious things you can do. Write for the ZTE Open and then add some buffer space for bigger phones. It might be smart to test on the ZTE since it has less memory. You want to be prepared for low memory when that $25 Firefox OS phone comes out!<br />
<h2>
Drag the Dots</h2>
Drag the Dots is still a great game and I recommend it. Here's what it looks like on the Geeksphone Peak:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHI1I1FiaLhQ7PqoDiI_AYw3uIIVvMN1f7Zt2NhyWpA3WEycEsyl1tXPvcE_NAQwWqe-YFv_7kmwlqZ1McHCIo2pvMyVWNTc87oL7VNs61iWlM7jekXqq6OZ2B327cZfVMyQrYtMBA18/s1600/no+home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHI1I1FiaLhQ7PqoDiI_AYw3uIIVvMN1f7Zt2NhyWpA3WEycEsyl1tXPvcE_NAQwWqe-YFv_7kmwlqZ1McHCIo2pvMyVWNTc87oL7VNs61iWlM7jekXqq6OZ2B327cZfVMyQrYtMBA18/s1600/no+home.png" height="400" width="225" /></a></div>
<br />
<br />
Everything fits just perfectly. Well, until that pesky Software Home button is enabled:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6dwAUe8_drsjLl5wFKDolCLMQ_PK6IjGyIpiyup2x9fXWFGn70BR7z4XOBKF1eG9Fd5iwZ_GApHBCCmAp_CI5yVORQv8R_wyU8KOujgOhQ5MXuyBipErge22av4_yYE65bUbVEE7VJs/s1600/home.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6dwAUe8_drsjLl5wFKDolCLMQ_PK6IjGyIpiyup2x9fXWFGn70BR7z4XOBKF1eG9Fd5iwZ_GApHBCCmAp_CI5yVORQv8R_wyU8KOujgOhQ5MXuyBipErge22av4_yYE65bUbVEE7VJs/s1600/home.png" height="400" width="225" /></a></div>
<br />
Oops, there goes 50 pixels!<br />
<br />
This isn't meant to be any kind of criticism of Anders Fisher and his really cool game. Firefox OS is still in beta and some of these issues are still puzzling. My original questions about sizing started when I noticed that Candy Crush was slightly off, and those guys are a big company with lots of developers! Anders Fisher is just one guy with some really great ideas and a good color sense. I would pay for his game if he ever sells it!<br />
<br />
<h2>
New Directions</h2>
I've decided to head in a new direction with this blog. I'll still keep reviewing games and I'll be poking into the idea of Responsive Game Design, but I've decided to take the plunge and see if I can get some drag-and-drop game engines to work with Firefox OS.<br />
<br />
My first investigations will be with Scirra's Construct 2. I've actually used that one before and even have a game I've written in it on the Chrome App Store. You can read about Construct 2 here <a href="http://firefoxosgaming.blogspot.com/2014/03/html5-game-frameworks-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/html5-game-frameworks-game-programming.html</a>. And after that, I'm going to look at another cool engine called Stencyl that looks like it might work.<br />
<br />
If anyone has had any experiences with Construct 2 and/or Stencyl with Firefox OS, let me know.<br />
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-37974828169170181582014-04-10T18:05:00.000-07:002014-04-10T18:05:41.992-07:00Drag the Dots (Game Review)The amount and variation of games I find in the marketplace continues to amaze me and encourage me to keep doing game reviews for Firefox OS! Things are about to get interesting with the advent of the Firefox OS tablet. I will be getting one soon and I'm getting eager to start learning how to make a game that can be played well on all sizes of Firefox OS devices from tiny ZTE Open to the big 10.1 inch, 1280 x 800 pixels sized tablet! Maybe someday there will even be a Firefox OS watch!<br />
<br />
Anyway, today's game is called Drag the Dots and is lovingly crafted by Anders Fisher (@atleastimtrying on Twitter). This game looks pretty simple at first, but quickly becomes difficult enough to play and involves both logic and quick thinking. And it looks pretty, also!<br />
<br />
When you start the game, you see a menu of different dot patterns.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwGIs9kUhjeD_dH9WVMmhaRJZ2rDQAWBzh_9VPLBWZfIodCYoMgvI4UUMHRExPyTytL4ptxotZhAjqQShFEonT-cMWyksUKgxZ3q7AqNqP0GvGubyU0L5vFu3oudjN2muonQ6u8mN7lQ/s1600/dots01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwGIs9kUhjeD_dH9WVMmhaRJZ2rDQAWBzh_9VPLBWZfIodCYoMgvI4UUMHRExPyTytL4ptxotZhAjqQShFEonT-cMWyksUKgxZ3q7AqNqP0GvGubyU0L5vFu3oudjN2muonQ6u8mN7lQ/s1600/dots01.png" height="400" width="266" /></a></div>
<br />
By the way, this is a screenshot on my ZTE Open and is captured using the wonderful App Manager. Without that, my fingers would be sore from pushing the Power and Home buttons simultaneously (and missing a few times). This menu actually scrolls down to provide more choices:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjfpoyUrPnbeAeYvahaNO-IKnyNbkIY-u8oj8OXWIP090aepPp2caSaFkkez2Hndz-Lz4ztkg3lrKPzCs6WZo4wu-cIhN-9MHdyVM4Ik0VcyBJErFJWU3L1jnQvPT_X6XKaJWO-2h4vU/s1600/dots02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjfpoyUrPnbeAeYvahaNO-IKnyNbkIY-u8oj8OXWIP090aepPp2caSaFkkez2Hndz-Lz4ztkg3lrKPzCs6WZo4wu-cIhN-9MHdyVM4Ik0VcyBJErFJWU3L1jnQvPT_X6XKaJWO-2h4vU/s1600/dots02.png" height="400" width="266" /></a></div>
<br />
The Help for this game is in the options screen but you won't need it. The game is very intuitive. So let's start with the first game at the very top, called <i>grid</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiymm4Avwm7QMr0dNPFGw-HBY4iPSVdbgNou8-8OZT4nWaHoppUfeipHVmEsarEZrjET8VuLUxGlo7BZP0JlsbrnTLGg-4vmK7pNcD-9kcebRNBkSzhdHKKvAAYOmBxGRCxgOXbEBjU8Ag/s1600/dots03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiymm4Avwm7QMr0dNPFGw-HBY4iPSVdbgNou8-8OZT4nWaHoppUfeipHVmEsarEZrjET8VuLUxGlo7BZP0JlsbrnTLGg-4vmK7pNcD-9kcebRNBkSzhdHKKvAAYOmBxGRCxgOXbEBjU8Ag/s1600/dots03.png" height="400" width="266" /></a></div>
<br />
Here's what grid looks like.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8yhtVf9oJ8wAVDxXQcUQsHBV8VCbFaZMu1AdF4PwUzK0iDS06s6ZJFQ1vi76eHddwU3BIXi2qsMqQJCGluz8yN0B9sLovU_GEMa-qnluvt-eCujfbjxwH2R83xHQuCKo0dGGomPMsDW4/s1600/dots04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pONOPTB4At1RLzVI8PUXuroRB62-IEU96CBifcNvhXL-VurcmWnsFUFmRZyJ3tjEu5OvOO3VgxVKzirNF3mZ5HGT2kdKBE-y6VTXWiEcf0FMhKiDbwzAI4rCzFlEFKl2yoTASFCC96g/s1600/dots05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pONOPTB4At1RLzVI8PUXuroRB62-IEU96CBifcNvhXL-VurcmWnsFUFmRZyJ3tjEu5OvOO3VgxVKzirNF3mZ5HGT2kdKBE-y6VTXWiEcf0FMhKiDbwzAI4rCzFlEFKl2yoTASFCC96g/s1600/dots05.png" height="400" width="266" /></a></div>
<br />
All you have to do is drag the dots on top of each other. Drag the "1" dot on top of the other "1" dot. Very nice. But do it quickly because the clock is ticking!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkSRA7w81cntG80vGpbV5SkJ9Ur9csbmJaWxcrXc4MscVMLRBrvzW3Rvm4unTwJGTAnbj5ns8HVcehbGzrLQ6s0BJ6cWZNbfOvELozoIov0VOP9I-oKLvNoWWv5-FoGiUa2KjO7lmldGM/s1600/dots06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkSRA7w81cntG80vGpbV5SkJ9Ur9csbmJaWxcrXc4MscVMLRBrvzW3Rvm4unTwJGTAnbj5ns8HVcehbGzrLQ6s0BJ6cWZNbfOvELozoIov0VOP9I-oKLvNoWWv5-FoGiUa2KjO7lmldGM/s1600/dots06.png" height="400" width="266" /></a></div>
<br />
Once the first "1" covers the second "1", it changes to a "2" and the screen and dots change color. I really like this because it keeps the game cool to look at and even adds a bit of magical misdirections so the game isn't too easy.<br />
<br />
Now you must drag one "2" on top of the other "2".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxMx7J5FqPzfhltdL5kAHJV3sxhFWFQxY_NcuKLzx9t2nVi_Uv1WjMpoo6P1u56WuOqX-Y3P3IOAYNsRykn7vOSjxYGDUSKqG8DoDNaaw5OUtgSWyqhULL8VpDCUyRHObgZ-BRGWLtoM/s1600/dots07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxMx7J5FqPzfhltdL5kAHJV3sxhFWFQxY_NcuKLzx9t2nVi_Uv1WjMpoo6P1u56WuOqX-Y3P3IOAYNsRykn7vOSjxYGDUSKqG8DoDNaaw5OUtgSWyqhULL8VpDCUyRHObgZ-BRGWLtoM/s1600/dots07.png" height="400" width="266" /></a></div>
<br />
The "2" dots are gone but now there are two "3" dots. And again, the colors have changed!<br />
<br />
After a few more drags, there's only two dots left. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2rp04LfE_0To2aGcBRddffQfuxee2teAEgwQpX0US4ycYMdcn4VJzwvApbUyMnx0h2jmCG-LjUn0tF0_h9vOuOqjcVD_3XulYpw1Vkzz4oRgCdypxMnk088z9nys3vD7KywoWF83mDs/s1600/dots08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2rp04LfE_0To2aGcBRddffQfuxee2teAEgwQpX0US4ycYMdcn4VJzwvApbUyMnx0h2jmCG-LjUn0tF0_h9vOuOqjcVD_3XulYpw1Vkzz4oRgCdypxMnk088z9nys3vD7KywoWF83mDs/s1600/dots08.png" height="400" width="266" /></a></div>
<br />
Cover one with the other and the round is over!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdl66K5vz8XVjs5ALuE2W6ThwdZZbcWaAubHAwHGxMbJF5PkEoI1zorFwjd6tAJ455U9ZbHcNEM-7f2c9O4KGPYduCVTNnwa54hGv6AsE5DeZnPkGoK0x9fhl1C8N7Qe7B9XbSqvDbRtQ/s1600/dots09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdl66K5vz8XVjs5ALuE2W6ThwdZZbcWaAubHAwHGxMbJF5PkEoI1zorFwjd6tAJ455U9ZbHcNEM-7f2c9O4KGPYduCVTNnwa54hGv6AsE5DeZnPkGoK0x9fhl1C8N7Qe7B9XbSqvDbRtQ/s1600/dots09.png" height="400" width="266" /></a></div>
<br />
By the way, my user name is "box" because I hit the "x" button instead of "b" so I don't even know how to spell my own name! And the time is very long because I was taking screenshots. This would be cool if that's all you got. But there's more!<br />
<br />
You can play more kinds of dot dragging. How about <i>Grid+</i>? Instead of 9 dots, you get 16.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5X3Ian1o4rYHx_VdLbDA8SPP7FOPtGFSvHJAcKAX0hMdG37_eImsFfcP4lTT2lzf9DluoCb_zDYlqYuyyjicQehUjqdSDxqfKE0ItGntDfVM6TkpWvMaIPEKK3bk1UcfQvD_gkGzyols/s1600/dots11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5X3Ian1o4rYHx_VdLbDA8SPP7FOPtGFSvHJAcKAX0hMdG37_eImsFfcP4lTT2lzf9DluoCb_zDYlqYuyyjicQehUjqdSDxqfKE0ItGntDfVM6TkpWvMaIPEKK3bk1UcfQvD_gkGzyols/s1600/dots11.png" height="400" width="266" /></a></div>
<br />
Same rules, but more dots to confuse your eye.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9QgG-R27gEyEN0OMYRXHtiy-7cY3AGBbZq7_9LvYeIowZMNcc-SCwv367Jx6v51HCBSsUfJVnPBwCenj3VTpehr1PC0GkbZX0B9IAa6YznIDM5grVK3yG0oqXq1utd1eRnEyl6zXpsYA/s1600/dots12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9QgG-R27gEyEN0OMYRXHtiy-7cY3AGBbZq7_9LvYeIowZMNcc-SCwv367Jx6v51HCBSsUfJVnPBwCenj3VTpehr1PC0GkbZX0B9IAa6YznIDM5grVK3yG0oqXq1utd1eRnEyl6zXpsYA/s1600/dots12.png" height="400" width="266" /></a></div>
<br />
If that's not enough, how about <i>Tiny</i>? Little dots!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQB8JTgGNFNCFP7aXdxV3JAZEuJLOxfTeByQ1tfx1Z7T0Eq9-_hlOoB9TAP6vIlmKNrH6rQqXMjpE7Az3prMc73-OvrDW4aKDyfFrrHqAxZ9TgN_WY6ykCTqHW0Z8yR96GLjGTWa0eQo/s1600/dots13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQB8JTgGNFNCFP7aXdxV3JAZEuJLOxfTeByQ1tfx1Z7T0Eq9-_hlOoB9TAP6vIlmKNrH6rQqXMjpE7Az3prMc73-OvrDW4aKDyfFrrHqAxZ9TgN_WY6ykCTqHW0Z8yR96GLjGTWa0eQo/s1600/dots13.png" height="400" width="266" /></a></div>
<br />
Here's what the tiny dots look like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthwuohexDW1xVBOzQWX5S3yJ6sEk4YeQJQsZEY9FjGTTKrWhTCCYcMPZ-Qt0hgFn8MBMaMKezJQJ7MR8SS4-vRhXBHFwZd7EvF3Mom2bdZoHNLLoCof9Gs2-SkBR9dn86NC35f-DkEwA/s1600/dots14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthwuohexDW1xVBOzQWX5S3yJ6sEk4YeQJQsZEY9FjGTTKrWhTCCYcMPZ-Qt0hgFn8MBMaMKezJQJ7MR8SS4-vRhXBHFwZd7EvF3Mom2bdZoHNLLoCof9Gs2-SkBR9dn86NC35f-DkEwA/s1600/dots14.png" height="400" width="266" /></a></div>
<br />
You might notice one of the few errors above. The tiny grid of dots is overlapped by the semi-transparent "quit" button and the time display. Even if I remove the little Firefox globe at the bottom, the grid is overlapping. I wonder how this would look on my Geekphone Peak, which on loan at the moment. I'll check and add a note later. Responsive web design!<br />
<br />
You've seen grids, now it's time for <i>random </i>layouts.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF0hoE_De2j1Jt29v5uKbOZtf8-eOl-6XngnEm-DphioTJBfpsz8fz-xoLueoyaASw3jkD0lgaIjPiS8azzWZCh8qa5fvul_aVhqaMA0ehO2D5iLyEKpxAQbRBhBCe4zSCLFMTY8v_XRc/s1600/dots15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF0hoE_De2j1Jt29v5uKbOZtf8-eOl-6XngnEm-DphioTJBfpsz8fz-xoLueoyaASw3jkD0lgaIjPiS8azzWZCh8qa5fvul_aVhqaMA0ehO2D5iLyEKpxAQbRBhBCe4zSCLFMTY8v_XRc/s1600/dots15.png" height="400" width="266" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Ten dots. Here they are:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimymmz8t_qDMDHX2TGQ8V1YBWhD2drOaf9gNLza7af1DxGV_alq1fVMWPH7ylhjO-0xyuCCbgoy-AMMz8CPFWBwvx1Nn2kwD2d9qLB0W6B80n5-sTB-NzCcM8gHW1IQXn8jjLGu51KVuA/s1600/dots16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimymmz8t_qDMDHX2TGQ8V1YBWhD2drOaf9gNLza7af1DxGV_alq1fVMWPH7ylhjO-0xyuCCbgoy-AMMz8CPFWBwvx1Nn2kwD2d9qLB0W6B80n5-sTB-NzCcM8gHW1IQXn8jjLGu51KVuA/s1600/dots16.png" height="400" width="266" /></a></div>
<br />
This introduces a new issue. Overlapping dots. You can see the two "1" dots but there is a "9" dot you can't quite see under the "10" dot. But you can quickly figure things out and move dots around to find the one you need.<br />
<br />
Next on the list are moving dots!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyQrIoP2MgsiI0_ikJYSzyyBipGPMlR6ZsMlXIOp0QsZqCq77lEiW1OTDVHiG9IlYBIH0I128gHdtV7ycduvTz1Z6tKRyuYcoTTf8xnIUiWYKRy8tmAvNei0v9LbThVELpX8OjcPIZhc/s1600/dots17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyQrIoP2MgsiI0_ikJYSzyyBipGPMlR6ZsMlXIOp0QsZqCq77lEiW1OTDVHiG9IlYBIH0I128gHdtV7ycduvTz1Z6tKRyuYcoTTf8xnIUiWYKRy8tmAvNei0v9LbThVELpX8OjcPIZhc/s1600/dots17.png" height="400" width="266" /></a></div>
<br />
Twelve dots. But after each match, the dots move around! Here are the twelve.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYwb-tIGGLEKqzxNFs677u5PeD1cJ7HzwaeVObqaILHKw64nCnFAUScsM5Tlc08ZDttMxglSuiz5sWe5ZPYqyalTooXvevXI7k0KPQPMUnDTqDJuDMkPS5M_ewG_jAvSU6DkDs3lc3Ok/s1600/dots18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYwb-tIGGLEKqzxNFs677u5PeD1cJ7HzwaeVObqaILHKw64nCnFAUScsM5Tlc08ZDttMxglSuiz5sWe5ZPYqyalTooXvevXI7k0KPQPMUnDTqDJuDMkPS5M_ewG_jAvSU6DkDs3lc3Ok/s1600/dots18.png" height="400" width="266" /></a></div>
<br />
But after you match the first two "1" dots, the layout changes:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKElIfaVtDNMbXjatGjI8MKTB0xpiSROQXM9jLSs6DYLnripGqdPZHvq06JvkMMBvIAk1o-nVJYLmBDRbqJwYQ_C-pCVJT636wmBqT3VxlhA6V5Y8G08c0DE-l99UqH12GRhHz5cm00HU/s1600/dots19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKElIfaVtDNMbXjatGjI8MKTB0xpiSROQXM9jLSs6DYLnripGqdPZHvq06JvkMMBvIAk1o-nVJYLmBDRbqJwYQ_C-pCVJT636wmBqT3VxlhA6V5Y8G08c0DE-l99UqH12GRhHz5cm00HU/s1600/dots19.png" height="400" width="266" /></a></div>
<br />
How cool is that? But the complexity keeps changing. The next game will really tax your brain. The dots are in a circle and each dot is spinning.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkv7RhfgbIqWpJpAQWoC6uV5drjYqmadbXGITxZx1iMp233tw3__Z5m_u-QO6ta33V5ZT9URDFgR-sbmsKC8NHn_Ui5l5aXfbJ2QKa5EUdENgZovpx6x24SNvXSH4JtkKL1sOzzQ4ufzA/s1600/dots20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkv7RhfgbIqWpJpAQWoC6uV5drjYqmadbXGITxZx1iMp233tw3__Z5m_u-QO6ta33V5ZT9URDFgR-sbmsKC8NHn_Ui5l5aXfbJ2QKa5EUdENgZovpx6x24SNvXSH4JtkKL1sOzzQ4ufzA/s1600/dots20.png" height="400" width="266" /></a></div>
<br />
Here's the dots in a circle:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxS3JNRc3UCb1EGk-407w6T84VkHgfIA8B032YjwugAovdofvI0qKkJldSKYMZlYvkB1_kYhwUkbTIf7qHTWrCwt7awp0-YFLxOnIDw7SugiJ7PXGpioT_rGFWiCyIR5nqtysy3XhiJk/s1600/dots21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxS3JNRc3UCb1EGk-407w6T84VkHgfIA8B032YjwugAovdofvI0qKkJldSKYMZlYvkB1_kYhwUkbTIf7qHTWrCwt7awp0-YFLxOnIDw7SugiJ7PXGpioT_rGFWiCyIR5nqtysy3XhiJk/s1600/dots21.png" height="400" width="266" /></a></div>
<br />
And here they are again, a short time later. Eleven seconds later, to be exact!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vVqK15e1dZazNMfpBM3J1xII6tQ70xrZDTBMo77A_pBWZr3NJ3bo07CJ_fQu4lDdFrlxbWy2SvhdHcgIPizP6diFZv65JuWbvijIGCNlxvj-euXzPIADGVdYxJDf1RBcsqQuZynQX_Y/s1600/dots22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vVqK15e1dZazNMfpBM3J1xII6tQ70xrZDTBMo77A_pBWZr3NJ3bo07CJ_fQu4lDdFrlxbWy2SvhdHcgIPizP6diFZv65JuWbvijIGCNlxvj-euXzPIADGVdYxJDf1RBcsqQuZynQX_Y/s1600/dots22.png" height="400" width="266" /></a></div>
<br />
Drag the dots and finish the round. Next comes the maze!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgNl8FvgBv3JIOvqWjwg0i7tt_ixnY-DmXmg89qAFM5k56w-wZPNkIhyphenhyphen7hBz10QwHcdvdteqjgNiG81ZejfLXr2Hzf-dDOand85yLkayrrqzY8gD2FdgtJdyG5zluicJjvee1au4ssg0/s1600/dots23.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgNl8FvgBv3JIOvqWjwg0i7tt_ixnY-DmXmg89qAFM5k56w-wZPNkIhyphenhyphen7hBz10QwHcdvdteqjgNiG81ZejfLXr2Hzf-dDOand85yLkayrrqzY8gD2FdgtJdyG5zluicJjvee1au4ssg0/s1600/dots23.png" height="400" width="266" /></a></div>
<br />
This time you have to avoid the walls of the maze and every time you make a match, the walls slightly move.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW2J8XjJzQgnBlKM3ipNvwJAgzNFBRDsqdB1TlgZs4dZ_tCJ0XOAZHsOSxU2Ntkp6AdUa6YH8JlKiXPgr9lHyxWIkurUEZO5ET6O9CgaLc9V9zSJfn0fNSRUMgX3uZW8JH3Mmnq-xHKo/s1600/dots24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW2J8XjJzQgnBlKM3ipNvwJAgzNFBRDsqdB1TlgZs4dZ_tCJ0XOAZHsOSxU2Ntkp6AdUa6YH8JlKiXPgr9lHyxWIkurUEZO5ET6O9CgaLc9V9zSJfn0fNSRUMgX3uZW8JH3Mmnq-xHKo/s1600/dots24.png" height="400" width="266" /></a></div>
<br />
Here's a shot of how the maze looks with only one match to go.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbCieRHxEoqJkKwGfi0DonnxSOW4QC_Toj-zWeVKYebWsD1NoOx95WnNWLVv0NzMbGWCDgcw8X2_HQeqFCzeOQx_X5PjomueRDoGfWNujlpTtEe0EGZOUg2ddq_J_uCj7zglmfXaO2TQ/s1600/dots25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbCieRHxEoqJkKwGfi0DonnxSOW4QC_Toj-zWeVKYebWsD1NoOx95WnNWLVv0NzMbGWCDgcw8X2_HQeqFCzeOQx_X5PjomueRDoGfWNujlpTtEe0EGZOUg2ddq_J_uCj7zglmfXaO2TQ/s1600/dots25.png" height="400" width="266" /></a></div>
<br />
Just when you thought it couldn't get crazier, along comes the next game, <i>Moving+</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUrwuz-cJYDguQmvo1ovliDS6X6j4jnGWVTr8rfwgVWW31v9wUt93DhrZN0Plg8wL8ngAenjM0cQXWKL3j0C7kgmIPAmWrynarYGxS9FvcWZnPriK9nv73pdG_k1-_GjgFsF5FV1dhl0/s1600/dots26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUrwuz-cJYDguQmvo1ovliDS6X6j4jnGWVTr8rfwgVWW31v9wUt93DhrZN0Plg8wL8ngAenjM0cQXWKL3j0C7kgmIPAmWrynarYGxS9FvcWZnPriK9nv73pdG_k1-_GjgFsF5FV1dhl0/s1600/dots26.png" height="400" width="266" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hey, these dots are moving!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPd30m_iYcQkN0eO_3uW7AFBjcDoOUxeOmnh2fl-k-v0ZbMhygyvy39hdczR5Qy6wt_LwXuv-ISG30Sl2srxz3wzhPwPf2KPGKfAUcAb9LbMebbPYChPHWSzBqdNpm2IfzetLBOiuBbcU/s1600/dots27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPd30m_iYcQkN0eO_3uW7AFBjcDoOUxeOmnh2fl-k-v0ZbMhygyvy39hdczR5Qy6wt_LwXuv-ISG30Sl2srxz3wzhPwPf2KPGKfAUcAb9LbMebbPYChPHWSzBqdNpm2IfzetLBOiuBbcU/s1600/dots27.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And they keep moving!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB__BEMQbmYrigPhVBbGNeOPStMTppeIZgK3mjnrKJA5PDP2AhKMQQkBKxFmJmU6gQl4OeG4aD10oI64DwLIq00pbYvmPIeeJMRB9JPBUhdq2mW9GIZjKjptN9dMcDvtoePtqajdin7gM/s1600/dots28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB__BEMQbmYrigPhVBbGNeOPStMTppeIZgK3mjnrKJA5PDP2AhKMQQkBKxFmJmU6gQl4OeG4aD10oI64DwLIq00pbYvmPIeeJMRB9JPBUhdq2mW9GIZjKjptN9dMcDvtoePtqajdin7gM/s1600/dots28.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And even after you've cleared a few, they're still moving.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mQhvD85ecPXkqyuXnb39VNK_nylTmEE24_iQ4954auUnhGQJfAzAETqaVadjqt_lqWdbKy84nh2uUTFcwTgZCgmvb5PlbHJn_8He4EeJ-68w1kMDiwdwyjYSlulKEqniCsJ1FnQmwH8/s1600/dots29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mQhvD85ecPXkqyuXnb39VNK_nylTmEE24_iQ4954auUnhGQJfAzAETqaVadjqt_lqWdbKy84nh2uUTFcwTgZCgmvb5PlbHJn_8He4EeJ-68w1kMDiwdwyjYSlulKEqniCsJ1FnQmwH8/s1600/dots29.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Until only two are left!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwNm2HYRysn-5gUb7xqHqiDrnepn9K2dQvnpgCagbecWR7CdG_ePsbeYoTlAGbN1hfzwztayDLZeT8xCtUtOPVzmj_z4SVNi5SDl6klE-TyIkTGSA1wu67DWnh6rq8mKkuJD9eOH21zY/s1600/dots30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwNm2HYRysn-5gUb7xqHqiDrnepn9K2dQvnpgCagbecWR7CdG_ePsbeYoTlAGbN1hfzwztayDLZeT8xCtUtOPVzmj_z4SVNi5SDl6klE-TyIkTGSA1wu67DWnh6rq8mKkuJD9eOH21zY/s1600/dots30.png" height="400" width="266" /></a></div>
<br />
Any time you want to quit a game, just tap quit or menu and you'll go to the game menu, which scrolls down to display scores for each individual game. You can see my three scores for <i>Grid</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezID40x2QNuZFyDB6ade6LHJirIcLFXjHgN5M1HJrliTWJXfnpfi7wjSwyGhJW7ZadunYg7ou2fP-tWsEnwJ8jyguqDDo8gkRr9f3kBut4VUBIl9GQqWdis1bxWvtpHY8VuH7sigY2ZE/s1600/dots10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezID40x2QNuZFyDB6ade6LHJirIcLFXjHgN5M1HJrliTWJXfnpfi7wjSwyGhJW7ZadunYg7ou2fP-tWsEnwJ8jyguqDDo8gkRr9f3kBut4VUBIl9GQqWdis1bxWvtpHY8VuH7sigY2ZE/s1600/dots10.png" height="400" width="266" /></a></div>
<br />
An options screen is offered as well, near the bottom of the main opening screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-tlStCbRq38TCuka2UBcWVdwPLHMaY2slor0wxyZ2PAb15JJ0qzLOJTmlOVmlAs1Oykop1F5UJQD6jkN4T1hG7aJfnjldgpSts1174qfYFvspJz0M7Oj4oJli90TGCyXhIYvkgrTjNw/s1600/dots31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-tlStCbRq38TCuka2UBcWVdwPLHMaY2slor0wxyZ2PAb15JJ0qzLOJTmlOVmlAs1Oykop1F5UJQD6jkN4T1hG7aJfnjldgpSts1174qfYFvspJz0M7Oj4oJli90TGCyXhIYvkgrTjNw/s1600/dots31.png" height="400" width="266" /></a></div>
<br />
You can choose whether to display a background color different from the dot color, whether to display the numbers or not! or put everything in grayscale if you don't like colors.<br />
<br />
You can also get a short tutorial on how to play.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1frY-9b2eG8WcVs4dbXFkyiUgPk-dPvTGwEs9KgBKjAkd3f1zKS2nAVMd4bpIvkZmK2_cFiQim62aAqlc2YDgJltnL7SCcvIp2YIz5y7ttbGoj8pIdXHFA2-GycCBmsWnU3k-he0OwgI/s1600/dots32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1frY-9b2eG8WcVs4dbXFkyiUgPk-dPvTGwEs9KgBKjAkd3f1zKS2nAVMd4bpIvkZmK2_cFiQim62aAqlc2YDgJltnL7SCcvIp2YIz5y7ttbGoj8pIdXHFA2-GycCBmsWnU3k-he0OwgI/s1600/dots32.png" height="400" width="266" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For some reason the how to play is always in that gray on gray color scheme, which is hard to read. But you don't need it anyway. Next you are told:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNAwGqNJuhu4fUArQM4gbEDjbZ41kjxqXPNs6t3KUmVP0VYV-y60-Cjwl9tfOHsWzhJ-v3m6C_b0oV0ZIMsaicpdIqVsiGIJVLs22r7P29ZPozZCs9TFTIdlAahYSWvEOBs2BK4fj6J6M/s1600/dots33.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNAwGqNJuhu4fUArQM4gbEDjbZ41kjxqXPNs6t3KUmVP0VYV-y60-Cjwl9tfOHsWzhJ-v3m6C_b0oV0ZIMsaicpdIqVsiGIJVLs22r7P29ZPozZCs9TFTIdlAahYSWvEOBs2BK4fj6J6M/s1600/dots33.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Well, at least the dot is in color. I can't stand anything not in color!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihA-Fgg2tSxKh8IOZaoEHpzZHeWQb9xt1okzS1nMCUsIY5sy3grL3lKYSQV6VhkMxQAKDauqVGKAsJ7TRldMOnHBdDb-FjB8I4Kew9nAnanYZg5b7y_HdIq1yczOjNajEV6Iq2bO2xNQ0/s1600/dots34.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihA-Fgg2tSxKh8IOZaoEHpzZHeWQb9xt1okzS1nMCUsIY5sy3grL3lKYSQV6VhkMxQAKDauqVGKAsJ7TRldMOnHBdDb-FjB8I4Kew9nAnanYZg5b7y_HdIq1yczOjNajEV6Iq2bO2xNQ0/s1600/dots34.png" height="400" width="266" /></a></div>
<br />
Two dots. There can only be one. Except that you never see one dot. The minute the penultimate dot covers the ultimate dot, they both disappear! Go figure....<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtyGC-UrWJJ98xofuQXAbulKRq7CIyASBgJJmkMEWwtICZcIYyV1f5TmOn2D2vkyOxwTBEDjsKZUKOKZuIBWd-sqdC4uaqd5AT3zNJHwPDlNMuG1mGjPTV0h7-aR5_IuSJMPSsDUCIpw/s1600/dots35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtyGC-UrWJJ98xofuQXAbulKRq7CIyASBgJJmkMEWwtICZcIYyV1f5TmOn2D2vkyOxwTBEDjsKZUKOKZuIBWd-sqdC4uaqd5AT3zNJHwPDlNMuG1mGjPTV0h7-aR5_IuSJMPSsDUCIpw/s1600/dots35.png" height="400" width="266" /></a></div>
<br />
And do it fast!<br />
<br />
That's it! You can see your stats on how well you've done overall:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx8ML1WttHpM95tG0-OBspkXZUTv8R1kbEmOQuGKVz0LbR7f5nzqGyl326D-vcSuoCMvkPqC3Jtbbw5z2AnYaQtna38QXQCnNdupAMA1ZMoLlH7MzTChrZ3HTwW27vgCugtgWd-hlqxEY/s1600/dots36.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx8ML1WttHpM95tG0-OBspkXZUTv8R1kbEmOQuGKVz0LbR7f5nzqGyl326D-vcSuoCMvkPqC3Jtbbw5z2AnYaQtna38QXQCnNdupAMA1ZMoLlH7MzTChrZ3HTwW27vgCugtgWd-hlqxEY/s1600/dots36.png" height="400" width="265" /></a></div>
Hits and misses? I guess if I drag and don't drop exactly on the right dot, I've missed. By the way, the button to clear the scores doesn't clear the stats, but it does clear the scores which you also see when you hit <b>menu </b>or <b>quit</b>. I guess your stats live with you forever.<br />
<br />
All in all, this is a very entertaining game with lots of cool options. In particular, the color choices are really good and I feel that they aren't random choices, but follow some kind of color theory, or at least follow a particular color palette.<br />
<br />
And there's no sounds or music. Bummer.<br />
<br />
But because this game is so delightful, I'm giving it a 5 out of 5. It would get a 6 if the options screens were in color and a 7 if there was sound and music. But the game is just about perfect and is the kind of quick, entertaining game that belongs on a phone, with a lot of variations on game lay.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Arcade<br />
Score: 5 (out of 5)<br />
Tested on: ZTE Open<br />
Get it at: Firefox Marketplace<br />
<a href="https://marketplace.firefox.com/app/drag-the-dots">https://marketplace.firefox.com/app/drag-the-dots</a><br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-65247883789196470572014-04-04T18:01:00.003-07:002014-04-04T18:01:30.393-07:00Nephew of CSS Shooter (Game Programming)André Jaenisch (e-acute! and ae not a-umlaut) of <a href="https://www.blogger.com/goog_2078833469">https://firefoxosundich.</a><wbr></wbr><a href="http://wordpress.com/">wordpress.com</a> had some comments about my <i>CSS Shooter</i> post at <a href="http://firefoxosgaming.blogspot.com/2014/03/css-shooter-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/css-shooter-game-programming.html</a> that were very useful.<br />
<br />
I had used<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> document.documentElement.<br /> style.overflow = 'hidden';</span></b><br />
<br />
to hide the scrollbars. Because there isn't any "don't show scrollbars" command in Firefox, that seemed like a good idea. Generally people don't use it to hide scrollbars, they use it to clip content outside a particular window.<br />
<br />
However, the CSS 2.1 spec, section 11, does define <span style="font-family: "Courier New",Courier,monospace;">overflow = "hidden"</span> like this:<br />
<br />
<br />
<blockquote class="tr_bq">
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.</blockquote>
<br />
Because I'm defining the contents of the region, I know there's nothing outside it, so I'm happy to use this when I'm looking at the very edge of the window.<br />
<br />
Also, I found an old reference from 2005 to<br />
<br />
<code><b><span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: small;"> overflow: -moz-scrollbars-none</span> </span></b></code> <br />
<br />
but it seems to have disappeared and I can't find it on MDN. Anyone know where it went? <br />
<br />
André had a different approach, which, rather than use an little-known and possibly not supported in the future API, suggested that I simply reverse the motion slightly before you get to the edge! This works too, with only a little bit of alteration in the code.<br />
<br />
Here's his code for the target restart when it hits the left edge:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> // Right edge hit, restart.<br /> if (tarHor > boardWidth-25) {<br /> console.log("Target hit right edge!" +<br /> "Turned around at " + tarHor + <br /> " + " + boardWidth);<br /> tarHor = 10;<br /> }</span></b><br />
<br />
And here's his code for the bullet:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> // Left edge hit, reverse direction.<br /> if (ballHor + changeHor < 10) {<br /> console.log("Ball hit left edge!" +<br /> "Turned around at " + ballHor +<br /> " + " + changeHor);<br /> changeHor = -changeHor;<br /> ballHor = 10;<br /> console.log(ballHor + " " + ballVer);<br /> }<br /> <br /> // Right edge hit, reverse direction.<br /> if (ballHor + changeHor ><br /> boardWidth - 20) {<br /> console.log("Ball hit right edge!" + <br /> "Turned around at " + ballHor + <br /> " + " + changeHor);<br /> changeHor = -changeHor;<br /> // Compensate for unknown width.<br /> // We want multiples of 10.<br /> flr = Math.floor(boardWidth / 10);<br /> ballHor = 10 * flr-30;<br /> console.log(ballHor + " " + ballVer);<br /> }</span></b><br />
<br />
This is perfectly valid and reminds me of the old phrase, "If you can't raise the bridge, lower the river." Games are all about solving problems, and there are usually more than one way to solve a problem.<br />
<br />
André suggested that I add this code for the viewport in the head:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> <meta name="viewport"<br /> content="user-scalable=no,<br /> initial-scale=1,<br /> maximum-scale=1,<br /> width=device-width" /></span></b><br />
<br />
I'm still not up on viewports but you can read about it here: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag</a>.<br />
<br />
<br />
I'm going to be investigating this a lot more as I look more at responsive web design (RWD). Although for games, adaptive web design might be more appropriate. I will be getting a Firefox OS tablet soon and I'll want to write apps that run on it, the two phones I have, and the nearly-forgotten APC Rock I have sitting lonely in a corner. See my post on APC Rock here <a href="http://firefoxosgaming.blogspot.com/2014/01/apc-rock-hardware-review.html">http://firefoxosgaming.blogspot.com/2014/01/apc-rock-hardware-review.html</a>.<br />
<br />
<h2>
Other Problems</h2>
When I was testing André's code, the bullet at the bottom didn't display! At first I thought it was the code and then it was pointed out that maybe the bitmap wasn't there. It wasn't.<br />
<br />
In future code, I'll either avoid bitmaps (probably not likely) or write some code that determines whether the bitmap was actually loaded. There are some ways to do this by loading the bitmap as an Image and then checking to see if it loaded by having an event handler on the image.<br />
<br />
André also had an interesting idea of creating a ball by using a CSS rectangle and rounding the corners so it looks like a ball, from Stack Overflow. <a href="https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page/6921838#6921838">https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page/6921838#6921838</a>.<br />
<br />
<h2>
Moving Forward</h2>
I've been thinking about where to take this blog. My influences are:<br />
<br />
<ol>
<li>Tablet - responsive web design needed!</li>
<li>A return of my love for SVG.</li>
<li>Playing way too much Starbound <a href="http://playstarbound.com/">http://playstarbound.com/</a></li>
<li>Remembering Sigma Star Saga <a href="http://en.wikipedia.org/wiki/Sigma_Star_Saga">http://en.wikipedia.org/wiki/Sigma_Star_Saga</a></li>
</ol>
So what I'm going to do is create a serious large game in several parts that will consist of the following:<br />
<br />
SVG all the way! Why not?<br />
<ol>
<li>A space shooter that you can fly around in.</li>
<li>Land on other planets in a side-scrolling view.</li>
<li>Enter cities in a top-down view with tiles</li>
<li>Make it an actual RPG with statistics, fighting, upgrades, stores, etc.</li>
</ol>
Stay tuned, but not iTuned! Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-13352878586839011702014-04-01T18:14:00.004-07:002014-04-01T18:14:34.196-07:00GBoy Emulator (Game Review)Game emulators are certainly controversial and I do not advocate them or recommend them. But this review will be for those that are interested in how could a game emulator possibly work in Firefox OS with only HTML5 and JavaScript. So don't try this at home, boys and girls, or Waluigi (the brother they don't talk about) will come and visit you in the dark of the night.<br />
<br />
A brilliant person named Robert Bierkamp has created the first emulator for the Firefox OS phone and it works pretty good. Here's an example screen shot:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhCTpIe5uFHzgYp9hFNKup8d7weUnJVHHXgjHuN2Vn95C1nHSm3JngxgXEkX7qg35PWPlj8Ej6LCmehU3GVksTpj0DZEU2WpH49IMINwUwCL8y0NR1YVUoBcLYn6dDDQIq-WZZcORI_Q/s1600/2014-04-01-13-06-52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhCTpIe5uFHzgYp9hFNKup8d7weUnJVHHXgjHuN2Vn95C1nHSm3JngxgXEkX7qg35PWPlj8Ej6LCmehU3GVksTpj0DZEU2WpH49IMINwUwCL8y0NR1YVUoBcLYn6dDDQIq-WZZcORI_Q/s1600/2014-04-01-13-06-52.png" height="400" width="266" /></a></div>
<br />
In case you're really too young, here is what a Gameboy looks like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNe2QKDa4WwYSn9VJYKx7mDF6MSejWVX6oGHbkwbSoZ8_QvdUQtjpWy2tSjOz4ta2W-Oa6FIVzt85JdLdjQWvDDEhCwWuypn2cURvHsjWZLys6lG5gWOW1vK3XdBLd-H-UrW9H9qWjKc/s1600/Nintendo_Gameboy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNe2QKDa4WwYSn9VJYKx7mDF6MSejWVX6oGHbkwbSoZ8_QvdUQtjpWy2tSjOz4ta2W-Oa6FIVzt85JdLdjQWvDDEhCwWuypn2cURvHsjWZLys6lG5gWOW1vK3XdBLd-H-UrW9H9qWjKc/s1600/Nintendo_Gameboy.jpg" height="400" width="243" /></a></div>
<br />
The original Gameboy was amazing in its time. You could carry it around with you, unlike earlier machines like the Atari and NES. You didn't need a TV, you just needed a big pocket. Gameboys got smaller and then evolved into the Gameboy Advanced and beyond, up to the very popular 3DS which is doing very well today.<br />
<br />
But my interest here is two fold.<br />
<br />
First, this really is some amazing clever programming. The author just says he got a lot of stuff from all over the place and put it together. It works. You can really play Mole Mania on the emulator, even on the ZTE Open! More about that in a moment.<br />
<br />
Second, I recommend that you actually buy a real Gameboy and some old games and play them. Why? Because the games are phone-sized and might help you to visualize what kinds of things could be done on a phone. If you look at the amazing quality of something of those games, they pack a lot into a very small package and small screen.<br />
<h2>
How the Emulator Works</h2>
I don't know and don't need to know how the actual code works. I'm not building one! But in case you want to use it, here's a few tips:<br />
<br />
1. Grab it from the Mozilla Marketplace. It's free. <a href="https://marketplace.firefox.com/app/gboy-emulator/">https://marketplace.firefox.com/app/gboy-emulator/</a>. Load it onto your phone.<br />
<br />
2. Then add another program that helps GBoy Emulator find the files it needs. The author recommends Explorer or Alpha Explorer.<br />
<br />
3. Find a snapshot of a Gameboy ROM. Somewhere. Actually they're all over, but not supposed to be. You didn't hear it from me and I don't advocate it. I have a nice collection of real cartridges (which are pretty cheap these days, around $5 to $10 bucks). You'll need a Gameboy, and they are really cheap as well. You don't need to pay much for those either! But if you want to download a ROM to try it out, search for "Gameboy ROMs" and you'll find many that are out there.<br />
<br />
4. Most of the ROMs are zipped. Unzip it. Put it somewhere you can find it. Screenshots is a good place!<br />
<br />
5. Then start GBoy Emulator. If you've installed Explorer, it will look like this:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilri001c8-sW-ZS5P_vYEKdUIMnbCB_6Gyj2upDPjkKqnjA0fPcyTfwVE0zsj4EEFd4GMcUHu7_-50f0iwTsMd3mdJPDxjPHc7D0NRj9DiGMg3ha6HiHBpSiGPVv1fgQwTNly0BcbcNNM/s1600/2014-04-01-13-18-21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilri001c8-sW-ZS5P_vYEKdUIMnbCB_6Gyj2upDPjkKqnjA0fPcyTfwVE0zsj4EEFd4GMcUHu7_-50f0iwTsMd3mdJPDxjPHc7D0NRj9DiGMg3ha6HiHBpSiGPVv1fgQwTNly0BcbcNNM/s1600/2014-04-01-13-18-21.png" height="400" width="266" /></a></div>
<br />
6. Tap on Explorer and grab your unzipped ROM file. It should have a .GB extension.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfowu2TWdWBkiJRGdDHh95NsH4u16K0x_GXK01eSwl6f1Nsk4j8MgkY_n3tnDRJLkcZBoAshFeMhkLIg8GYV6nku_zypkasar5pXtus4Fx-nOZPrajRQUKtTk59d6gOs4x7UzetMU9DEs/s1600/2014-04-01-13-26-06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfowu2TWdWBkiJRGdDHh95NsH4u16K0x_GXK01eSwl6f1Nsk4j8MgkY_n3tnDRJLkcZBoAshFeMhkLIg8GYV6nku_zypkasar5pXtus4Fx-nOZPrajRQUKtTk59d6gOs4x7UzetMU9DEs/s1600/2014-04-01-13-26-06.png" height="400" width="265" /></a></div>
<br />
7. The game that will be chosen is called Mole Mania. Very cool game about a mole named Monty who must rescue his family from the evil Jinbe!<br />
<br />
8. Then the game will be loaded and you can play it!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpmzkqplNTAPW5q5B9H75RvmpcQ1Mfa1YqeuYU3n7Mj7xlo1GrGoFG01wseslYZonmIa0ZWO4uJVqqEABrAtqi6lHDB9_cx6gtXvZ8wL5ZYqlwId68wFkZpKbr5HzEFRXkHxuKrlT1as/s1600/2014-04-01-13-27-35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpmzkqplNTAPW5q5B9H75RvmpcQ1Mfa1YqeuYU3n7Mj7xlo1GrGoFG01wseslYZonmIa0ZWO4uJVqqEABrAtqi6lHDB9_cx6gtXvZ8wL5ZYqlwId68wFkZpKbr5HzEFRXkHxuKrlT1as/s1600/2014-04-01-13-27-35.png" height="400" width="266" /></a></div>
<br />
The colors seem to change. Dunno why!<br />
<h2>
Using GBoy Emulator</h2>
Going back to the original NES, the controls are Select, Start, A, B, and the 4 arrow buttons. They all work. Even the sound works! Most of the games will tell you what each button does.<br />
<br />
I love the humor of this early game, which was created by Shigeru Miyamoto, legendary creator of Mario, Zelda, and a ton of other amazing games. Mole Mania isn't as well know, but still cool. The game involves Monty digging his way under various obstacles and having to remember what was on the surface when he comes up. A really nice puzzle game with a story. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4Wl0sJ0tF7ypwZ5OmXDlYaDGprHgdj2G9MqSB3k1NWLMaG5I2JH2Gy8VfcqS-89BgEri0fqrJ56UAdPW7GzpjcKOPx4PjD3wByIxB0TOsmUsM2VcT4aZxQEsE7OE_nhEBBsQbtRymEc/s1600/2014-04-01-13-28-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4Wl0sJ0tF7ypwZ5OmXDlYaDGprHgdj2G9MqSB3k1NWLMaG5I2JH2Gy8VfcqS-89BgEri0fqrJ56UAdPW7GzpjcKOPx4PjD3wByIxB0TOsmUsM2VcT4aZxQEsE7OE_nhEBBsQbtRymEc/s1600/2014-04-01-13-28-01.png" height="400" width="266" /></a></div>
<br />
You can see that the emulator is still a little rough around the edges, but is certainly worth a look. And it plays just fine. Just remember to buy a real Gameboy and some real Gameboy games and learn from them so you can create fabulous Firefox OS phone games.<br />
<br />
Starting to dig down. Monty is in the lower left hand corner. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvAaMaBdt_pnVXZ6Ov_l5uNg3BKe-IgSky5RzIKzktp-ztbvEun4ivMb_cbSS70rhzdfSIpq91ZzyCcO5ZXkR_DWaeuZitxdgtLtiu9qyFO3Cc80Yz2Stbdan20IIaWqQCsqil-rskRk/s1600/2014-04-01-13-29-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvAaMaBdt_pnVXZ6Ov_l5uNg3BKe-IgSky5RzIKzktp-ztbvEun4ivMb_cbSS70rhzdfSIpq91ZzyCcO5ZXkR_DWaeuZitxdgtLtiu9qyFO3Cc80Yz2Stbdan20IIaWqQCsqil-rskRk/s1600/2014-04-01-13-29-01.png" height="400" width="266" /></a></div>
<br />
Now he's underground, in the same place but one level down. Where to go?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0sVM_o6cxBeGEErJ-6_GzudWJqUzcqjbEk5mUxQggAReSrEns_ZmszyAIy_xFek4I2HUG0Rb5sAIMTbNj0lhC5-z5D_CbO77czTHcruqbVE2JKoj-x2Jst-fwMdGpBZfY1LbRHKmu2nI/s1600/2014-04-01-13-29-24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0sVM_o6cxBeGEErJ-6_GzudWJqUzcqjbEk5mUxQggAReSrEns_ZmszyAIy_xFek4I2HUG0Rb5sAIMTbNj0lhC5-z5D_CbO77czTHcruqbVE2JKoj-x2Jst-fwMdGpBZfY1LbRHKmu2nI/s1600/2014-04-01-13-29-24.png" height="400" width="266" /></a></div>
<br />
Let's go north!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8f1gajoOyM2uOA5PNzQ4msTPnWN-MCC-Yg60sgYjRdLcdbXb4klx7sKetjQBu8JLYMqFr_5wg2xqMSCPmyvR82tgOP0Y_l5DqEnUfZubJVbCnQFGSGtMpTKeuN04OuigyBFIVRRxq7w/s1600/2014-04-01-13-29-38.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8f1gajoOyM2uOA5PNzQ4msTPnWN-MCC-Yg60sgYjRdLcdbXb4klx7sKetjQBu8JLYMqFr_5wg2xqMSCPmyvR82tgOP0Y_l5DqEnUfZubJVbCnQFGSGtMpTKeuN04OuigyBFIVRRxq7w/s1600/2014-04-01-13-29-38.png" height="400" width="266" /></a></div>
<br />
And tunnel back to the surface.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KeDDxPIJQBKQS2YjwMrEU-XDGgbG39bmOKLcSGSTq1VyCPh5jDUEcyf3x6aDPhOAH_8xB8TZGk3ahF8tVeIwWHyo-FmYf96VqG8sZj6IoeNlCcmWxaUNmtnGT0LO9-6kiTsGe5RrR1o/s1600/2014-04-01-13-29-52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KeDDxPIJQBKQS2YjwMrEU-XDGgbG39bmOKLcSGSTq1VyCPh5jDUEcyf3x6aDPhOAH_8xB8TZGk3ahF8tVeIwWHyo-FmYf96VqG8sZj6IoeNlCcmWxaUNmtnGT0LO9-6kiTsGe5RrR1o/s1600/2014-04-01-13-29-52.png" height="400" width="266" /></a></div>
<br />
Well, that didn't help. He'll need to tunnel back down, go South one, and then East two, and tunnel up to get to the next part! An interesting exercise in mental ability! If you want to play the real game, you can get it on the 3DS Virtual Console! But there's something nice about snapping your game into a Gameboy and playing it.<br />
<br />
Oh, one tip about Gameboy consoles. If you can find one, get the Gameboy Advance SP Backlit Model (AGS-101). That was the last handheld that would still play Gameboy and Gameboy Color cartridges, and it has a backlight! They're not that rare and you can pick them up on eBay for $50 or so. Worth it (and you can play the ton of Gameboy Advance games too).<br />
<br />
<br />
You can find out more about the GBoy Emulator at <a href="http://mundofirefoxos.blogspot.com/2014/02/gboy-emulator.html">http://mundofirefoxos.blogspot.com/2014/02/gboy-emulator.html</a>.<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-2251693244315644252014-03-26T18:49:00.001-07:002014-03-26T18:49:51.467-07:00CSS Shooter (Game Programming)Recently I created a new CSS shell and wrote about it in <i>Son of CSS</i> Shell at <a href="http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html</a>. Having done that, I'd like to devote a few posts to working more with just plain old CSS. No Canvas, no SVG, not even CSS3. Some people call this CSS sprites but I'll just call it CSS game programming. And I'll be doing more with actual CSS sprites, which are a collection of images on a single file.<br />
<br />
Like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzflAJ5_b0aTAfcBmqEzM9fTT7KfO5SXRK0G2fSeiz9tBT_4DfOjdxIj500rFpsSHYaxwGfIsdMhMysC7-5SMbw1EemHmx0NEh-ovu5QMxmhBlksz2jWcLO5SuoCtswKPSQYiJA_vaV_Q/s1600/detective.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzflAJ5_b0aTAfcBmqEzM9fTT7KfO5SXRK0G2fSeiz9tBT_4DfOjdxIj500rFpsSHYaxwGfIsdMhMysC7-5SMbw1EemHmx0NEh-ovu5QMxmhBlksz2jWcLO5SuoCtswKPSQYiJA_vaV_Q/s1600/detective.png" height="200" width="154" /></a></div>
<br />
But that's later. Right now I'm interested in doing more actual gaming with CSS. Today's game is a simple one, that is a shooter. Inspired by Breakout but with only one brick.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHcudYVydmRdXzhV-gv5p4pGTJ0mS8SiTxICh72TtitTldwkQSbPy7wax8GdLawPZ7g3JLEOLF_Rt7U1PRY4GKop4v86J_xVgM8D2j4EwkkyI2m-vCs3fgx3QoCcl5y425OiFkkcZ_I90/s1600/Atari-Breakout_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHcudYVydmRdXzhV-gv5p4pGTJ0mS8SiTxICh72TtitTldwkQSbPy7wax8GdLawPZ7g3JLEOLF_Rt7U1PRY4GKop4v86J_xVgM8D2j4EwkkyI2m-vCs3fgx3QoCcl5y425OiFkkcZ_I90/s1600/Atari-Breakout_1.jpg" height="217" width="320" /></a></div>
<br />
But then I was also inspired by the recent release of Yoshi's Island on the Nintendo 3DS and actually inspired by the earlier version on the Game Boy Advance that used a special moving cursor to aim shots.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQw78dZF2Wyc4QHDrFWWAHN5j9ZjK2Rbj4EYWWP8tCReB0l8p3_DmRd-7cf_91046ukwqfhQL7YpvUTRiNMBRyn6RbgxDKTM_4-oBXdc3ZF0yuC5KyL2_38uhY6gvcdMZzA_Oxsvhl88/s1600/500px-Yoshi's_Island_Speed_Run_2-2_any%25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQw78dZF2Wyc4QHDrFWWAHN5j9ZjK2Rbj4EYWWP8tCReB0l8p3_DmRd-7cf_91046ukwqfhQL7YpvUTRiNMBRyn6RbgxDKTM_4-oBXdc3ZF0yuC5KyL2_38uhY6gvcdMZzA_Oxsvhl88/s1600/500px-Yoshi's_Island_Speed_Run_2-2_any%25.jpg" height="179" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
Yoshi is in the center and the cursor (on the top right) moves up and down in an arc. At the right moment you press a button and Yoshi's egg flies in that direction! Well, I'm not going to replicate Yoshi's Island but I will say that the best version is on the Game Boy Advance and it looks like that version will be appearing on the Wii U Virtual Console very soon. <br />
<br />
So I created a very simple shooter that aims a bullet from the bottom of the screen and shoots it at a target near the top of the screen. And to make it more challenging, the top target moves from left to right across the screen, while the bullet (until fired) moves back and forth. Just click on the screen at the right moment and you can hit the target.<br />
<br />
Here's what the game looks like in play.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfU0rVCPd7u6FXHeEdFbQbOdgG2u3o8apIg9iyKTez44vh9EY2pgXBKbOVfs6hYDTK9fFpwUwsNxX-j3hZrbmq_mTQeOp5uYS4CIr9Msl5gxpzWwkEFYT_djkTvg_oGGUI1fvNxU1n234/s1600/opening+screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfU0rVCPd7u6FXHeEdFbQbOdgG2u3o8apIg9iyKTez44vh9EY2pgXBKbOVfs6hYDTK9fFpwUwsNxX-j3hZrbmq_mTQeOp5uYS4CIr9Msl5gxpzWwkEFYT_djkTvg_oGGUI1fvNxU1n234/s1600/opening+screen.png" height="400" width="241" /></a></div>
<br />
Tap anywhere to make the fuchsia bullet shoot up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpipc6Okl4ksAsKCI5h7MNEP9GnsisgcoXTtc-ivAqEOR9qsLEa50Nllm1nIjyD6z_5uZVE6y_0eUCFRUwOZBAibpvohFUrV4kefSC0epaxUljsIAJDmJdmERD8zS3Q5iFFWI5F_DZWyE/s1600/moving+up.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpipc6Okl4ksAsKCI5h7MNEP9GnsisgcoXTtc-ivAqEOR9qsLEa50Nllm1nIjyD6z_5uZVE6y_0eUCFRUwOZBAibpvohFUrV4kefSC0epaxUljsIAJDmJdmERD8zS3Q5iFFWI5F_DZWyE/s1600/moving+up.png" height="400" width="241" /></a></div>
<br />
The bullet is on its way to the top of the screen. In this case, it looks like it is going to hit the green target. And it does! An alert is displayed telling you that you hit the target.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzObVXZHjXNdLkXk97E3Q3JJvyKx4R_T-KPD2KWTkkLU3ndWpWR6J6le8vmRkppUL_AU8MYMn-yxPX4QT3WypcOB-xW6K6ALMcOl8oEDEnOv2L5ze_461sJqJoYc5sJzZzEbncHOZYZsI/s1600/hit+on+simulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzObVXZHjXNdLkXk97E3Q3JJvyKx4R_T-KPD2KWTkkLU3ndWpWR6J6le8vmRkppUL_AU8MYMn-yxPX4QT3WypcOB-xW6K6ALMcOl8oEDEnOv2L5ze_461sJqJoYc5sJzZzEbncHOZYZsI/s1600/hit+on+simulator.png" height="400" width="241" /></a></div>
<br />
And if you didn't hit the target (easy to do since the cursor moves one way and the target another) you'll be told that you missed, but in either case you can start over again by just tapping on OK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpqlA3Y0DMbqX7YW-MiBdGtDe1Daf_D0OK8qWTR6rJOS41je5xOYqE7hKEANMHu5KkXjpaEa0gEVlYwuo_HN1a9NTkqOOZOT4zaFcrpnN-QbLAECXp_PhviWK4oaRE2N1jkNXqpbQNPs/s1600/missed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpqlA3Y0DMbqX7YW-MiBdGtDe1Daf_D0OK8qWTR6rJOS41je5xOYqE7hKEANMHu5KkXjpaEa0gEVlYwuo_HN1a9NTkqOOZOT4zaFcrpnN-QbLAECXp_PhviWK4oaRE2N1jkNXqpbQNPs/s1600/missed.png" height="400" width="241" /></a></div>
<br />
The Firefox OS App Manager makes it really easy to test and take screen shots. <br />
<br />
This is cool, but I had even more fun creating it by using the desktop of Firefox Nightly. As explained in the Son of CSS Shell post at <a href="http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html</a>, I created a simple shell that is responsive to whatever size the browser happens to be. So because this game doesn't have anything phone-specific, I ran it in the desktop version and resized it to vaguely phone size. I also hit Control+Shift+K to get the debugger going, and here is what it looks like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHq8v6q-fce60On2En9QhYtZ9-4YxXxlK7HoOVktBpaA1EaMc5SDzm313FJNa1GpLZlaVOlViJH9ZbUX-sE09VAN4IkmFAOdMq7VRvnqtpqq7xpii0zzYCQx4LWdhxawImkSZ88znITA/s1600/Hit.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHq8v6q-fce60On2En9QhYtZ9-4YxXxlK7HoOVktBpaA1EaMc5SDzm313FJNa1GpLZlaVOlViJH9ZbUX-sE09VAN4IkmFAOdMq7VRvnqtpqq7xpii0zzYCQx4LWdhxawImkSZ88znITA/s1600/Hit.PNG" height="400" width="253" /></a></div>
<br />
I've just had a hit, but you can see the debugging output that shows me the target and ball matching, and the subsequent collision. You can also see the bullet and target colliding in the upper right-hand corner.<br />
<br />
Working this way is very, very fast when you are creating, and if you're not doing something that requires a phone, I recommend it. Of course all bets are off if you're doing Device Orientation!<br />
<br />
Here's a similar screen showing the debugging output of the desktop browser for a miss. You can see that the bullet is on the left, far away from the target in the middle.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nApcWkD6HStXoaI_2JenLAd9gUyxnWgm71eYcSQh0h27wpnEQdEy9OpiF9bjydhATPHIhi1slsBAabgowdvRrU2C_lmz1k1QR7QySclGeQBDVei6daf_cV6zCpZu-nlvV_b1V54iCv8/s1600/Miss.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nApcWkD6HStXoaI_2JenLAd9gUyxnWgm71eYcSQh0h27wpnEQdEy9OpiF9bjydhATPHIhi1slsBAabgowdvRrU2C_lmz1k1QR7QySclGeQBDVei6daf_cV6zCpZu-nlvV_b1V54iCv8/s1600/Miss.PNG" height="400" width="252" /></a></div>
<br />
Firefox OS makes it so easy to make games that you have no excuse not to!<br />
<br />
<h2>
Code</h2>
And here is the code that makes this happen:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"><!DOCTYPE HTML><br /><html><br /><head><br /> <meta charset="UTF-8"><br /> <title><br /> Simple CSS Shoot<br /> </title><br /><br /> <style><br /> <br /> #ball<br /> {<br /> width: 20px;<br /> height: 20px;<br /> position: absolute;<br /> top: 200px;<br /> left: 100px;<br /> background-image: url(ball.png);<br /> }<br /> <br /> #target<br /> {<br /> width: 20px;<br /> height: 20px;<br /> position: absolute;<br /> top: 200px;<br /> left: 100px;<br /> background-color: green; <br /> }<br /><br /> </style><br /><br /> <div id="ball"></div> <br /> <div id="target"></div><br /><br /> <script><br /><br /> // Global variables <br /> var boardWidth = window.innerWidth;<br /> var boardHeight = window.innerHeight; <br /> var ballHor = boardWidth / 2;<br /> var ballVer = boardHeight - 50; <br /> var tarHor = boardWidth / 2;<br /> var tarVer = 50; <br /> var changeHor = 10;<br /> var changeVer = 10;<br /> <br /> // Log initial board height & width.<br /> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);<br /> <br /> // requestAnimationFrame variations<br /> var requestAnimationFrame =<br /> window.requestAnimationFrame ||<br /> window.mozRequestAnimationFrame ||<br /> window.webkitRequestAnimationFrame ||<br /> window.msRequestAnimationFrame; <br /> <br /> // Stop scroll bars from interfering.<br /> document.documentElement.<br /> style.overflow = 'hidden';<br /> <br /> // Load event listener<br /> window.addEventListener("load", <br /> getLoaded, false);<br /> <br /> // Resize event listener<br /> window.addEventListener("resize", <br /> resizeMe, false);<br /> <br /> // Mouse down event listener<br /> window.addEventListener(<br /> "mousedown", <br /> bulletFly, false);<br /><br /> // Get target information.<br /> var myTarget = <br /> document.querySelector("#target");<br /><br /> // Get ball information.<br /> var myBall = <br /> document.querySelector("#ball");<br /> <br /> // Function called on page load.<br /> function getLoaded() { <br /> <br /> // Lock screen orientation to portrait.<br /> // Uses "moz" prefix.<br /> window.screen.<br /> mozLockOrientation("portrait"); <br /> console.log("Locked to portrait");<br /> <br /> // Background color<br /> document.body.style.<br /> backgroundColor = "Peru";<br /> <br /> // Start game loop.<br /> gameLoop(); <br /> <br /> // Page loaded message<br /> console.log("The page is loaded."); <br /> }<br /> <br /> // Game loop<br /> function gameLoop() {<br /> <br /> // Repeat game loop infinitely.<br /> animFrame = <br /> requestAnimationFrame(gameLoop);<br /> <br /> // The ball is now a bullet.<br /> bulletMove(); <br /> <br /> // Move the target.<br /> targetMove();<br /> }<br /> <br /> // Make the target move.<br /> function targetMove() {<br /> <br /> // Changes are calculated but do not<br /> // take effect until next time. <br /> myTarget.style.left = tarHor + "px";<br /> myTarget.style.top = tarVer + "px"; <br /><br /> // Calculate new horizontal component.<br /> tarHor = tarHor + 10;<br /> <br /> // Right edge hit, restart.<br /> if (tarHor > boardWidth)<br /> tarHor = 0; <br /> }<br /> <br /> // The bullet flies up.<br /> function bulletFly() {<br /> <br /> // Stop animation loop!<br /> cancelAnimationFrame(animFrame); <br /> <br /> // Delay for animation motion<br /> // Outer loop - time set at end <br /> loopTimer = setTimeout(function() {<br /> <br /> // Animation of the bullet<br /> // Inner loop - does the drawing<br /> bulletFrame = <br /> requestAnimationFrame(bulletFly); <br /> <br /> // Calculate bullet fly up.<br /> ballVer = ballVer - 50; <br /> <br /> // Changes are calculated but do not<br /> // take effect until next time. <br /> myBall.style.left = ballHor + "px";<br /> myBall.style.top = ballVer + "px"; <br /><br /> // Track bullet and target<br /> console.log("Ball: " + ballVer +<br /> " ," + ballHor + " Target: " +<br /> tarHor);<br /> <br /> // TEST - REMOVE<br /> // ballHor = tarHor;<br /> <br /> // Test for collision.<br /> // Horizontal the same<br /> // Vertical close to top. <br /> if (((ballHor < (tarHor + 20)) &&<br /> (ballHor > (tarHor - 20))) &&<br /> (ballVer < 60)) {<br /> <br /> // It's a hit!<br /> console.log("Collision");<br /> alert("You hit! Start over!");<br /> <br /> // Reset everything.<br /> startOver();<br /> }<br /> <br /> // Test for missing.<br /> // Vertical less than 50.<br /> if (ballVer < 60) {<br /> console.log("Missed!");<br /> alert("Missed! Start Over!");<br /> <br /> // Reset everything.<br /> startOver();<br /> } <br /> } , 300); // Delay<br /> }<br /> <br /> // Reset everything and start over!<br /> function startOver(){<br /> <br /> // Reset ball and target.<br /> ballHor = boardWidth / 2;<br /> ballVer = boardHeight - 50; <br /> tarHor = boardWidth / 2;<br /> tarVer = 50; <br /> <br /> // Stop the drawing.<br /> cancelAnimationFrame(bulletFrame);<br /> <br /> // Stop the loop.<br /> clearTimeout(loopTimer);<br /> <br /> //Go to the game loop and start over.<br /> gameLoop();<br /> }<br /> <br /> // Calculate and move the ball. <br /> function bulletMove() {<br /> <br /> // Changes are calculated but do not<br /> // take effect until next time. <br /> myBall.style.left = ballHor + "px";<br /> myBall.style.top = ballVer + "px"; <br /><br /> // Calculate new horizontal component.<br /> ballHor = ballHor + changeHor;<br /><br /> // Left edge hit, reverse direction.<br /> if (ballHor + changeHor < -10) {<br /> changeHor = -changeHor;<br /> ballHor = 10;<br /> }<br /> <br /> // Right edge hit, reverse direction.<br /> if (ballHor + changeHor ><br /> boardWidth - 10) {<br /> changeHor = -changeHor;<br /> // Compensate for unknown width.<br /> // We want multiples of 10.<br /> flr = Math.floor(boardWidth / 10);<br /> ballHor = 10 * flr; <br /> }<br /> }<br /><br /> // Testing in desktop browser only.<br /> // Changes board size to match new.<br /> function resizeMe() {<br /> <br /> //Change board size.<br /> boardWidth = window.innerWidth;<br /> boardHeight = window.innerHeight; <br /> <br /> // Log initial board height & width.<br /> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);<br /> }<br /> <br /> </script><br /></head><br /><br /><body><br /> <footer><br /> <small><br /> Copyright &copy; 2014 Bob Thulfram<br /> </small><br /> </footer><br /></body><br /></html></span></b><br />
<br />
This uses the Son of CSS shell, so I won't explain any of that here! But here are the new parts that you might like to know about.<br />
<br />
<h3>
Target CSS</h3>
I defined the target in CSS like this:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> #target<br /> {<br /> width: 20px;<br /> height: 20px;<br /> position: absolute;<br /> top: 200px;<br /> left: 100px;<br /> background-color: green; <br /> }</span></b><br /><br />
Similar to the bullet, but instead of using an imported PNG image, I just used the power of CSS to create a box and give it the background color of <b>green</b>. If you want boxes, CSS can turn them out all day.<br />
<br />
I also then gave the target a place in the browser DOM by making a DIV. Remember, there's no code in the body of the page!<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> <div id="target"></div></span></b><br />
<br />
I also had to select the target to make it known to everybody.<br />
<br /><b><span style="font-family: "Courier New",Courier,monospace;"> var myTarget = <br /> document.querySelector("#target");</span></b><br />
<br />
This might seem like a strange way to do things, but it works in every browser, and especially in Firefox OS. Just do these things to introduce your CSS objects to the DOM and you can do anything you want with them. Follow these steps:<br />
<br />
1. Define the CSS object using CSS.<br />
2. Create a DIV with the ID of the CSS object you just defined.<br />
3. Select the object with querySelector and your CSS object is known to all.<br />
<h3>
Global</h3>
Then I added a few things to the global section that will be useful later:<br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> var tarHor = boardWidth / 2;<br /> var tarVer = 50; </b></span><br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: inherit;">This puts the target near the top. It's horizontal will change when the game starts.</span><b> </b></span><br /><br />
I also changed a global for the ball:<br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> var ballVer = boardHeight - 50; </b></span><br /><br />
This makes the vertical position of the ball near the bottom. The horizontal will change when the game starts.<br />
<br />
<b>Note:</b> in the code, the bullet is called ball because I kept the old code from the shell. I don't like to change variable names if I don't have to. I hope you don't find it too confusing.<br />
<br />
<h3>
Touch Event</h3>
Next I added a touch event, also known as <b>mousedown</b>. The phone will interpret this as a touch event.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> window.addEventListener(<br /> "mousedown", <br /> bulletFly, false);</span></b><br />
<br />
This will create an event listener which will call the <b>bulletFly </b>function when the screen is touched anywhere. And works with mouse clicks in the desktop browser. Two events for the price of one!<br />
<br />
<h3>
Game Loop</h3>
Add this function call to the game loop:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> bulletMove();</span></b><br />
<br />
It was called <b>ballMove() </b>in the shell. It will move the bullet back and forth every time the game loop runs (governed by <b>requestAnimationFrame</b>).<br />
<br />
Then add the function call to move the target with this:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> targetMove();</span></b><br />
<br />
<h3>
Moving the Target</h3>
This moves the target!<br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> function targetMove() {<br /> <br /> myTarget.style.left = tarHor + "px";<br /> myTarget.style.top = tarVer + "px"; <br /><br /> tarHor = tarHor + 10;<br /> <br /> if (tarHor > boardWidth)<br /> tarHor = 0; <br /> }</b></span><br /><br />
This just makes the target move from left to right. The target is drawn but the changes won't take effect until the next time through.<br />
<br />
The target horizontal position is incremented by 10 and then a check is made. If the target would go off the right edge, the horizontal position is set to 0.<br />
<br />
<h3>
Moving the Bullet</h3>
The bullet moves right to left and then left to right. It makes the game more challenging to have two different motions.<br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> function bulletMove() {<br /> <br /> myBall.style.left = ballHor + "px";<br /> myBall.style.top = ballVer + "px"; <br /><br /> ballHor = ballHor + changeHor;<br /><br /> if (ballHor + changeHor < -10) {<br /> changeHor = -changeHor;<br /> ballHor = 10;<br /> }<br /> <br /> if (ballHor + changeHor ><br /> boardWidth - 10) {<br /> changeHor = -changeHor;<br /> flr = Math.floor(boardWidth / 10);<br /> ballHor = 10 * flr; <br /> }<br /> }</b></span><br /><br />
This starts out the same as the ballMove function in the Son of CSS shell. But because it only goes left and right and doesn't hit the top or bottom, it just checks for the left and right edges.<br />
<br />
If the left edge is hit, the direction changes and the bullet horizontal is set to 10.<br />
<br />
But if the right edge is hit, the direction is changed, but a quick calculation takes place to make sure that the new bullet horizontal position is set to a multiple of 10. Because we can't know the exact screen size, this is one of the fun parts of making a responsive design.<br />
<h3>
Shooting the Bullet</h3>
This is the meat of the program. It does a lot of things! <br />
<br /><span style="font-family: "Courier New",Courier,monospace;"><b> function bulletFly() {<br /> <br /> cancelAnimationFrame(animFrame); <br /> <br /> loopTimer = setTimeout(function() {<br /> <br /> bulletFrame = <br /> requestAnimationFrame(bulletFly); <br /> <br /> ballVer = ballVer - 50; <br /> <br /> myBall.style.left = ballHor + "px";<br /> myBall.style.top = ballVer + "px"; <br /><br /> console.log("Ball: " + ballVer +<br /> " ," + ballHor + " Target: " +<br /> tarHor);<br /> <br /> // TEST - REMOVE<br /> // ballHor = tarHor;<br /> <br /> if (((ballHor < (tarHor + 20)) &&<br /> (ballHor > (tarHor - 20))) &&<br /> (ballVer < 60)) {<br /> <br /> console.log("Collision");<br /> alert("You hit! Start over!");<br /> <br /> startOver();<br /> }<br /> <br /> if (ballVer < 60) {<br /> console.log("Missed!");<br /> alert("Missed! Start Over!");<br /> <br /> startOver();<br /> } <br /> } , 300); // Delay<br /> }</b></span><br /><br />
First the requestAnimationFrame used in the game loop is canceled. Once the bullet starts on its upward journey, you don't want the game loop to run any longer.<br />
<br />
Next, a new loop is created, one that will provide a short delay between each motion of the bullet as it flies up. This loop uses setTimeout with an anonymous function. Inside that function is an inner loop that just runs a different requestAnimationFrame.<br />
<br />
This will work in a lot of cases where you want motion. You calculate the motion, have a short delay in an outer loop, and then in an inner loop you use requestAnimationFrame to do the actual drawing. This is very efficient.<br />
<br />
Once the loop is running, every time through is will move the bullet up 50 pixels and draw it. I added a console.log here so I could track the bullet.<br />
<br />
Then I tested to see if a collision had taken place. This is a bit tricky, and watch those parentheses. I recommend you use an editor that will check parentheses! I use notepad++ and I'm very happy with it.<br />
<br />
The calculation sees if the horizontal positions of the bullet and target are within a certain range of each other and then checks the vertical. The && is just a logical AND and says these three conditions have to be true:<br />
<br />
1. The bullet and target are close on one side horizontally.<br />
2. The bullet and target are close on the other side horizontally.<br />
3. The bullet is high enough to be close vertically to the target.<br />
<br />
If all three are true, you have a collision. A console.log is displayed, an alert is displayed, and the <b>startOver </b>function is called to restart the game. <br />
<br />
If that doesn't happen, then a second check happens to see if the bullet went off the top of the screen. If it did, a similar console.log, alert, and call to startOver takes place.<br />
<br />
Note: I added<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> ballHor = tarHor;</span></b><br />
<br />
<br />
in my testing to make it easy to see if the bullet was hitting the target but then commented it out. Sometimes this is a useful trick when you are trying to test something in a fast moving game.<br />
<br />
<h3>
Starting Over</h3>
I created a separate <b>startOver </b>function because the tasks were shared between colliding and going off the top of the screen. <br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> function startOver(){<br /> <br /> ballHor = boardWidth / 2;<br /> ballVer = boardHeight - 50; <br /> tarHor = boardWidth / 2;<br /> tarVer = 50; <br /> <br /> cancelAnimationFrame(bulletFrame);<br /> <br /> clearTimeout(loopTimer);<br /> <br /> gameLoop();<br /> }</b></span><br />
<br />
This just sets the initial position of the bullet and target. It then cancels the two loops that were used to move the bullet up, and calls the game loop.<br />
<br />
That's it! <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-80667566987252560632014-03-24T16:48:00.000-07:002014-03-24T16:48:01.135-07:00Circle Tetris (Game Review)Here's a game I haven't seen before that takes an old idea and gives it a new twist! Probably everyone knows about Tetris, that Russian game that swept through the world in 1984 by Alexey Pajitnov.<br />
<br />
Here is the original, running on an emulation of a Soviet DVK-2 computer.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZpJsEPWPvoV7CgtQcJ8k64roxnsgyT2cfwStkUTPivtoSP3-6kT3ASze6vAZU6DMA0m7gq0n_WMC-MwT2cYJ99IBISKRkUNuz922OfCDOD9tpJmlc0sjfBlB7JrXFStSAZuuFJ5mLBM/s1600/250px-Tetris-VeryFirstVersion.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZpJsEPWPvoV7CgtQcJ8k64roxnsgyT2cfwStkUTPivtoSP3-6kT3ASze6vAZU6DMA0m7gq0n_WMC-MwT2cYJ99IBISKRkUNuz922OfCDOD9tpJmlc0sjfBlB7JrXFStSAZuuFJ5mLBM/s1600/250px-Tetris-VeryFirstVersion.png" height="241" width="400" /></a></div>
<br />
<br />
But there's a new Tetris in the Mozilla Marketplace, called Circle Tetris, created by Guilherme Herzog & Eduardo Costa in Brazil. It looks like this!<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQR1rr1bdUCagTejsfrMy9KZR4MfK_0cxXtpmdRUdPLNfKhMMbn0HRwE3uK8MCcht8fTD7i16e_IpJ9Fx-15wR8II-u0hgYiOJOgzqbJM-9JugGXK-K6gBM8qfEI9ws_geO1EFNcThL4/s1600/tetris+01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQR1rr1bdUCagTejsfrMy9KZR4MfK_0cxXtpmdRUdPLNfKhMMbn0HRwE3uK8MCcht8fTD7i16e_IpJ9Fx-15wR8II-u0hgYiOJOgzqbJM-9JugGXK-K6gBM8qfEI9ws_geO1EFNcThL4/s1600/tetris+01.png" height="400" width="266" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
That is, if you're not a skilled player. The point of the game is that the blocks drop down from anywhere on the outside and you want them to land in such a way that a complete circle forms. When a circle forms, the pieces disappear and you get an increased score. Or at least I think that is what is happening because there isn't any Help for this game. But maybe that's okay?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here's how the game starts. One of the cool things is that the circle around Circle Tetris is moving constantly as a nice little decoration. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaZfmO5kvSHBvpDh2gaAZXPrk8uj4oINLtMvAksEJ5E-DQvrk2GftCpqnzy0jeRAqZHQMlBOPZPl6H2QIcEvLjnv2pkRAzTrm1otdv804YcSCR1vdwFlbWOub6l3-162uGSHcOvWergY/s1600/tetris+02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaZfmO5kvSHBvpDh2gaAZXPrk8uj4oINLtMvAksEJ5E-DQvrk2GftCpqnzy0jeRAqZHQMlBOPZPl6H2QIcEvLjnv2pkRAzTrm1otdv804YcSCR1vdwFlbWOub6l3-162uGSHcOvWergY/s1600/tetris+02.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
High scores will show you ... high scores, unless you haven't made a score yet!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThdtVNJaYaBDOFmT0NGQBJWIjw9IXrT85nMhk7cUub5CfIOXNSi8ByRxHZ498FYuhBADZDpc8fHUvqXYjY4u1a4mIFn4bI8BgKk4XzM5HSF7VvpJyAFtWml_HgD_VjfqhrpWDRePg0Wo/s1600/tetris+03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThdtVNJaYaBDOFmT0NGQBJWIjw9IXrT85nMhk7cUub5CfIOXNSi8ByRxHZ498FYuhBADZDpc8fHUvqXYjY4u1a4mIFn4bI8BgKk4XzM5HSF7VvpJyAFtWml_HgD_VjfqhrpWDRePg0Wo/s1600/tetris+03.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And here's the main screen with two pieces.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqyhUq5-K6BsrS6yjXJiv6JfgUMU7e_vdxAeWh07yWP5BpO2Stdi-052T_auNTiBUmvw0wyvc2ynwvFrkxcxspTpaPfL4eYpYBVDyeDWNElZ-pwaRoSPZUcFc4WGcZoQNgtAC_7qg_vvU/s1600/tetris+04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqyhUq5-K6BsrS6yjXJiv6JfgUMU7e_vdxAeWh07yWP5BpO2Stdi-052T_auNTiBUmvw0wyvc2ynwvFrkxcxspTpaPfL4eYpYBVDyeDWNElZ-pwaRoSPZUcFc4WGcZoQNgtAC_7qg_vvU/s1600/tetris+04.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The red piece has landed and the black piece is falling towards the red piece. You'll need to hit one of the arrow keys to make it fall to either side. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The button in the middle makes the shape change. It's still the same color but a different arrangement of the four pieces.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
There's a helpful gray image that shows where the pieces will land. If you look carefully, you'll see the shadow of the black piece and where it will touch the red piece. One of the things that makes this game really challenging is that the pieces get smaller as they get closer to the center. That makes it very tough to estimate, but you must estimate quickly and move fast.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
At the top left you can pause the game and the top right shows your score.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But beware, if your stack of pieces gets too high, the game will be over!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8y3OY4rl7dWWk_MDIlAiH-1_sw6B_9zH-s4z-BAltom7zh6r4Ruin88V7F9TMU2lbB_GAfWwCy2PBDIQ1NV1EPFzIA_uQLHvggbwHw-sRyKlAAlrcEYQzubOobSo9bE0ZFXZ6OpSeagY/s1600/tetris+06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8y3OY4rl7dWWk_MDIlAiH-1_sw6B_9zH-s4z-BAltom7zh6r4Ruin88V7F9TMU2lbB_GAfWwCy2PBDIQ1NV1EPFzIA_uQLHvggbwHw-sRyKlAAlrcEYQzubOobSo9bE0ZFXZ6OpSeagY/s1600/tetris+06.png" height="400" width="266" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
All in all, this is a very cool game. The rules are easy to figure out, but the play is difficult and you will want to go back to see if you can do better. This is a high speed game and requires fast thinking!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Normally I would deduct points for not having any help, but I was reading a cool new book that just came out called <i>A Game Design Vocabulary: Exploring the Foundational Principles Behind Good Game Design</i> by Anna Anthropy and Naomi Clark and the authors make a case that sometimes it is better to avoid too many rules and make the game clear. They use as an example Super Mario Bros and how the original didn't tell you what to do, but the Wii version has a big arrow telling you to move to the right, even though you can't go to the left. More about that book later, because so far it seems like a breath of fresh air for game design books (and I've read most of them). </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Anyway, you can figure it out pretty fast by experimenting, but getting points is not easy. It doesn't have any music either or sound effects, but that's okay also. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I'm very forgiving of a game like this when they do one additional thing. You can see the source code for this game! Just go to <a href="https://github.com/guiherzog/circle-tetris">https://github.com/guiherzog/circle-tetris</a> and it's all there, even the manifest! Sharing is good!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And best of all, it runs very fast on my tiny ZTE Open and the screen shots are courtesy of App Manager. What could be better? I recommend this game as good mental exercise for those with quick minds and fast fingers.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Arcade<br />
Score: 5 (out of 5)<br />
Tested on: ZTE Open<br />
Get it at: Firefox Marketplace <br />
<a href="https://marketplace.firefox.com/app/circle-tetris">https://marketplace.firefox.com/app/circle-tetris</a><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-57361373987621653992014-03-20T18:46:00.000-07:002014-03-21T10:34:48.809-07:00Son of CSS Shell (Game Programming)As I get further into programming for Firefox OS, I find that I want to go back to basics from time to time. One of my favorite things is to create a shell that can be used to build games on top of. A simple run of code that has all the basics in place. Taking what I've learned, I've created a new shell for you to use for CSS games. When I say CSS games, I am thinking of what some people call CSS sprites. Essentially you move images around on the screen by taking advantage of basic properties of HTML5, CSS, and JavaScript. Not CSS3, mind you, which has become a huge ball of stuff that looks cool but doesn't hang together quite yet.<br />
<br />
So here is what I recommend for starting out with CSS sprites. You can read more about those at these earlier posts:<br />
<br />
Bouncing a Ball in CSS<br />
<a href="http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-in-css-game-programming.html">http://firefoxosgaming.blogspot.com/2013/10/bouncing-ball-in-css-game-programming.html</a><br />
<br />
Earlier CSS Shell<br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/css-shell-game-programming.html">http://firefoxosgaming.blogspot.com/2013/11/css-shell-game-programming.html</a><br />
<br />
CSS Collision Detection<br />
<a href="http://firefoxosgaming.blogspot.com/2013/11/css-detecting-collisions-game.html">http://firefoxosgaming.blogspot.com/2013/11/css-detecting-collisions-game.html</a><br />
<br />
The shell has a simple bouncing ball, which is easy to see how it works, but just as easy to remove the bouncing ball part and add your own type of game.<br />
<h2>
Screen Shots</h2>
So, here's what this shell looks like, running on the ZTE Open.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5i_3sSBw-Ny45NM6gdj353-BNZvgttAGa_OpS8o0ZPtt3awpRmd6jcw632kljxWTLWU1xhhz_kq9o3M6TLA3TPbT7ViUU8iZUCZsfDhxlmXYrGEm6byBq5YUPlRDHxinQ49qoVt_1WM/s1600/ZTE+Open+New+CSS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5i_3sSBw-Ny45NM6gdj353-BNZvgttAGa_OpS8o0ZPtt3awpRmd6jcw632kljxWTLWU1xhhz_kq9o3M6TLA3TPbT7ViUU8iZUCZsfDhxlmXYrGEm6byBq5YUPlRDHxinQ49qoVt_1WM/s1600/ZTE+Open+New+CSS.png" /></a></div>
<br />
Next, here is the same game running in the App Manager simulator.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LltJQvuKPNcdcyIRGVous0yarGwaVerpqrT1vW0EWitXZv9gUsgF4Gvbxai7UZfY9GsFkjm9FcPVt0nY2PhacH_X1dThhJt7tbq27dFzlpSO9OteS2J9W37ckGGk7jmQKdB1UFLHRio/s1600/son+of+css+shell.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LltJQvuKPNcdcyIRGVous0yarGwaVerpqrT1vW0EWitXZv9gUsgF4Gvbxai7UZfY9GsFkjm9FcPVt0nY2PhacH_X1dThhJt7tbq27dFzlpSO9OteS2J9W37ckGGk7jmQKdB1UFLHRio/s1600/son+of+css+shell.png" /></a></div>
<br />
And, finally, here's what it looks like in the nightly Firefox desktop browser with the debugger open and resized to a smaller-than-normal size.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-5Zd2gTvS7FjkgpO_f9fDQyUgiRk9rflVRhLl4yM3m_QvJ0q0GkpqSQEdEDwSSk2I691f2uqExbeV-8jNWIkG6TBX4-9Om3VBQFbB3RFHOUTIRLWwGQCEFFQSsN5fZAnR5QqNdJmwewc/s1600/new+css+shell.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-5Zd2gTvS7FjkgpO_f9fDQyUgiRk9rflVRhLl4yM3m_QvJ0q0GkpqSQEdEDwSSk2I691f2uqExbeV-8jNWIkG6TBX4-9Om3VBQFbB3RFHOUTIRLWwGQCEFFQSsN5fZAnR5QqNdJmwewc/s1600/new+css+shell.PNG" height="400" width="318" /></a></div>
<br />
The last is pretty useful if you want to instantly simulate different screen sizes and look at the debugging information. The screen is only 343x237, but the ball bounces just fine against the four edges but doesn't enter the debugger space.<br />
<h2>
The Code</h2>
Here is the code:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"><!DOCTYPE HTML><br /><html><br /><head><br /> <meta charset="UTF-8"><br /> <title><br /> New CSS Shell<br /> </title><br /><br /> <style><br /> <br /> #ball<br /> {<br /> width: 20px;<br /> height: 20px;<br /> position: absolute;<br /> top: 200px;<br /> left: 100px;<br /> background-image: url(ball.png);<br /> }<br /><br /> </style><br /><br /> <div id="ball"></div> <br /><br /> <script><br /><br /> // Global variables <br /> var boardWidth = window.innerWidth;<br /> var boardHeight = window.innerHeight; <br /> var ballHor = boardWidth / 2;<br /> var ballVer = boardHeight /2; <br /> var changeHor = 10;<br /> var changeVer = 10;<br /> <br /> // Log initial board height & width.<br /> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);<br /> <br /> // requestAnimationFrame variations<br /> var requestAnimationFrame =<br /> window.requestAnimationFrame ||<br /> window.mozRequestAnimationFrame ||<br /> window.webkitRequestAnimationFrame ||<br /> window.msRequestAnimationFrame; <br /> <br /> document.documentElement.<br /> style.overflow = 'hidden';<br /> <br /> // Load event listener<br /> window.addEventListener("load", <br /> getLoaded, false);<br /> <br /> // Resize event listener<br /> window.addEventListener("resize", <br /> resizeMe, false);<br /><br /> // Get ball information.<br /> var myBall = <br /> document.querySelector("#ball");<br /> <br /> // Function called on page load.<br /> function getLoaded() { <br /> <br /> // Lock screen orientation to portrait.<br /> // Uses "moz" prefix.<br /> window.screen.<br /> mozLockOrientation("portrait"); <br /> console.log("Locked to portrait");<br /> <br /> // Background color<br /> document.body.style.<br /> backgroundColor = "Peru";<br /> <br /> // Start game loop.<br /> gameLoop(); <br /> <br /> // Page loaded message<br /> console.log("The page is loaded.");<br /> <br /><br /> }<br /> <br /> // Game loop<br /> function gameLoop() {<br /> <br /> // Repeat game loop infinitely.<br /> requestAnimationFrame(gameLoop);<br /> <br /> // Move the ball once.<br /> ballMove(); <br /> }<br /> <br /><br /> // Calculate and move the ball. <br /> function ballMove() {<br /> <br /> // Changes are calculated but do not<br /> // take effect until next time. <br /> myBall.style.left = ballHor + "px";<br /> myBall.style.top = ballVer + "px";<br /> <br /> // Calculate new vertical component.<br /> ballVer = ballVer + changeVer;<br /><br /> // Top hit, reverse direction.<br /> if (ballVer + changeVer < -10)<br /> changeVer = -changeVer;<br /> <br /> // Bottom hit, reverse direction.<br /> if (ballVer + changeVer ><br /> boardHeight - 10)<br /> changeVer = -changeVer;<br /><br /> // Calculate new horizontal component.<br /> ballHor = ballHor + changeHor;<br /><br /> // Left edge hit, reverse direction.<br /> if (ballHor + changeHor < -10)<br /> changeHor = -changeHor;<br /> <br /> // Right edge hit, reverse direction.<br /> if (ballHor + changeHor ><br /> boardWidth - 10)<br /> changeHor = -changeHor;<br /> }<br /><br /> // Testing in desktop browser only.<br /> // Changes board size to match new.<br /> function resizeMe() {<br /> <br /> //Change board size.<br /> boardWidth = window.innerWidth;<br /> boardHeight = window.innerHeight; <br /> <br /> // Log initial board height & width.<br /> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);<br /> }<br /> <br /> </script><br /></head><br /><br /><body><br /> <footer><br /> <small><br /> Copyright &copy; 2014 Bob Thulfram<br /> </small><br /> </footer><br /></body><br /></html></span></b><br />
<br />
<h2>
What I Have Added</h2>
After thinking about it over the past few weeks, here are a few things I've added:<br />
<ol>
<li>Screen Orientation. The game plays best in portrait mode.</li>
<li>Responsive Design. The game should play on any size phone or tablet.</li>
<li>More Responsive Design. I wanted to test how this looks in browsers on desktops. </li>
<li>I wanted to add a copyright notice in the code.</li>
<li>I felt like a background color helps the screen shot stand out in a blog post. </li>
</ol>
<h2>
Screen Orientation</h2>
I've written about Screen Orientation for Firefox OS at <a href="http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html">http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html</a>. And it works! Of course, you need to test this on a real phone. When I tilt the phone with my code, the screen doesn't tilt, it stays oriented in portrait.<br />
<br />
However, this doesn't seem to work on the App Manager simulator. There's a little button next to the home button at the bottom that looks like two folders overlapping. Click on that and the screen turns sideways. But it shouldn't! This might be a bug or it might be that this isn't supported yet in the simulator. But it works fine on a phone!<br />
<br />
Here's the code:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> window.screen.<br /> mozLockOrientation("portrait"); <br /> console.log("Locked to portrait");</span></b><br />
<br />
Note that this needs the "moz" prefix for now.<br />
<h2>
Responsive Design</h2>
One thing that I've noticed on a lot of the games I've reviewed is that they don't look the same on different phones. The ZTE Open and the Geeksphone Peak have different sizes! But you want to design your game so it works on any size phone, tablet, or whatever. Maybe not watches, though.<br />
<br />
So what I'm doing with this code is to get the actual screen size and make that the size of my game board. I wrote about this in an early topics called How Big A I? at <a href="http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html">http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html</a>.<br />
<br />
And here is how I implement it. These lines set up the game board to match the actual screen. Instead of a fixed value, I created board size by seeing what the actual screen size is. This is in the global variable section.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> var boardWidth = window.innerWidth;<br /> var boardHeight = window.innerHeight; </span></b><br />
<br />
I also added this to make sure what actually happens:<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);</span></b><br />
<br />
It's always a good idea to track what is happening, especially when testing different sized phones.<br />
<h2>
Really Responsive Design</h2>
I often run my code first in the latest Firefox nightly browser. I recommend this, even though you need to be careful because not everything in the desktop browser is in Firefox OS! But it makes the easy development cycle even easier and you can save the phone-specific parts for testing on an actual phone (like Screen Orientation).<br />
<br />
I thought it would be fun to resize the browser so I can just drag it to see it small or large. And it is also easy to see the debugged output on a desktop browser.<br />
<br />
So I added this code to handle the event of the browser being resized.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> // Resize event listener<br /> window.addEventListener("resize", <br /> resizeMe, false);</span></b><br />
<br />
This will call the function <b>resizeMe</b> every time the browser is resized. I also added this code to prevent the scroll bars from trying to display when the ball bounces into the edge.<br />
<br />
<span style="font-family: "Courier New",Courier,monospace;"><b> document.documentElement.<br /> style.overflow = 'hidden';</b></span><br />
<br />
And here's the function that is called when the window is resized.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> function resizeMe() {<br /> <br /> //Change board size.<br /> boardWidth = window.innerWidth;<br /> boardHeight = window.innerHeight; <br /> <br /> // Log initial board height & width.<br /> console.log("Board width = " <br /> + boardWidth);<br /> console.log("Board height = "<br /> + boardHeight);<br /> }</span></b><br />
<br />
This is the same code as was used in the global variables, but you need to call it again when the window is resized. And I like outputting the new width and height of the board so I can see what is going on. The third screen shot above shows this working beautifully.<br />
<h2>
Copyright</h2>
Not everyone cares, but I care about copyright. I'm happy to have you use my code in your own games, but I'd like to keep control over how it is published and where it appears. This doesn't have a standard yet, but a growing convention is to use the HTML5 tag <b>small </b>inside a <b>footer </b>tag. So I've added this to the code at the very end, the only thing that is in the actual body of the code.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> <footer><br /> <small><br /> Copyright &copy; 2014 Bob Thulfram<br /> </small><br /> </footer></span></b><br />
<br />
The <b>&copy;</b> will produce a copyright symbol (c).<br />
<h2>
Background Color</h2>
I've used this before here and there, so here it is again.<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"> document.body.style.<br /> backgroundColor = "Peru";</span></b><br />
<br />
I picked the color <b>Peru </b>for no particular reason except that's a nice country! Get your color names at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">https://developer.mozilla.org/en-US/docs/Web/CSS/color_value</a>. When I did this, I realized that my bouncing ball PNG image had a white background, which didn't look good, so I had to redraw it by filling in all the white bits with Peru color. Which the MDN page will happily tell you is <b>rgb(205, 133, 63)</b>. What this means is that the red, green, and blue percents are those three numbers. I plugged those numbers into Paint Shop Pro and the PNG now looks like this, in all its pixel-y greatness.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW33YSjU_yHWT-Qyo5fYCSwU2mGhTQrCfXdGUQFkRNFRDOF8Oy1_w3JZiFAZn-p1tFatgPv_u4PV2mQJXfw9j7Ou8fupYXEh4otXileX5hLkkaCjV_TRtOaQVfs7hv7tVqtSg4oCuRx0k/s1600/ball.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW33YSjU_yHWT-Qyo5fYCSwU2mGhTQrCfXdGUQFkRNFRDOF8Oy1_w3JZiFAZn-p1tFatgPv_u4PV2mQJXfw9j7Ou8fupYXEh4otXileX5hLkkaCjV_TRtOaQVfs7hv7tVqtSg4oCuRx0k/s1600/ball.png" height="198" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqOjj9NQcnPcKnFBy6fZ9Td-Mybi6TncLbV16ZJiJswXy-cZ5eZqVc6h4U3uOufsseJaPDPaaMG9D6DsudfjW3JBhkEx0Kv4JitZ-sDOwcUtBNoHw474eXyP2mzhnsC-sTl5SYzez02Oc/s1600/ball.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<h2>
Wrapping Up</h2>
So this is the shell I will be using to create new CSS game bits and I recommend you use the parts you want. I'll do the same for Canvas and CSS but I might do some cool CSS stuff sooner, and there's games to review, and, and, and!<br />
<br />
<b><span style="font-family: "Courier New",Courier,monospace;"><span style="background-color: white; display: inline ! important; float: none; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><br /></span></span></b>
<br />
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-62795471937169801962014-03-19T17:19:00.000-07:002014-03-19T17:19:48.277-07:00Tower Jelly (Game Review)Well, I've been busy putting together my book, but now I'm back to new stuff and today will be a review of Tower Jelly from TweenSoft.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBo7W1SZhL_erbUVQ_blfn-sPoeMFN3ux5fduETVPYQLyLJwqxq-ZdZyq6RO5Eczn3vWNICvSuRawrQyn25ykP0ZhKCl0FkIqG8dGzehBtex8WJzEfJSrK2oFzmOKk7DPc09AUmP7OUY/s1600/2014-03-19-15-01-36.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBo7W1SZhL_erbUVQ_blfn-sPoeMFN3ux5fduETVPYQLyLJwqxq-ZdZyq6RO5Eczn3vWNICvSuRawrQyn25ykP0ZhKCl0FkIqG8dGzehBtex8WJzEfJSrK2oFzmOKk7DPc09AUmP7OUY/s1600/2014-03-19-15-01-36.png" height="400" width="225" /></a></div>
<br />
Actually maybe the title is Tower Jelly Blocks, or at least that's what the About page says:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoy3WYvsAlqU3IZq1BbBHAUvMrwCCCQ2h29GkWlXpurmADMEdBKk8MYyQJp_o5o_XgGa6BGPo0GZGJp9Y65UGf6dA3ap6IbT0djXvjZDBHdZTQ_ovMj19cCloSrYXONXrcAX1WX4BHLY/s1600/2014-03-19-15-01-53.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoy3WYvsAlqU3IZq1BbBHAUvMrwCCCQ2h29GkWlXpurmADMEdBKk8MYyQJp_o5o_XgGa6BGPo0GZGJp9Y65UGf6dA3ap6IbT0djXvjZDBHdZTQ_ovMj19cCloSrYXONXrcAX1WX4BHLY/s1600/2014-03-19-15-01-53.png" height="400" width="225" /></a></div>
<br />
You be the judge! Anyway, this is a cool, casual game that is perfect for waiting in line. It won't strain your brain, but you'll have to be alert and tap the screen at just the right time to keep playing.<br />
<br />
The basic play is pretty simple. And TweenSoft makes it easy to figure out. They have a Help screen that tells you what to do.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDYe8-G87-a69HLwY_73iMGnP7CUHl1gi59drwZzjPGLP3eDOFNeDeeu6a-CxTJT6mHkmyuA5mUZB2lwHO3JPSf_kpjjguIin3Blwu-eX6B6XSbw8hHvJVwu3eL4SuTXSNZz7Gd9BGVI/s1600/2014-03-19-15-02-02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDYe8-G87-a69HLwY_73iMGnP7CUHl1gi59drwZzjPGLP3eDOFNeDeeu6a-CxTJT6mHkmyuA5mUZB2lwHO3JPSf_kpjjguIin3Blwu-eX6B6XSbw8hHvJVwu3eL4SuTXSNZz7Gd9BGVI/s1600/2014-03-19-15-02-02.png" height="400" width="225" /></a></div>
<br />
Essentially you have a jelly cube swinging from a rope back and forth, and when you tap, it drops. The first cube lands and you must make the next cube land on top of the first. You get extra points if the second cube lands on top of the first. But if you miss the first cube entirely (or enough so you fall off), you lose a life. Three lives lost and the game is over!<br />
<br />
And just in case, when you tap Start Game, you'll get some help again!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVD9WK7dRHkv0jDC5tAhfPnGGHJNRPT3rO6yLKlvmATy6AqPxaTwNI7nJW-Esy6dQ494EJbHIhNUJZfJWNK239wCmBpH3dZjztvJ5ERl58hFlVDhVpKTVYNSe5F5qF1TnRtNUtAKPid2I/s1600/2014-03-19-15-02-39.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVD9WK7dRHkv0jDC5tAhfPnGGHJNRPT3rO6yLKlvmATy6AqPxaTwNI7nJW-Esy6dQ494EJbHIhNUJZfJWNK239wCmBpH3dZjztvJ5ERl58hFlVDhVpKTVYNSe5F5qF1TnRtNUtAKPid2I/s1600/2014-03-19-15-02-39.png" height="400" width="225" /></a></div>
<br />
The only difference from the Help screen that you get to by tapping Help on the Home screen is that you can tap on Next to continue on to the game itself. Here's the start of the game. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UKLB3_qvb9GcLzQa0wIi1Id68RsHE4juk9k-d2PkDdExjAMHZSZxYRQfDSN9QV4gCIhFUHfDvuVSHlqoo4is90Ddxid5GmqCubmdKeCpBf7UEeAw2jjFpyhoL3zSZdp_9X8piRfrwDc/s1600/2014-03-19-15-03-02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UKLB3_qvb9GcLzQa0wIi1Id68RsHE4juk9k-d2PkDdExjAMHZSZxYRQfDSN9QV4gCIhFUHfDvuVSHlqoo4is90Ddxid5GmqCubmdKeCpBf7UEeAw2jjFpyhoL3zSZdp_9X8piRfrwDc/s1600/2014-03-19-15-03-02.png" height="400" width="225" /></a></div>
<br />
The little X in the lower right corner will let you quit any time. If you tap it, you get this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIdV1dG-gy4meeCmfNngwfdxhy5AW-0tNxXygKlQGNPGOsBVN7hwa110I11ZLO5hJETb1_RIfRTHBmIWqsm5OYBz4vjVslBYnUwZmK6DszmZ7xW2pHl1ULrAvp0FaRoKPz-b7kLxbJfc/s1600/2014-03-19-15-03-43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIdV1dG-gy4meeCmfNngwfdxhy5AW-0tNxXygKlQGNPGOsBVN7hwa110I11ZLO5hJETb1_RIfRTHBmIWqsm5OYBz4vjVslBYnUwZmK6DszmZ7xW2pHl1ULrAvp0FaRoKPz-b7kLxbJfc/s1600/2014-03-19-15-03-43.png" height="400" width="225" /></a></div>
<br />
Which takes you back to the beginning screen or back to the game you are playing. But you don't want to do that, you want to play! As you drop cubes of jelly, they start piling up and the screen view moves up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilqM-lRjNPb30AQMyWLQrTfihOKfFNUQg4UAnP1FFBho8pET3teTHcINiZjWa4DESDCN8_APkJYT89-TRxRa9fhI-zlf9j9hyLa5mYSPmZgdKH_zxsZuQJHDZZTk0L14IPr2bkKjcsXY/s1600/2014-03-19-15-03-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilqM-lRjNPb30AQMyWLQrTfihOKfFNUQg4UAnP1FFBho8pET3teTHcINiZjWa4DESDCN8_APkJYT89-TRxRa9fhI-zlf9j9hyLa5mYSPmZgdKH_zxsZuQJHDZZTk0L14IPr2bkKjcsXY/s1600/2014-03-19-15-03-29.png" height="400" width="225" /></a></div>
<br />
Here's a shot of a cube about to land on another cube. The score at the top right is 100, for dropping one cube. On the top right is the number of lives, represented by three linked hearts. At the lower left is a representation of the current stack. There's one on the stack!<br />
<br />
After a few more plays:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFlOWjfWaN4Yua321qyk-8xnSybQNlCB7tlN7u1L-aLrydRcUuknA5X4ExsmDcYp15iHhqWFr7yBSJpgqmPr3xkYopbymf82R2Zz42Oi1f6WWYBmbLuNqF44J3qr3KeZF9b2TBdNPmKCY/s1600/2014-03-19-15-13-58.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFlOWjfWaN4Yua321qyk-8xnSybQNlCB7tlN7u1L-aLrydRcUuknA5X4ExsmDcYp15iHhqWFr7yBSJpgqmPr3xkYopbymf82R2Zz42Oi1f6WWYBmbLuNqF44J3qr3KeZF9b2TBdNPmKCY/s1600/2014-03-19-15-13-58.png" height="400" width="225" /></a></div>
<br />
There are 8 jelly cubes in the tower stack and I've lost two lives. The higher you go, you see stars and also moving clouds. But when you miss a drop for the third time, you see this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHk03MgmakqkXINKt6j6jN_Qg3RjHaUr24x_r6yBR8XZl1YWg6zNJSTIiKYCKZQOkhd1QkbL2A2Tdqpmfubj4OFnTD_td8NE3CpMhJ3ukjhqFzFk8SIZ3uIqlqSCCQVRSafJXvY1Vj0ik/s1600/2014-03-19-15-10-14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHk03MgmakqkXINKt6j6jN_Qg3RjHaUr24x_r6yBR8XZl1YWg6zNJSTIiKYCKZQOkhd1QkbL2A2Tdqpmfubj4OFnTD_td8NE3CpMhJ3ukjhqFzFk8SIZ3uIqlqSCCQVRSafJXvY1Vj0ik/s1600/2014-03-19-15-10-14.png" height="400" width="225" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can see the current high scores (and I'm not one of them).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhwpDeNZwuft22JGwyOagKxMOhewKiq-lTX494UpzJJFTdoXBKnZVVAgwlIJ5peeXoKgAnp6nUarBfbP1IOdtEm4dITtTUUARIIEJRk0OXOcVklQ0axTZe_yAXS190Um5ik78yc23Z-Y/s1600/2014-03-19-15-10-36.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhwpDeNZwuft22JGwyOagKxMOhewKiq-lTX494UpzJJFTdoXBKnZVVAgwlIJ5peeXoKgAnp6nUarBfbP1IOdtEm4dITtTUUARIIEJRk0OXOcVklQ0axTZe_yAXS190Um5ik78yc23Z-Y/s1600/2014-03-19-15-10-36.png" height="400" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
All in all, a nice little game for taking up a few minutes while you are waiting in line or otherwise bored. Which is a good thing for phone games!<br />
<br />
But there are two things that knock off points a little.<br />
<br />
<h2>
Screen Size</h2>
The game doesn't fit on the Geeksphone Peak screen. You'll notice a large black area at the bottom.<br />
<br />
When I loaded it on to my ZTE Open (both phones running FxOS version 1.2), the screen looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXzONBhfj3DiwQfkVAornzZAX9HpX0dHyWNBavzyzusfWpPEO2nzGZThRLjyRId_7-9xbvAta2vWDj2aeJfIVtP6d9_wU4SmZ2AxNknSr1HzW_BqHqwSCLucgJ-ZKT0PHL-PWFHzOJXo/s1600/zte.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXzONBhfj3DiwQfkVAornzZAX9HpX0dHyWNBavzyzusfWpPEO2nzGZThRLjyRId_7-9xbvAta2vWDj2aeJfIVtP6d9_wU4SmZ2AxNknSr1HzW_BqHqwSCLucgJ-ZKT0PHL-PWFHzOJXo/s1600/zte.png" height="400" width="266" /></a></div>
<br />
The screen now fits the phone! And two things that interest me. The bottom of the screen has a little bit of landscape that adds a touch of interest. And I like that little Firefox logo at the bottom that doesn't show up on the Peak. More work needs to be done by TweenSoft to adapt to different size screens. Not easy, and I'll be doing some research and a few posts soon on this subject of screen size.<br />
<h2>
Audio</h2>
There is none. No sound effects, no music. While not required, sound effects add to the fun and a little bit of music is cool. And no one has any excuse to leave out sound effects or music because they can read my post on <i>Adding Music to Your Game</i> at <a href="http://firefoxosgaming.blogspot.com/2013/12/adding-music-to-your-game-game.html">http://firefoxosgaming.blogspot.com/2013/12/adding-music-to-your-game-game.html</a>.<br />
<h2>
Kudos</h2>
When I went to download Tower Jelly onto my ZTE Open, I noticed two apps in the Featured Apps section at the top. The first was RingTone Picker.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8gT-LIvCwRNtRNBQz6GaA60fdIrPnGgq3xWhYjNdxbG8MAUN4l12S0sRp0AtYVHwCv7fVUZGw_rIgXCdCpvYMgbL5O5CjJcJsItiqZQ2LXQr2ovkM_2dI8BT7GgVTIp-Q9xSkOMbKMA/s1600/Ring+Tone+Picker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8gT-LIvCwRNtRNBQz6GaA60fdIrPnGgq3xWhYjNdxbG8MAUN4l12S0sRp0AtYVHwCv7fVUZGw_rIgXCdCpvYMgbL5O5CjJcJsItiqZQ2LXQr2ovkM_2dI8BT7GgVTIp-Q9xSkOMbKMA/s1600/Ring+Tone+Picker.png" height="400" width="266" /></a></div>
<br />
I follow @Mte90Net on Twitter and I suggest you do also! It is really cool to be at the top position!<br />
<br />
Also I was pleased to see esviji in the #2 spot for all apps! This is a really cool SVG game from Nicolas Hoizey which I reviewed at <a href="http://firefoxosgaming.blogspot.com/2014/01/esviji-game-review.html">http://firefoxosgaming.blogspot.com/2014/01/esviji-game-review.html</a>. Way to go! <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWe2SQzg8qJAN0B54op-CzniUWvnpP5QrGxVMlhYbGkosBd2C-ymWuctYLs9Ii-rFz0e8_-sxKji7-FYqsx-s40AmE-dKJlO1AXlZJFqlrX3r4gjhCVuKprKK9vAJ0Xf5E94xjbI1Ftw/s1600/esviji.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWe2SQzg8qJAN0B54op-CzniUWvnpP5QrGxVMlhYbGkosBd2C-ymWuctYLs9Ii-rFz0e8_-sxKji7-FYqsx-s40AmE-dKJlO1AXlZJFqlrX3r4gjhCVuKprKK9vAJ0Xf5E94xjbI1Ftw/s1600/esviji.png" height="400" width="266" /></a></div>
<br />
<h2>
Score</h2>
<div class="separator" style="clear: both; text-align: left;">
Cost: Free</div>
Genre: Casual<br />
Score: 4 (out of 5)<br />
Tested on: Geeksphone Peak and ZTE Open<br />
Get it at: Firefox Marketplace <a href="https://marketplace.firefox.com/app/esviji">https://marketplace.firefox.com/app/tower-jelly</a>
Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-31882481640630833892014-03-14T11:50:00.003-07:002014-03-14T11:50:42.243-07:00My Book is on Amazon! (Game Programming)After spending several weeks pulling together relevant blog posts, I decided to take the plunge and publish a book about Firefox OS game programming on Amazon.<br />
<br />
You can get the book here: <a href="http://www.amazon.com/dp/B00IZUYIGO">http://www.amazon.com/dp/B00IZUYIGO</a>.<br />
<br />
The title is:<br />
<br />
<h2 style="text-align: center;">
Beginning Firefox OS HTML5 Game Programming</h2>
This is an Amazon Kindle book, which means it is an eBook you read on your computer, phone, tablet, or whatever. You can read it on a hardware Kindle tablet or with software available for Windows, Mac, Android, iPhone, iPad, and just about anything else (except Firefox OS and Linux).<br />
<br />
I debated about what kind of cover to use. I'm not an artist at all (you may have noticed that all my art is clip art or circles or squares) and I wasn't sure what to do, but fortunately Amazon has thought of that and now provides a cover-making app as part of the submission process. You pick an image, color scheme, layout, type, and punch the button. This is what came out:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSv9_jifbEDjellpnhM-Kh2kfYz7WbTv57CFS1hMU43gIq4IQ47U2qzZrbQHVAOT2iMH4PBwreimp2z-rAGGGoHTu5dcFvjUp7Qk_rDHwcOTkfK4zG-roi0RWMbSpHqimJU2pJalJt10/s1600/FxOS+Cover.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSv9_jifbEDjellpnhM-Kh2kfYz7WbTv57CFS1hMU43gIq4IQ47U2qzZrbQHVAOT2iMH4PBwreimp2z-rAGGGoHTu5dcFvjUp7Qk_rDHwcOTkfK4zG-roi0RWMbSpHqimJU2pJalJt10/s1600/FxOS+Cover.jpg" /></a></div>
<br />
Well, it doesn't say Look Inside or kindle edition, that's just how they display covers. I'm sure anyone could do better, but it does convey the message of title, author, and that the book is for people who like to type a lot.<br />
<br />
One of the things I like about Amazon is that they let you take a peek at the book. So if you click on it, you can see the table of contents and the first few chapters, all the way to part of the first chapter on Canvas!<br />
<br />
You can even see the names of the people I thanked for help on this book:<br />
<br />
Panagiotis Astithas<br />
Dietrich Ayala<br />
Richard Blechinger<br />
@Boot2Gecko<br />
M. Edward (Ed) Borasky<br />
Monique Brunel<br />
Asa Dotzler<br />
@eliazerk<br />
Robert Helmer<br />
Nicolas Hoizey<br />
Andre Jaenisch<br />
Christer Kaitila<br />
Ben Kelly<br />
Andrzej Mazur<br />
Vivien Nicolas<br />
@nyrrrr<br />
Ivano Palmentieri<br />
Planet Firefox OS<br />
Marek Raida<br />
Eric Shepherd<br />
Joshua Smith<br />
Gabriele Svelto<br />
Gabriele Vidali<br />
<br />
One of the wonderful things about the Firefox OS community is how helpful people really are and I definitely appreciate any and all feedback for what I do. Sometimes the help is telling me I made a mistake or need to know that Local Storage isn't recommended or just for inspiring me in some way. Again, thank you for helping me to produce a book!<br />
<br />
When I uploaded the book to Amazon, I was surprised when it said the book was 402 pages (estimated). I knew that the word count was 49,000 words, which would usually be a 400 page book of straight text, but my book has a LOT of pictures and screenshots. So maybe pictures are 1000 words.<br />
<br />
<h2>
What's Next?</h2>
In terms of the book, I'm going to fix a few formatting errors (more about that in a minute) and then submit it to the new Amazon CreateSpace service that lets you create print-on-demand paper books that can be sold through Amazon. You can read about it here: <a href="https://www.createspace.com/">https://www.createspace.com/</a>. While I like eBooks for programming (so I can flip back and forth when I'm coding but keep my hands on the keyboard), there is something nice about a paperback. Who knows, maybe a book publisher would like to publish it.<br />
<br />
I'm also thinking about putting it on Nook. I like Barnes & Noble and there might be some people there who are interested in Firefox OS.<br />
<br />
I investigated some of the other eBook publishing services and here is what I am seeing:<br />
<br />
<h4>
Google Play</h4>
I couldn't get a lot of details without signing up, but the word on the street is that they don't have a lot of people looking for books and they might take a bigger cut. I'll pass for now.<br />
<h4>
Apple iTunes</h4>
While it might be amusing to publish on Apple when my motto is "Stay tuned, but not iTuned" I don't like that you must use a Mac to publish with them. I have a Mac Mini but it's packed away. You also have to use their special formatting tool, so more work for me.<br />
<h4>
Leanpub</h4>
A few people suggested them and I investigated and was drawn up short. To publish with them, you must use Markdown. I really don't want to spend weeks reformatting my manuscript for them. They look interesting and they publish a lot of works in progress. This might be a good place to buy. Check them out at <a href="https://leanpub.com/">https://leanpub.com/</a><br />
<br />
There are other markets, and if you know of something great, let me know. I'm interested in finding people who are interested in Firefox OS. Part of the magic of FxOS (the official acronym) is that it is aimed at people who may not have programmed before and is reaching out to a new world-wide audience.<br />
<br />
Speaking of which, my book is available (in English) in these countries through Amazon:<br />
<br />
Andorra<br />
Australia<br />
Austria<br />
Belgium<br />
Brazil <br />
Canada<br />
France<br />
Great Britain<br />
Guernsey<br />
Germany<br />
India <br />
Italy<br />
Isle of Man<br />
Japan <br />
Jersey<br />
Lichtenstein<br />
Luxembourg<br />
Monaco<br />
Mexico <br />
New Zealand<br />
San Marino<br />
Switzerland<br />
Spain<br />
United Kingdom<br />
United States<br />
Vatican City<br />
<h2>
How I Did It</h2>
Well, I just wrote a blog and pulled together some of the posts. I never intended to make a book, but as the blog grew and the content was driving to include all the things you need to make a game for Firefox OS, I felt like maybe I could do a book. I wasn't sure it would work and the formatting issues sounded like a big hassle.<br />
<br />
Part of the problem is that Amazon Kindle has changed what they require over the years and so there's a lot of misinformation. Also, because this blog is in Google Blogger which has its own formatting issues, I just wasn't sure how to proceed.<br />
<br />
Here is what I did and I'm pretty happy with the results. In fact, I feared worse!<br />
<br />
<h3>
Step 1 - LibreOffice </h3>
The first step was to read up a lot. Some said to convert your book to HTML others said to use Microsoft Word. Well I obviously know HTML, but I didn't want to spend hours formatting that. Microsoft Word I know how to use but don't like it. Then I decided to give LibreOffice a try and I loved it. LibreOffice (a fork of OpenOffice) is at version 4.2 right now and it is really fast and efficient and is actually a lot easier to use than Word. The problem with Word is that they have a lot of legacy to support so they can't really make sweeping changes. Furthermore, each version of Word is really different but because they want money, I can't afford to upgrade every copy on every machine. On my various machines I have Office 2003, 2010, 2013, and Office365. But I also can put LibreOffice 4.2 on every machine and upgrade them all if there is a major change. LibreOffice will save to a .DOC format that is compatible with several versions of Office. That seemed like a safe bet.<br />
<h3>
Step 2 - Lay Out the Book</h3>
I had an outline based on my blog posts. I then created a title page, copyright page, etc. (known as front matter) and for each of those pages, I ended them with a page break. Next I created page breaks for each chapter and made each chapter title a Heading 1.<br />
<br />
Once I did that, LibreOffice has a feature that lets you create a table of contents by using all those Heading 1 chapter titles. I put that between the front matter and the first chapter and it looks good! The table of contents then becomes a set of links for each chapter. To me, a programming book must have a table of contents! You don't need an index because you can search through the eBook.<br />
<br />
I just used default formatting for the text and that seemed to work out all right. I used bold and italic when needed, and I had heard that Amazon doesn't like bulleted lists, so every list is a numbered list and not done with automatic numbering, just by hand. <br />
<br />
I then copied-and-pasted each blog post to a text file (to remove any hidden Blogger characters) and then copied-and-pasted the pure text into LibreOffice.<br />
<br />
And of course, I did some editing, removed parts that were extra, and in general thought about what was there and would it be useful. Writing a blog is one thing, but writing a book is to a wider audience. <br />
<h3>
Step 3 - The Code</h3>
One of the trickiest parts of a programming book is to format the code. Not only must you make sure that the code is mono-spaced (like a typewriter) but you don't want the code lines to break in unexpected places. One of the things I did (and it was a pain) was to format all my code so it is only 45 characters wide. I did this originally so it would fit nicely in Blogger, but it also fits nicely on Kindle, at least in the Kindle Reader software on my desktop.<br />
<br />
LibreOffice can format text as Paragraph and also as Character styles, and I did both for the code. Kindle seemed to pick up on it. I wanted the code to be mono-spaced and bold and 45 characters and it is! This book is all about code!<br />
<h3>
Step 4 - Pictures</h3>
This book had a lot of pictures. Someone else can count them up, but almost every post has screenshots or other helpful material. In my posts I often have clipart that is just a fun decoration, but I didn't bring them over to Kindle. But I did need the screenshots!<br />
<br />
Those I formatted as centered and aligned to the bottom, and with no wrap for text. All my pictures were .PNG and Amazon seems to like those (I think it converts them to .JPG).<br />
<h3>
Step 5 - Upload</h3>
I already had an Amazon account. I went to <a href="https://kdp.amazon.com/">https://kdp.amazon.com/</a> and got started. They wanted information and none of it was hard to figure out what they wanted. There were choices about pricing and royalties, name, tax stuff, etc. I then made a cover and uploaded my manuscript.<br />
<br />
A few minutes later, the book was published and I'm there.<br />
<h3>
Promote Firefox OS</h3>
One of the main reasons to do this book is to help promote Firefox OS and show people how easy it is to program. Especially games, which are a big driver of adoption for an OS. If you want to tweet or blog about my book, that would be great. I don't know how to do reviewer copies, but maybe you do. Anything that we can do to tell the world that programming games on Firefox OS is fun and easy will help. I know nothing about promoting a book or anything, I'm just a retired engineer who likes to code. And really likes Firefox OS!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-92196854608133224242014-03-05T17:15:00.005-08:002014-03-05T17:19:22.519-08:00HTML5 Game Frameworks (Game Programming)HTML5 game frameworks is an interesting subject. There are dozens of them around, all promising to make game programming easy. Personally I'm interested in using just HTML5, CSS, JavaScript, and CSS. But there are two frameworks I thought I should mention that work in Firefox OS.<br />
<h2>
Construct 2</h2>
Construct 2, by Scirra, has been around a lot and is perfect for people who want to make HTML5 games but don't want to do all the coding. You can learn all about Construct 2 at <a href="https://www.scirra.com/">https://www.scirra.com/</a>.<br />
<br />
Basically you drag and drop bits, choose behaviors from menus, and build your game. I've tried almost all applications like this and Construct 2 is the best. Why? Because they seem to have the best community and they are very transparent about what they do and why. Run by two brothers in London, Ashley and Thomas Gullen, you feel like they are responsive to problems and their forum is legendary for people (not just Ashley and Thomas) helping you out if you get stuck. They have a ton of tutorials and their engine is updated frequently.<br />
<br />
The cost is reasonable. You can buy if for 79 pounds if you are not a professional, and 259 pounds if you are, the difference being how much money you make from their product. I can't say enough of how helpful they are, and how advanced as well. They're really on top of things like WebGL and they export the games you make to the following targets:<br />
<br />
<blockquote class="tr_bq">
Web (HTML5), Wii U, iOS, Android, Win 8, Win 8 Phone, Windows desktop, Mac, Linux, Blackberry 10, Firefox Marketplace, Tizen, Facebook, Chrome Web Store, Amazon Appstore!</blockquote>
Just for fun (and as part of some long-forgotten contest), I put an app in the Chrome Web Store and it was very easy to create, even though it has an odd format. You can check out its fabulous features here: <a href="https://chrome.google.com/webstore/detail/tilt-a-twirl/klabggekijaanbjbakdimcdikdhihhdn?hl=en-US">https://chrome.google.com/webstore/detail/tilt-a-twirl/klabggekijaanbjbakdimcdikdhihhdn?hl=en-US</a>.<br />
<br />
If writing code freaks you out, you probably aren't reading this, but if you have a friend who doesn't code but who wants to make games, go for it! Construct 2 is also used a lot in the industry for prototyping bigger games. And the best part is that you can put your games in the Firefox OS Marketplace!<br />
<h2>
Phaser</h2>
I haven't had a chance to try out Phaser, but it is getting a lot of notice. I'd place it somewhere between hand-coding and Construct 2. You still code, but you use Phaser to do the heavy lifting, and it adds things that would be very hard to do in raw code, like Physics.<br />
<br />
Check out Phaser here: <a href="http://www.photonstorm.com/phaser">http://www.photonstorm.com/phaser</a>. The main honcho is Richard Davey and he seems very helpful. Again, like Construct 2, there are lots of tutorials and the community is very active and the updates are frequent. I'm hoping to try out Phaser pretty soon and see how well it likes Firefox OS, but Mr. Davey says it will work in Firefox OS and if anyone has done this, let me know.<br />
<h2>
A Game A Week </h2>
I'm a proud member of the One Game A Month jam at <a href="http://www.onegameamonth.com/">http://www.onegameamonth.com/</a> but I recently ran across a site where someone is doing one game a week! I was doubtful at first. After all, many can do a game jam in a weekend, but they often are wasted afterward and the pace isn't easy to keep up!<br />
<br />
But this weekly site, called <a href="http://www.lessmilk.com/">http://www.lessmilk.com/</a>. The author, one Thomas Palef, has been doing a game a week for a few months and the games are cool. As I dug a little deeper, I found that he's coding in Phaser. This is a very, very good argument for using Phaser if you want to code fast. <br />
<br />
He also walks you through a two-part tutorial on making an Angry Birds clone. I fear that this will be the new standard for simple gaming, but who am I to complain? He also had a nice short article on pixel art at <a href="http://blog.lessmilk.com/pixel-art-how-i-made-the-princess-in-game-6/">http://blog.lessmilk.com/pixel-art-how-i-made-the-princess-in-game-6/</a>. This is a person to watch.<br />
<br />
I was amused that he said<br />
<blockquote class="tr_bq">
Since I started this project I've received a lot of supportive
emails, which is awesome. But there's more: I've also had emails that
have opened up new opportunities for me:<br />
<ul>
<li>I got a job offer from a big company</li>
<li>A publisher contacted me to buy some of my games</li>
<li>A small company wants me to build them exclusive games</li>
<li>A couple of indie teams want me to help them as a game designer on some interesting projects</li>
<li>I even got contacted by a PhD student who wants me to help him with his thesis</li>
</ul>
</blockquote>
So if you want a job in the game industry, just do something cool and people will come to you!<br />
<br />
Right now I'm happy doing this blog and preparing my book, but I expect Mr. Palef to be a rising star!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNePGscdPpIiBIlW36vrEcHebe2W7jMRf7lZH2o1Q7NzBftm7x2o2jJ6dJ1GfVRq0c7XkLC1co_Tha-EL-0y1-OolAS4CwtV8nX-j_-OxCSkFdlhDNhLDYQNzMyhle2AsLsdk0N3hr5rw/s1600/nicubunu_RPG_map_symbols_Circus_Tent.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNePGscdPpIiBIlW36vrEcHebe2W7jMRf7lZH2o1Q7NzBftm7x2o2jJ6dJ1GfVRq0c7XkLC1co_Tha-EL-0y1-OolAS4CwtV8nX-j_-OxCSkFdlhDNhLDYQNzMyhle2AsLsdk0N3hr5rw/s1600/nicubunu_RPG_map_symbols_Circus_Tent.png" height="320" width="320" /></a></div>
<h2>
My Book</h2>
I've revised about two thirds of the posts I want to use for my book and things are going along smoothly. I'm finding that there is a lot of details to follow to format it so Amazon will like it, and with any luck I'll finish in about two weeks.<br />
<br />
I'm hoping that my book will help get the word out that Firefox OS is easy to program and fun! I appreciate all the offers I've had to help publicize the book and I'll be looking to see if I can also put it on Nook, Google Books, and Leanpub. Maybe I should put it in the Apple store for amusement. After all, when the iPhone came out, Steve Jobs wanted everyone to write apps in HTML5!<br />
<br />
I'll keep you posted!<br />
<h2>
Twitter</h2>
I've been having a lot of fun discovering Twitter. I never used it before starting this blog, and my thought was that it might be a good way to let people know that there was a blog on Firefox OS game programming and game playing. But I've since found out that it is a fun way to find out what's going on in the worlds I care about: Firefox OS and game programming.<br />
<br />
Yesterday Twitter told me I couldn't follow any more people! It turns out they don't want you to follow more than 2000 people, so I've been unfollowing a few people who had followed me but who weren't tweeting things I was interested in. And if I want to follow people who I discover, I'll have to unfollow someone else.<br />
<br />
So right now, if I follow you because of Firefox OS, I won't ever unfollow you. Same goes with any HTML5 game programmers. And also any game programmers that do pixel art or otherwise something that catches my attention (like ASCII Art). And an occasional odd person that has something interesting. And definitely not anyone who can sell me how get more followers or how to maximize my web site profits!<br />
<br />
Right now I have 798 followers, but I'm not seeking followers unless you like Firefox OS game programming and game playing or Firefox in general or Pixel Art games or ASCII Art games or goofy game developers like the people who hang out at @OneGameAMonth or, well, you get the idea.<br />
<br />
2000 tweets, 2000 follows, 798 followers.<br />
<br />
Oh, and this blog has had a total of 23,000 views. The most popular page was on Device Orientation, which is definitely a cool subject. Second-most was my comparison of CSS, Canvas, and SVG, and third was IndexedDB.<br />
<br />
Not surprising, most of my readers are in the USA:<br />
<br />
<table __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true" cellspacing="0" class="GFPUSQ2A1"><tbody>
<tr __gwt_row="0" __gwt_subrow="0" class="GFPUSQ2J- GFPUSQ2A0"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L- GFPUSQ2B0"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
United States</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0 GFPUSQ2B0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
11512</div>
</td></tr>
<tr __gwt_row="1" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
France</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
1003</div>
</td></tr>
<tr __gwt_row="2" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Germany</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
995</div>
</td></tr>
<tr __gwt_row="3" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
United Kingdom</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
536</div>
</td></tr>
<tr __gwt_row="4" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Brazil</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
511</div>
</td></tr>
<tr __gwt_row="5" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Spain</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
459</div>
</td></tr>
<tr __gwt_row="6" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Canada</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
351</div>
</td></tr>
<tr __gwt_row="7" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Ukraine</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
344</div>
</td></tr>
<tr __gwt_row="8" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;">
<div class="GFPUSQ2EO">
Italy</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
329</div>
</td></tr>
<tr __gwt_row="9" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3595" style="outline-style: none;" tabindex="0">
<div class="GFPUSQ2EO">
Serbia</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3596" style="outline-style: none;">
148</div>
</td></tr>
</tbody></table>
<br />
Browsers weren't a surprise:<br />
<br />
<table __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true" cellspacing="0" class="GFPUSQ2A1"><tbody>
<tr __gwt_row="0" __gwt_subrow="0" class="GFPUSQ2J- GFPUSQ2A0 GFPUSQ2D0"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L- GFPUSQ2B0 GFPUSQ2C0 GFPUSQ2E0"><div __gwt_cell="cell-gwt-uid-3601" style="outline-style: none;" tabindex="0">
<div class="GFPUSQ2EO">
Firefox</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0 GFPUSQ2B0 GFPUSQ2E0"><div __gwt_cell="cell-gwt-uid-3602" style="outline-style: none;">
12171 (52%)</div>
</td></tr>
<tr __gwt_row="1" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3601" style="outline-style: none;">
<div class="GFPUSQ2EO">
Chrome</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3602" style="outline-style: none;">
4884 (21%)</div>
</td></tr>
<tr __gwt_row="2" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3601" style="outline-style: none;">
<div class="GFPUSQ2EO">
Safari</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3602" style="outline-style: none;">
2710 (11%)</div>
</td></tr>
<tr __gwt_row="3" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3601" style="outline-style: none;">
<div class="GFPUSQ2EO">
Internet Explorer</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3602" style="outline-style: none;">
2134 (9%)</div>
</td></tr>
</tbody></table>
<br />
And Operating Systems wasn't too surprising:<br />
<br />
<table __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true" cellspacing="0" class="GFPUSQ2A1"><tbody>
<tr __gwt_row="0" __gwt_subrow="0" class="GFPUSQ2J- GFPUSQ2A0 GFPUSQ2D0"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L- GFPUSQ2B0 GFPUSQ2C0 GFPUSQ2E0"><div __gwt_cell="cell-gwt-uid-3607" style="outline-style: none;" tabindex="0">
<div class="GFPUSQ2EO">
Windows</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0 GFPUSQ2B0 GFPUSQ2E0"><div __gwt_cell="cell-gwt-uid-3608" style="outline-style: none;">
10148 (44%)</div>
</td></tr>
<tr __gwt_row="1" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3607" style="outline-style: none;">
<div class="GFPUSQ2EO">
Macintosh</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3608" style="outline-style: none;">
6857 (29%)</div>
</td></tr>
<tr __gwt_row="2" __gwt_subrow="0" class="GFPUSQ2J-"><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3607" style="outline-style: none;">
<div class="GFPUSQ2EO">
Linux</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K- GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3608" style="outline-style: none;">
2705 (11%)</div>
</td></tr>
<tr __gwt_row="3" __gwt_subrow="0" class="GFPUSQ2J0"><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2L-"><div __gwt_cell="cell-gwt-uid-3607" style="outline-style: none;">
<div class="GFPUSQ2EO">
Android</div>
</div>
</td><td class="GFPUSQ2I- GFPUSQ2K0 GFPUSQ2F0"><div __gwt_cell="cell-gwt-uid-3608" style="outline-style: none;">
1246 (5%)</div>
</td></tr>
</tbody></table>
<br />
I appreciate every single one of you that takes the time to read what I write and I intend to keep going. As I said last time, I'm torn between these next paths:<br />
<br />
<blockquote class="tr_bq">
1. Advanced topics like WebGL, WebAudio, WebSockets, WebWorkers, etc.<br />
<br />
2. Going back and fleshing out more about how to use CSS for gaming.<br />
<br />
3. Writing a series that leads to a full RPG!<br />
<br />
4. Doing lots more with SVG, the undiscovered country.<br />
<br />
5. More about creating music and art.<br />
<br />
6. Making games in Construct 2 and/or Phaser.<br />
<br />
7. There is no 7!<br />
<br />
8. Working with servers. Node and MMORPG.</blockquote>
If anyone has any requests, let me know!<br />
<br />
Well, I guess I'd better flip some coins and get back to work on reformatting and rewriting my book. <br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0tag:blogger.com,1999:blog-3508308619057792099.post-51661304107533744092014-02-27T11:15:00.002-08:002014-02-27T11:15:40.081-08:00Firefox OS Book and What's Next (Game Programming)I've mentioned this before, but I've been thinking about publishing a book on Amazon covering beginning Firefox OS game programming. As you might guess, the book will consist of roughly 30 blog posts. I'll revise the posts and I'll let you know how I went about publishing a book on Amazon. In keeping with the tone of this blog, my focus will be for people who want to program games but who are not experts and who want to try making things with HTML5 on Firefox OS.<br />
<br />
I've already edited about 15 posts/chapters and I expect to edit the rest and publish in about two weeks. Revising for a book takes extra time so I'm planning on cutting back on my posts and catch up on some game reviews.<br />
<br />
Here's my tentative list of chapters:<br />
<br />
1 - Introduction - Hello World!<br />2 - Pushing your Game to a Device<br />3 - Measuring Screen Size from the Inside<br />4 - Bouncing a Ball in CSS<br />5 - Drawing with Canvas - Part 1<br />6 - Drawing with Canvas - Part 2<br />7 - Drawing with Canvas - Part 3<br />8 - Bouncing SVG - Part 1<br />9 - Bouncing SVG - Part 2<br />10 - Bouncing SVG - Part 3<br />11 - Touch and more SVG<br />12 - Screen Orientation<br />13 - CSS Shell<br />14 - CSS Collisions<br />15 - Canvas Collisions in Color<br />16 - SVG Collisions<br />17 - CSS, Canvas, SVG Compared<br />18 - HTML5 Audio - Part 1<br />19 - HTML5 Audio - Part 2<br />20 - HTML5 Audio - Part 3<br />21 - HTML5 Audio - Part 4<br />22 - HTML5 Audio - Part 5<br />23 - Vibration<br />24 - Device Orientation<br />25 - Local Storage<br />26 - Asynchronous Storage<br />27 - IndexedDB Storage<br />28 - Simple Complete Game - PaddleFox!<br />29 - Submitting a Game to the Marketplace<br />30 - Firefox OS Hardware<br />31 - Resources for Going Further<br />
<br />
The code will be retested and will be reformatted so that it fits on Amazon devices (with short line lengths). I'm excited to publish this book and I'm hoping that it will help gain a wider audience for people who want to make games but are intimidated by the more complicated tools of Windows, Android, and Apple development.<br />
<br />
<h2>
What's Next?</h2>
After I get the book out, I'm back to writing about game programming. Here are my feelings at the moment:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuZBUZv4KCtKY84sKuQhBYRedja_-W0CP-XW9t6ddIH7LFt2Sk5quFnuYynlcKGOUJa3mo4JAp2p2VZAIe7urWfhk_X9pc3lLQP-zqOJCShLx1UKy74zX7rD_aKas6AR-W1h2Kpf0YTM/s1600/Cups07.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuZBUZv4KCtKY84sKuQhBYRedja_-W0CP-XW9t6ddIH7LFt2Sk5quFnuYynlcKGOUJa3mo4JAp2p2VZAIe7urWfhk_X9pc3lLQP-zqOJCShLx1UKy74zX7rD_aKas6AR-W1h2Kpf0YTM/s1600/Cups07.jpg" height="400" width="228" /></a></div>
<br />
I've been toying with the idea of writing a space shooter game but also I am seriously drawn to writing an RPG. I've always loved RPG computer games and I've always wanted to write one, but never got around to it. I think this will be what will be next.<br />
<br />
I'm going to study Ultima II (my all-time favorite) and also some Gameboy RPG titles like Dragon Warrior, Final Fantasy Legends and Adventure, Ultima Runes of Virtue, Pokemon, and Azure Dreams. These simple tile-based games might just fit on a Firefox OS phone. As with earlier posts, I'll examine what works with CSS, Canvas, and SVG. I won't make a full-blown RPG, but I imagine that there will be a long series of posts. And I'm likely to go with some retro art to go with it.<br />
<br />
I'll also keep reviewing games!<br />
<br />
So definitely stay tuned, but not iTuned!<br />
<br />Bobhttp://www.blogger.com/profile/07306747623256745613noreply@blogger.com0