tag:blogger.com,1999:blog-57565945774508097732025-08-22T10:11:51.886-07:00SlashGame - HTML5 Game DevelopmentGames development infos and indie game developerStephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-5756594577450809773.post-78080716949219988952013-04-24T11:25:00.002-07:002013-04-24T12:43:38.423-07:00Put Ads in Windows 8 Apps (HTML5)&nbsp;Note: The following tutorial is for HTML5 app development. <br /> <br /> So you want to get into, or you're already in Windows 8 App development?<br /> You'll surely want to know how to monetize your apps. And the simplest way to do that is to put ads in your app or game. You can also have in-app purchases, or even make it a paid app. However in-app purchases is a little bit more difficult (although it isn't that bad, I'll write about that in a later article), and to have any notable success with a paid app, you want to make sure it's a damn good app or game.<br /> <br /> So, how do we put ads in our Windows 8 Store apps?<br /> <br /> First you need an ad provider. You can use any ad provider that meets Microsoft's standards. But at the moment, I'm sticking with Microsoft's pubCenter, because it's actually the only provider I can find right now that you can use. AdSense is apparently out the picture. So, I'll show the ropes with pubCenter. Also note that pubCenter isn't great yet. There's not a whole lot of advertisers with them yet, so quite often you will find your app not even displaying ads. Ads are displayed more in America than anywhere else, which isn't too bad since America will usually be the biggest audience of any app. I can also see pubCenter growing rapidly, so you may as well get yourself prepared.<br /> <br /> <h3> Get the SDK</h3> First off, get the <a href="http://adsinapps.microsoft.com/sdk">Microsoft Advertising SDK for Windows 8</a>, click "direct download" at the top right of the page, and install it. Now Visual Studio has what it needs to work with ads.<br /> <br /> <br /> <h3> Set up pubCenter Account</h3> Then you should get started with pubCenter, for in-depth description, have a look at <a href="http://adsinapps.microsoft.com/pubcenter">How to Use pubCenter</a>. But it's pretty simple, just <a href="https://pubcenter.microsoft.com/Login">log in with your Microsoft ID</a><span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">, you'll see the "sign in with microsoft account" link.</span> Then you'll be able to set up your first ad unit for your app.<br /> <br /> When you create your ad unit, you will have a unit ID and an application ID, both of which you will need later for your code.<br /> <br /> <h3> Placing the HTML code</h3> First go to your default.html or the page you are placing the ad on.<br /> In the &lt;head&gt; part, put this line *after* you include default.js:<br /> <script src="http://pastebin.com/embed_js.php?i=nMUkdRV3"></script> <br /> <br /> Now in the &lt;body&gt; section, use this code:<br /> <script src="http://pastebin.com/embed_js.php?i=dnEZwFFi"></script>This example places a 292px by 60px ad at the bottom left of the page. You can change the position values as you like, and the size values should be the values you made your unit.<br /> Important note: The application ID used here is what you need to use for testing purposes, and the unit ID is what you need to use if you are going to have a 292 by 60 ad. For other sizes, look at the <a href="http://msdn.microsoft.com/en-us/library/advertising-windows-test-mode-values%28v=msads.10%29.aspx">Test Mode Values Table</a> and make sure you take the Unit ID of the size you intend to use.<br /> <br /> Using your own application ID and unit ID will not show anything when testing, you must wait until you have finished making your game before switching these values with your actual ad IDs.<br /> <br /> <h4> </h4> <h3> Next Requirements</h3> There are a couple of things you need to do if you're going to have ads in your app. The first is very simple, just go to your app manifest and make sure you've ticked the "Internet (Client)" box under the "Capabilities" tab.<br /> <br /> <b>Privacy Policy</b><br /> The second thing you need to make sure you have is a Privacy Policy. If you don't have a privacy policy when Internet connection is enabled, your app will be rejected.<br /> The privacy policy is used to state what information is being transferred or used. If you are not using any personal information and you're just providing ads, you simply have to state that.<br /> For example, "This application does not collect any personal information. Internet connection is used to provide advertisements."<br /> <br /> You will need to have your privacy policy posted on a web page with a URL you can link in your app's description section when submitting your app.<br /> You also must include your privacy policy in the Settings Charm of your app.<br /> <br /> To do this, go to your default.js file, and locate the part that should look like this:<br /> <br /> <script src="http://pastebin.com/embed_js.php?i=nggaSgzu"></script>Then make the code look more like this:<br /> <br /> <script src="http://pastebin.com/embed_js.php?i=c6UCCiPp"></script><br /> You'll notice that in that code I referenced a "privacy.html" page. All you have to do is make another html page in the project, and for example's sake, here's my privacy.html page for my Holy Diver game:<br /> <br /> <script src="http://pastebin.com/embed_js.php?i=9ZUemgvb"></script><br /> And that should be it! You're now fully equipped to put ads in your app. Now go make a badass game and get it plenty of traffic. Enjoy.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-37512711545705935922013-04-19T07:55:00.000-07:002013-04-19T07:55:24.991-07:00GameJam Results InThe results are in from the GameJam that was held at University of the West of Scotland.<br /> The winner is Martin Grant! Check out his website <a href="http://www.martingrant.net/">here</a> for info on his game, "Unicorn Space Command", and his other work.<br /> <br /> <br /> His game is real fun, I had hardly expected to win over this. If you have Windows 8, you should give it a blast, search the store for "Unicorn Space Command", or follow&nbsp;<a href="http://apps.microsoft.com/windows/en-US/app/unicorn-space-command/0619cb06-5e86-4002-bfb8-9accf68d9f1f">this link</a>. <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://media.tumblr.com/720b570599f1572d683cddc60608f0eb/tumblr_inline_mlcnyv9stR1qz4rgp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="http://media.tumblr.com/720b570599f1572d683cddc60608f0eb/tumblr_inline_mlcnyv9stR1qz4rgp.png" width="640" /></a></div> <br />Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-1949340570840653142013-04-18T15:03:00.001-07:002013-04-19T06:24:16.289-07:00Shotgun Steve In DevelopmentAnother game in the pipeline. While I work on Damn Zombies, I'll be splitting my attention onto this new game Shotgun Steve. And as with my other stuff, this will be available on the Windows 8 App Store.<br /> <br /> The basis of this game will be to shoot some kind of bad guy flying from the platforms at the sides, staying alive as long as possible, as it gets harder and harder. Not sure what the bad guys will be like. Maybe some kind of ninja style shiz. Anyhow, I do believe this game will be great fun, it's just a silly, casual, time-killing game.<br /> <br /> Screenshot of the game early in development, most of the graphics here are temporary, but it'll be along these lines, in terms of style.<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBEoNqpG33KPM6UtEjLAlOz7K6VHnzDGEJFE0QOnLzhiUDu5h5nisdUOFmQwBteKLL37-WsFqhVifDCEyX1VQmZIYeG_R-uMc_rF92hSvEQocpWt4Pt2v7-WHd7l9fHcATllUki6xDzo/s1600/screenshot1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBEoNqpG33KPM6UtEjLAlOz7K6VHnzDGEJFE0QOnLzhiUDu5h5nisdUOFmQwBteKLL37-WsFqhVifDCEyX1VQmZIYeG_R-uMc_rF92hSvEQocpWt4Pt2v7-WHd7l9fHcATllUki6xDzo/s640/screenshot1.png" width="640" /></a></div> <br />Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-64649135142860360412013-04-11T14:07:00.003-07:002013-04-11T14:07:45.220-07:00Holy Diver Released<div class="separator" style="clear: both; text-align: center;"> <a href="http://apps.microsoft.com/windows/app/holy-diver/84921736-c997-4750-9199-76df6ed8c317" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img align="left" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Dhq6UkPbdwFu-zTa8qnO8bfgPlUullMDmURxmIKNXfyAfnELE686EA4I400SngWT5j0L5U1OeicuijFjfSbmiIFQgwmCkrfWKhncOi093ksyZtRaXkKCGFE8X40Hyn0nIblNdza3Q-g/s1600/poster1.png" style="margin-top: 25px; padding-right: 10px;" /></a></div> Holy Diver is now released to the Windows 8 App Store. If you've got Windows 8, follow this link: <a href="http://apps.microsoft.com/windows/app/holy-diver/84921736-c997-4750-9199-76df6ed8c317">Holy Diver - Windows 8 App Store</a>, or search the app store for "Holy Diver".<br /> <br /> The game involves an angel diving from the sky, dodging spiky "devil clouds", then when you reach the ground, you swoop through a tunnel trying not to hit the walls.<br /> On a touch screen device such as a tablet, the default controls are to basically move your finger to where you want the angel to horizontally move to. On a PC, the default controls are keyboard controls (A/D or Left/Right), however you can press M to switch to mouse movements and back.<br /> <br /> <br /> This game was very quickly developed, as it is a submission to a competition I took part in at the University of the West of Scotland.<br /> The competition was spanned over 3 days, and a decent chunk of the time was used learning new things. And honestly, I love making games for the Windows Store.<br /> To all casual games developers, I really do suggest getting Windows 8 (even if you'd rather dual boot it) so you can take part in this up-and-coming market.<br /> <br /> <br /> So, as I said, this was a quick development, so it's not an overly impressive game. Although it can be rather addictive. I didn't expect myself to get that effect from the game, but I did. And since I enjoy it myself so much, I intend on building on the game after the competition has been judged. The game will be much more featureful and professional feeling.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6fdVyYYx5Oy8iWGaRzBNLFi0RTH-3k7SuNtqxo1ELK0XACNiMXzYWbJzIEe0_qLgvPBgOFTchhMRn4oRa45GTUC0Xy1FVLIK4wDJibDbsBSA62a_XXp44aNq8v4t42QZPXwm2hrqlHc/s1600/screenshot_04052013_154106.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6fdVyYYx5Oy8iWGaRzBNLFi0RTH-3k7SuNtqxo1ELK0XACNiMXzYWbJzIEe0_qLgvPBgOFTchhMRn4oRa45GTUC0Xy1FVLIK4wDJibDbsBSA62a_XXp44aNq8v4t42QZPXwm2hrqlHc/s640/screenshot_04052013_154106.png" width="640" /></a></div> Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-74463067456832046042013-04-09T16:53:00.003-07:002013-04-09T16:53:54.315-07:00Damn Zombies - Early Sneek PeakWhile Holy Diver is in the process of being published to the Windows 8 App Store, I decided to start work on a new game.<br /> <br /> Damn Zombies will be a simple top-down zombie shooter, with basic controls, a range of weapons and defense upgrades. This game will be on the Windows 8 App Store, so available to Windows 8 PC users, as well as Windows 8 tablet users. I also intend on releasing the game on the Windows Phone Store too.<br /> <br /> Keep an eye out for updates, the game won't take long to finish. You can follow me on twitter <a href="http://twitter.com/slashgame">@SlashGame</a>, or Like the new Facebook page <a href="http://facebook.com/SlashGameNet">SlashGameNet</a><br /> <br /> Here's a screenshot of gameplay, very early in development. As you'll see, there's still not even a gun in the player's hands yet.<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrM345yfk-YJ9trd9dM2E_qd2qtG1lCLyPrZI8yImaj_1HwyrnT6-kcA4BGq4iJWwmKWBJbCY4m6TqYFtibvaEvweKLvOxFaeVKnpZAUeptf_x6QN0WBLQMr9Nj_YUJrOwSLj08EKbTSA/s1600/early+screenshot+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrM345yfk-YJ9trd9dM2E_qd2qtG1lCLyPrZI8yImaj_1HwyrnT6-kcA4BGq4iJWwmKWBJbCY4m6TqYFtibvaEvweKLvOxFaeVKnpZAUeptf_x6QN0WBLQMr9Nj_YUJrOwSLj08EKbTSA/s1600/early+screenshot+1.png" /></a></div> <br />Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-90155667892330204202013-04-05T13:14:00.000-07:002013-04-09T17:20:11.201-07:00SlashGame's First Official Game on Windows 8 Store!<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Dhq6UkPbdwFu-zTa8qnO8bfgPlUullMDmURxmIKNXfyAfnELE686EA4I400SngWT5j0L5U1OeicuijFjfSbmiIFQgwmCkrfWKhncOi093ksyZtRaXkKCGFE8X40Hyn0nIblNdza3Q-g/s1600/poster1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img align="left" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Dhq6UkPbdwFu-zTa8qnO8bfgPlUullMDmURxmIKNXfyAfnELE686EA4I400SngWT5j0L5U1OeicuijFjfSbmiIFQgwmCkrfWKhncOi093ksyZtRaXkKCGFE8X40Hyn0nIblNdza3Q-g/s1600/poster1.png" style="padding-right: 10px; margin-top: 25px;" /></a></div> For the past 3 days I've been at a GameJam (game development competition) at the University of the West of Scotland. Our task was to make a game to put on the Windows 8 App Store; something I had never done before.<br /> <br /> The process of developing for the Windows Store was great, I could have chosen from a lot of languages to write the game in, and I could have picked from a range of third party frameworks. A lot of the other competitors used Construct 2, and I saw some pretty decent looking games coming from them.<br /> I on the other hand, stuck with Visual Studio 2012, and I chose to write the game in JavaScript, so it is indeed a HTML5 game.<br /> <br /> Since I gave SlashGame such a high focus in HTML5 games, I thought I may as well make the game an official release for SlashGame.<br /> <br /> <br /> <b>Holy Diver</b><br /> My original idea for the name was actually "Angel Dive", as the game involves an angel diving from the heavens then straight into the ground and through a tunnel.<br /> However, I was driving along to the university today, and in popped the Dio song "Holy Diver" to my head. Obviously that fit just perfectly, so indeed the game is now named Holy Diver.<br /> <br /> There is much still to add to the game. Rest assured that the game will be fully featured soon after the competitors have been judged.<br /> <br /> The game will be free on the Windows App store, and I may at some point post a "How I made it" article or video.<br /> <br /> As for the GameJam, there was good competition, so I eagerly await to hear the winner, and I shall post the results, whether it's me or not.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieO8jn9yCHaH53jndezhmaH_kUFyNGqjBNwPg7BZWE3AtQVBl5Cj3rNXSGTN6vYXIfuxSLLzmeg1EKXXyz2Eae2sILRWy8Ilm25W7ZpXA9ZymoI4U-g3tJ1Y2BRkAZlT1Y1-V2Pkk7b0/s1600/screenshot_04052013_154106.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieO8jn9yCHaH53jndezhmaH_kUFyNGqjBNwPg7BZWE3AtQVBl5Cj3rNXSGTN6vYXIfuxSLLzmeg1EKXXyz2Eae2sILRWy8Ilm25W7ZpXA9ZymoI4U-g3tJ1Y2BRkAZlT1Y1-V2Pkk7b0/s640/screenshot_04052013_154106.png" width="640" /></a></div> <br /> <br />Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-34621100980155944202013-01-20T05:06:00.000-08:002013-01-22T08:48:54.963-08:00How to Make a HTML5 Game (HTML5 Game Development Guide)In this blog, I've got helpful tips spread out everywhere, so in this post I will organize a list of links to the posts I think would be most helpful.<br /> <br /> I'll keep this list updated when I think of more stuff to put in it. And I'm open to suggestions, if you have any, you can contact me via @SlashGame on twitter (By the way, I'm more likely to see a mention than a Private Message). <br /> <br /> <span style="font-size: x-small;">21/01/201<span style="font-size: x-small;">3: Updates <span style="font-size: x-small;">to these pages have begun.</span></span></span><br /> <span style="font-size: x-small;"><span style="font-size: x-small;"><span style="font-size: x-small;">22/01/2013: Information improved in Game Loop and Simple Game Phsyics articles. </span></span></span><br /> <br /> <br /> <span style="font-weight: bold;">The first thing is, you should understand what the canvas is.</span><br /> <a href="http://html5gamedev.blogspot.com/2011/05/html5.html">HTML5 Canvas Explained.</a><br /> <br /> <span style="font-weight: bold;">Then, you're going to want to know how to render an image or text to the canvas.</span><br /> <a href="http://html5gamedev.blogspot.com/2011/05/display-image-on-canvas.html">Display Image on Canvas</a><br /> <a href="http://html5gamedev.blogspot.com/2011/06/canvas-background-image.html">Canvas Background Image</a><br /> <a href="http://html5gamedev.blogspot.com/2011/06/quick-tip-filltext-javascript-function.html">Draw Text to the Canvas</a><br /> <br /> <span style="font-weight: bold;">Then, for the actual game, you need to be able to set up what's known as a "Game Loop" in order to show moving characters and such based on user input.</span><br /> <a href="http://html5gamedev.blogspot.com/2011/05/game-loop.html">Game Loop</a><br /> <a href="http://html5gamedev.blogspot.com/2011/05/user-input-make-it-easier-on-yourself.html">Keyboard Input (helpful function you can use)</a><br /> <a href="http://html5gamedev.blogspot.com/2011/06/user-input-mouse-input.html">Mouse Input</a><br /> <br /> <span style="font-weight: bold;">Now, all you need to know is the fancy stuff that you may want to use to make the game feel right.</span><br /> <a href="http://html5gamedev.blogspot.com/2011/05/simple-game-physics_24.html">Simple Game Physics</a><br /> <a href="http://html5gamedev.blogspot.com/2011/05/rotate-image-on-canvas.html">Rotating Image on Canvas</a><br /> <a href="http://html5gamedev.blogspot.com/2011/06/quick-tip-html5-audio-for-game.html">HTML5 Audio</a><br /> <br /> <br /> <br /> If you like to learn things visually, then I've got a video on how to make a simple game.<br /> <a href="http://html5gamedev.blogspot.com/2011/06/video-intro-to-html5-game-dev.html">Video Introduction to HTML5 Game Development</a><br /> <br /> And I have a list of helpful snippets of code.<br /> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-list.html">Snippet List</a><br /> <br /> If you want to make money from your games, I suggest you take a look at this:<br /> <a href="http://html5gamedev.blogspot.com/2011/09/how-to-make-money-from-your-games.html">How to Make Money From Your Games</a>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com7tag:blogger.com,1999:blog-5756594577450809773.post-90141905067444392642012-12-05T09:37:00.003-08:002012-12-05T09:37:56.479-08:00SlashGame RevampHey guys.<br /> <br /> I've decided I want to revamp SlashGame as well as possible, so here's what's coming soon:<br /> - I'll go through all my previous posts and update them<br /> - add a newly organized menu<br /> - update theme<br /> <br /> <br /> Then soon after that:<br /> - New static SlashGame website with all tutorial resources<br /> - A new <b>projects section</b> in the new website where you can see all official projects and take part in them, and even start up your own project to show users and get help and team members!<br /> - A games section where you can view all official games and user's project games who allow public access<br /> <br /> <br /> This will be coming soon, I plan on making this a <b>great community and learning center</b>, so keep an eye out.<br /> <br /> ~ See you around.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-38655805830366630802012-12-01T17:12:00.000-08:002013-04-21T18:35:44.381-07:00Holy Diver Privacy PolicyHoly Diver does not collect any personal information.<br /> Internet access is only used to provide ads in the application.<br /> <br /> <a href="http://apps.microsoft.com/windows/en-US/app/holy-diver/84921736-c997-4750-9199-76df6ed8c317">- Store Link for Holy Diver</a>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-44515500462773527032012-12-01T10:12:00.000-08:002013-01-21T07:55:49.582-08:00HTML5 Game Development TutorialIf you want to make a HTML5 game and just want a nice reference page you can go back to, or if you are a complete beginner and need to learn as much as possible step-by-step, then you're at the right place.<br /> I also have a guide split into multiple pages here, if you prefer that: <a href="http://html5gamedev.blogspot.com/2011/07/how-to-make-html5-game.html">HTML5 Game Development Guide</a>.<br /> There's also a video tutorial for the basics of HTML5 game development: <a href="http://html5gamedev.blogspot.com/2011/06/video-intro-to-html5-game-dev.html">Video Intro to HTML5 Game Dev</a><br /> <br /> If you don't know much about JavaScript, then have a look at the <a href="http://html5gamedev.blogspot.com/2011/08/introduction-to-javascript.html">Introduction to JavaScript</a>.<br /> <br /> If you want to know how to make money from your games, have a look at this article:<br /> <a href="http://html5gamedev.blogspot.com/2011/09/how-to-make-money-from-your-games.html">How to Make Money From Your Games</a><br /> <br /> <br /> If I post any little snippets here, feel free to use them in any way.<br /> Although if you use a lot of it, it would be appreciated if you place something like this in your JavaScript:<br /> /* Some code taken from www.slashgame.net */ <br /> <br /> <h3> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">Contents</a></h3> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#what-is-html5-canvas">What is the HTML5 Canvas?</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#draw-image-to-html5-canvas">How to Draw an Image to the Canvas</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#draw-text-to-html5-canvas">How to Draw Text to the Canvas</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#set-up-game-loop">Set up a Game Loop</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#keyboard-input">Keyboard Input</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#mouse-input">Mouse Input</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#add-simple-game-physics">Add Simple Game Physics</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#rotate-image-on-html5-canvas">How to Rotate an Image on Canvas</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#use-html5-audio">Use HTML5 Audio</a><br /> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#conclusion">Conclusion of Tutorial</a><br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#what-is-html5-canvas" name="what-is-html5-canvas">What is the HTML5 Canvas?</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> The <i> &lt;canvas&gt; HTML element,</i> which came to us in<i> HTML5</i> was the first step towards HTML5 games becoming big.<br /> <br /> The canvas allows so many things that you wouldn't have been able to do otherwise, and does it rather efficiently.<br /> <br /> Canvas renders 2D graphics onto a given area in the browser window. It does this dynamically via scripting (i.e. JavaScript). The shapes and images which are rendered on the canvas can be manipulated in several ways. The most obvious and useful ways are <i>scaling</i> and<i> rotating the image</i>; which you would not have been able to do without the canvas, unless you did some rather inefficient and complicated php scripting to alter an image at the pixel-level to make it appear to do a similar thing.<br /> <br /> JavaScript has a <i>2D graphics API</i> which accesses the <i>HTML5 canvas</i> drawing area, which is how games can be written. But just because it only has a 2D API, don't let that make you think 3D isn't possible.<br /> <br /> For a start, you could simply write your own JavaScript 3D engine, which uses normal 2D functions to generate a 3D object and render the <i>2D projection</i> on the canvas. Doing so just requires a bit of mathematics. But making it a huge and playable game is where it gets difficult.<br /> <br /> You could create a whole 3D engine if you wanted, but there is a <i>3D graphics API</i> available. It's called <i>WebGL</i>, and it does what I just described, but it simplifies it by allowing you to just call the functions, rather than having to think up all that complicated stuff yourself. It also means that the 3D engine already has optimized code, meaning it will run faster.<br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#draw-image-to-html5-canvas" name="draw-image-to-html5-canvas">How to Draw an Image to the Canvas</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> This is just about the simplest example of the use of HTML5 canvas you can get. This is just to show how to set up a canvas and draw in it.<br /> <br /> Firstly, you would have something like this in the HTML of the page: <br /> <blockquote class="tr_bq"> <span style="font-family: &quot;Courier New&quot;,Courier,monospace;">&lt;canvas height="400" id="canvas" width="400"&gt;<br />Browser not compatible with HTML5 canvas<br />&lt;/canvas&gt;</span></blockquote> <br /> The id of the canvas element can be anything, but here it has been set to "canvas". This is used so the JavaScript can identify the correct canvas element to manipulate.<br /> <br /> I've set the width and height of the canvas to 400px. It normally wouldn't be a perfect square for a game, but this is just an example.<br /> <br /> And if an incompatible browser is used, it will display the text "Browser not compatible with HTML5 canvas".<br /> <br /> <br /> The JavaScript goes in the <span style="font-family: &quot;Courier New&quot;,Courier,monospace; font-size: small;"><head></head></span> section of the page.<br /> You could have all the code in <i>script tags</i> (<span style="font-family: &quot;Courier New&quot;,Courier,monospace;">&lt;script&gt;CODE HERE&lt;/script&gt;</span>) or have it in a seperate .js file and call it from <i>src</i> attribute of script tags&nbsp;(<span style="font-size: x-small;"><span style="font-family: &quot;Courier New&quot;,Courier,monospace;"><span style="font-size: small;">&lt;script<span style="font-size: small;"> </span>src"javascriptfile</span><span style="font-size: x-small;"><span style="font-size: small;">.js"&gt;&lt;/scri</span><span style="font-size: x-small;"><span style="font-size: small;">pt&gt;</span></span></span></span></span>)<span style="font-size: x-small;"><span style="font-family: &quot;Courier New&quot;,Courier,monospace;"><span style="font-size: x-small;"><span style="font-size: x-small;">.</span></span></span></span> <br /> <br /> Here is an example of the kind of JavaScript you could use to draw an image:<br /> <blockquote> <pre>var canvas = document.getElementById('canvas'); var context2D = canvas.getContext('2d'); var img = new Image(); img.src = "http://www.blogger.com/img/logo40.png"; context2D.drawImage(img, 100, 50); </pre> </blockquote> <br /> So first it gets the canvas element by using the id we gave it. It then creates the 2D context with that canvas element.<br /> <br /> It then loads a new Image object and then tells it to use the image from the location we give it by assigning it to the <i>src variable of the Image object</i>.<br /> <br /> Then it uses the 2D graphics API by calling the <span style="font-family: &quot;Courier New&quot;,Courier,monospace; font-size: small;">drawImg()</span> function.<br /> <br /> The first parameter of the function is looking for an <i>image object</i> to draw, the second is the <i>x-position</i> and the third is the <i>y-position</i>. The positions are always relative to the top left corner by default.<br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#draw-text-to-html5-canvas" name="draw-text-to-html5-canvas">How to Draw Text to the Canvas</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> <blockquote> <pre>context2D.fillStyle = "white"; context2D.font = 'bold 30px sans-serif'; context2D.fillText("POINTS: "+numOfPoints, canvas.width-200, 30); </pre> </blockquote> <br /> That right there is an example of drawing text to the canvas. It writes it on the top right of the canvas. That particular example is what would serve as part of the HUD in a game.<br /> Here is a little function that draws text to the canvas with a specified position, color and font. This also shows you the different things you can do with text.<br /> However, you may want to use this function just as a means to being able to not worry about remembering the different parts to it. <br /> <blockquote> <pre>function drawCanvasText(txt, pX, pY, clr, fnt) { context2D.fillStyle = clr; // color context2D.font = fnt; // font context2D.fillText(txt, pX, pY); // text at position X, Y } </pre> </blockquote> <b>Example Usage:</b> <br /> <blockquote> <pre>drawCanvasText("drawing text yas", 50, 50, "black", "bold 30px sans-serif");</pre> </blockquote> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#set-up-game-loop" name="set-up-game-loop">Set up a Game Loop</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> A game loop is the normal structure a game would be build in. This is something you would find in any kind of game, not just HTML5 games.<br /> First it would initiate the loop (what I tend to do is trigger the initiation function when the window is loaded), then the loop would involve checking for user input, then doing what needs to be done to all the objects, then rendering/drawing the scene, and start again from checking user input.<br /> This is an example of doing this in javascript:<br /> <div style="height: 500px; overflow: auto; width: 600px;"> <blockquote> <pre>const FPS = 30; var playerPosX = 0; var playerPosY = 0; var playerImg = new Image(); playerImg.src = "http://filevaults.com/media/Slash/553481-smiley.png"; var canvas = null; var context2D = null; var keys = new Array(); window.onload = init; window.addEventListener('keydown',keyDown,true); window.addEventListener('keyup',keyUp,true); function keyDown(evt){ keys[evt.keyCode] = true; } function keyUp(evt){ keys[evt.keyCode] = false; } function init() { canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); setInterval(draw, 1000 / FPS); } function draw() { if ((37 in keys &amp;amp;&amp;amp; keys[37]) || (65 in keys &amp;amp;&amp;amp; keys[65])){ //left playerPosX -= 2; } if ((39 in keys &amp;amp;&amp;amp; keys[39]) || (68 in keys &amp;amp;&amp;amp; keys[68])){ //right playerPosX += 2; } context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.drawImage(playerImg, playerPosX, playerPosY); } </pre> </blockquote> </div> The code initiates the loop in the init() function, which is called as soon as the window is loaded up. This function uses the setInterval() function to call the draw() function 30 times per second (it uses the FPS variable to determine that frame rate).<br /> <br /> It then adds an "event listener" for key being pressed, and for key being released. This means that when a key is pressed, it calls the function which adds the key's code to an array. When the key is released, another function is called which sets the value of that array element to false. This means that every time the loop comes to the point where it checks for user input, all it has to do is look in the array and see if it's there and that it is set to true.<br /> <br /> Once it knows if the key is pressed, it then decides what to do with the playerPos variables. This is the stage where it changes the "virtual world".<br /> <br /> Then the last stage of the loop is rendering/drawing the scene based on the "virtual world's" variables.<br /> To do so, it clears the canvas fully then draws the image in the correct spot.<br /> <br /> Here's the result of the example I just gave (use arrow keys or A and D to move left and right): <a href="http://slashgame.net/html5gamedevexample2.php">http://slashgame.net/html5gamedevexample2.php</a><br /> <br /> <br /> From the knowledge you have learned so far, you can make a simple game, if you have the ability to figure things out. However, I will continue and explain things in further detail and bring up new points of interest.<br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#keyboard-input" name="keyboard-input">Keyboard Input</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> As explained in the Game Loop section of this post (just above this section); it goes through the loop, and each time, it checks if the key is pressed by checking an array to see if it is set to true or false.<br /> An event listener calls a function when a key is pressed down, and sets the array element of the ASCII code of the key, and sets it to true. And another event listener checks for keys being released, and sets the element value to false.<br /> <br /> Looking up ASCII values all the time can sometimes be a pain in the ass, so what I've done is made a little snippet of code you can paste into your code which allows you to simply call the function with the key you want to check as a parameter. This is simple enough to use.<br /> <br /> <span style="font-weight: bold;">Examples of use:</span><br /> If you wanted to check if the A key is pressed down: <br /> <pre>if (isKeyPressed('a')==true) { /* do whatever */ }</pre> If you wanted to check for the left arrow key being pressed: <br /> <pre>isKeyPressed('left')</pre> For escape key: <br /> <pre>isKeyPressed('esc')</pre> <br /> <br /> <span style="font-weight: bold;">The Code:</span> <br /> <div style="height: 500px; overflow: auto; width: 600px;"> <pre>window.addEventListener('keydown',keyPressDown,true); window.addEventListener('keyup',keyPressUp,true); function keyPressDown(evt){ keys[evt.keyCode] = true; } function keyPressUp(evt){ keys[evt.keyCode] = false; } function isKeyPressed(checkKey) { // alphabet if ((checkKey == 'a' || checkKey == 'A') &amp;amp;&amp;amp; (65 in keys &amp;amp;&amp;amp; keys[65])){ return true; } else if ((checkKey == 'b' || checkKey == 'B') &amp;amp;&amp;amp; (66 in keys &amp;amp;&amp;amp; keys[66])){ return true; } else if ((checkKey == 'c' || checkKey == 'C') &amp;amp;&amp;amp; (67 in keys &amp;amp;&amp;amp; keys[67])){ return true; } else if ((checkKey == 'd' || checkKey == 'D') &amp;amp;&amp;amp; (68 in keys &amp;amp;&amp;amp; keys[68])){ return true; } else if ((checkKey == 'e' || checkKey == 'E') &amp;amp;&amp;amp; (69 in keys &amp;amp;&amp;amp; keys[69])){ return true; } else if ((checkKey == 'f' || checkKey == 'F') &amp;amp;&amp;amp; (70 in keys &amp;amp;&amp;amp; keys[70])){ return true; } else if ((checkKey == 'g' || checkKey == 'G') &amp;amp;&amp;amp; (71 in keys &amp;amp;&amp;amp; keys[71])){ return true; } else if ((checkKey == 'h' || checkKey == 'H') &amp;amp;&amp;amp; (72 in keys &amp;amp;&amp;amp; keys[72])){ return true; } else if ((checkKey == 'i' || checkKey == 'I') &amp;amp;&amp;amp; (73 in keys &amp;amp;&amp;amp; keys[73])){ return true; } else if ((checkKey == 'j' || checkKey == 'J') &amp;amp;&amp;amp; (74 in keys &amp;amp;&amp;amp; keys[74])){ return true; } else if ((checkKey == 'k' || checkKey == 'K') &amp;amp;&amp;amp; (75 in keys &amp;amp;&amp;amp; keys[75])){ return true; } else if ((checkKey == 'l' || checkKey == 'L') &amp;amp;&amp;amp; (76 in keys &amp;amp;&amp;amp; keys[76])){ return true; } else if ((checkKey == 'm' || checkKey == 'M') &amp;amp;&amp;amp; (77 in keys &amp;amp;&amp;amp; keys[77])){ return true; } else if ((checkKey == 'n' || checkKey == 'N') &amp;amp;&amp;amp; (78 in keys &amp;amp;&amp;amp; keys[78])){ return true; } else if ((checkKey == 'o' || checkKey == 'O') &amp;amp;&amp;amp; (79 in keys &amp;amp;&amp;amp; keys[79])){ return true; } else if ((checkKey == 'p' || checkKey == 'P') &amp;amp;&amp;amp; (80 in keys &amp;amp;&amp;amp; keys[80])){ return true; } else if ((checkKey == 'q' || checkKey == 'Q') &amp;amp;&amp;amp; (81 in keys &amp;amp;&amp;amp; keys[81])){ return true; } else if ((checkKey == 'r' || checkKey == 'R') &amp;amp;&amp;amp; (82 in keys &amp;amp;&amp;amp; keys[82])){ return true; } else if ((checkKey == 's' || checkKey == 'S') &amp;amp;&amp;amp; (83 in keys &amp;amp;&amp;amp; keys[83])){ return true; } else if ((checkKey == 't' || checkKey == 'T') &amp;amp;&amp;amp; (84 in keys &amp;amp;&amp;amp; keys[84])){ return true; } else if ((checkKey == 'u' || checkKey == 'U') &amp;amp;&amp;amp; (85 in keys &amp;amp;&amp;amp; keys[85])){ return true; } else if ((checkKey == 'v' || checkKey == 'V') &amp;amp;&amp;amp; (86 in keys &amp;amp;&amp;amp; keys[86])){ return true; } else if ((checkKey == 'w' || checkKey == 'W') &amp;amp;&amp;amp; (87 in keys &amp;amp;&amp;amp; keys[87])){ return true; } else if ((checkKey == 'x' || checkKey == 'X') &amp;amp;&amp;amp; (88 in keys &amp;amp;&amp;amp; keys[88])){ return true; } else if ((checkKey == 'y' || checkKey == 'Y') &amp;amp;&amp;amp; (89 in keys &amp;amp;&amp;amp; keys[89])){ return true; } else if ((checkKey == 'z' || checkKey == 'Z') &amp;amp;&amp;amp; (90 in keys &amp;amp;&amp;amp; keys[90])){ return true; } //numbers else if ((checkKey == '0') &amp;amp;&amp;amp; (48 in keys &amp;amp;&amp;amp; keys[48])){ return true; } else if ((checkKey == '1') &amp;amp;&amp;amp; (49 in keys &amp;amp;&amp;amp; keys[49])){ return true; } else if ((checkKey == '2') &amp;amp;&amp;amp; (50 in keys &amp;amp;&amp;amp; keys[50])){ return true; } else if ((checkKey == '3') &amp;amp;&amp;amp; (51 in keys &amp;amp;&amp;amp; keys[51])){ return true; } else if ((checkKey == '4') &amp;amp;&amp;amp; (52 in keys &amp;amp;&amp;amp; keys[52])){ return true; } else if ((checkKey == '5') &amp;amp;&amp;amp; (53 in keys &amp;amp;&amp;amp; keys[53])){ return true; } else if ((checkKey == '6') &amp;amp;&amp;amp; (54 in keys &amp;amp;&amp;amp; keys[54])){ return true; } else if ((checkKey == '7') &amp;amp;&amp;amp; (55 in keys &amp;amp;&amp;amp; keys[55])){ return true; } else if ((checkKey == '8') &amp;amp;&amp;amp; (56 in keys &amp;amp;&amp;amp; keys[56])){ return true; } else if ((checkKey == '9') &amp;amp;&amp;amp; (57 in keys &amp;amp;&amp;amp; keys[57])){ return true; } // special keys else if ((checkKey == 'left' || checkKey == 'LEFT') &amp;amp;&amp;amp; (37 in keys &amp;amp;&amp;amp; keys[37])){ return true; } else if ((checkKey == 'right' || checkKey == 'RIGHT') &amp;amp;&amp;amp; (39 in keys &amp;amp;&amp;amp; keys[39])){ return true; } else if ((checkKey == 'up' || checkKey == 'UP') &amp;amp;&amp;amp; (38 in keys &amp;amp;&amp;amp; keys[38])){ return true; } else if ((checkKey == 'down' || checkKey == 'DOWN') &amp;amp;&amp;amp; (40 in keys &amp;amp;&amp;amp; keys[40])){ return true; } else if ((checkKey == 'esc' || checkKey == 'ESC' || checkKey == 'escape' || checkKey == 'ESCAPE' ) &amp;amp;&amp;amp; (27 in keys &amp;amp;&amp;amp; keys[27])){ return true; } }</pre> </div> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#mouse-input" name="mouse-input">Mouse Input</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> It's fairly simple to add mouse input to your game; just use an eventListener for the event "mousemove" and use a function that takes the event as a parameter (in my example below, I used mouseMoved(e)), and use the e.pageX and e.pageY for the mouse's X and Y position.<br /> <br /> And for mouse clicks, just use eventListener for the "click" event, and use a function that does whatever. In the example I give, it sets the position of an image to the position of the mouse at the point it is clicked. In this case, a bullethole in the position the cursor was pointing at.<br /> <br /> Here is the code: <br /> <div style="height: 500px; overflow: auto; width: 600px;"> <pre>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; const FPS = 60; var canvas = null; var context2D = null; var cursorImg = new Image(); cursorImg.src = "images/cursorexample.png"; var bulletHoleImg = new Image(); bulletHoleImg.src = "images/bullethole.png"; var bulletHolesX = new Array(); var bulletHolesY = new Array(); for (var i=0; i&lt;50; i++) { bulletHolesX[i] = -500; bulletHolesY[i] = -500; } bulletNum = 0; window.addEventListener('mousemove', mouseMoved, true); window.addEventListener('click', clicked, true); var mouseX = 0; var mouseY = 0; window.onload = init; function init() { canvas = document.getElementById('canvas1'); context2D = canvas.getContext('2d'); setInterval(draw, 1000/FPS); } function draw() { context2D.clearRect(0, 0, canvas.width, canvas.height); for (var i=0; i&lt;50; i++) { context2D.drawImage(bulletHoleImg, bulletHolesX[i]-(bulletHoleImg.width/2), bulletHolesY[i]-(bulletHoleImg.height/2)); } context2D.drawImage(cursorImg, mouseX-(cursorImg.width/2), mouseY-(cursorImg.width/2)); } function mouseMoved(e) { mouseX = e.pageX; mouseY = e.pageY; } function clicked(e) { bulletHolesX[bulletNum] = mouseX; bulletHolesY[bulletNum] = mouseY; bulletNum++; if (bulletNum &gt; 50) { bulletNum = 0; } } &lt;/script&gt; &lt;/head&gt; &lt;body style="padding: 0px; margin: 0px;"&gt; &lt;canvas id="canvas1" width="600" height="480" style="background-color: #A9A9A9;"&gt; Browser not compatible with HTML5 canvas &lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#add-simple-game-physics" name="add-simple-game-physics">Add Simple Game Physics</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> Even the simplest physics can make a game look and feel so much better. Instead of just suddenly moving full speed to the right when you press right key, it can be that the character builds speed until they reach normal speed. It could be a case of only taking 1-2 seconds to build the speed, or it could take more like 10 seconds. It all depends on your game.<br /> And there's gravity. There needs to be a fairly realistic rate of falling towards the ground. I don't mean close to earth's gravity, I just mean it can't just fall at a constant speed towards the ground. It needs to accelerate. (Although, this does depend on the game. There may be certain instances where a constant velocity is fine)<br /> <br /> <br /> <br /> So let's start with a canvas of width 500x500. So that there will be room to move, to appreciate the physics a bit more.<br /> <blockquote> <pre>&lt;canvas height="500" id="canvas" style="background-color: darkgrey;" width="500"&gt; Browser not compatible with HTML5 canvas &lt;/canvas&gt;</pre> </blockquote> <br /> <br /> Now here's the javascript: <br /> <div style="height: 500px; overflow: auto; width: 600px;"> <blockquote> <pre>const FPS = 30; var playerPosX = 0; var playerPosY = 0; var playerVelX = 0; var playerVelY = 0; var onGround = 0; var playerImg = new Image(); playerImg.src = "http://filevaults.com/media/Slash/553481-smiley.png"; var canvas = null; var context2D = null; var keys = new Array(); window.onload = init; window.addEventListener('keydown',keyDown,true); window.addEventListener('keyup',keyUp,true); function keyDown(evt){ keys[evt.keyCode] = true; } function keyUp(evt){ keys[evt.keyCode] = false; } function init() { canvas = document.getElementById('canvas'); context2D = canvas.getContext('2d'); setInterval(draw, 1000 / FPS); } function draw() { // detect user input if ((37 in keys &amp;amp;&amp;amp; keys[37]) || (65 in keys &amp;amp;&amp;amp; keys[65])){ //left playerVelX -= 3; } if ((39 in keys &amp;amp;&amp;amp; keys[39]) || (68 in keys &amp;amp;&amp;amp; keys[68])){ //right playerVelX += 3; } if ((38 in keys &amp;amp;&amp;amp; keys[38]) || (87 in keys &amp;amp;&amp;amp; keys[87])){ //up jump(); } addPhysics(); context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.drawImage(playerImg, playerPosX, playerPosY); } function jump() { if (onGround == 1) { playerVelY -= 30; } } function addPhysics() { // because of these two lines, motion can be set using velocity variables playerPosX += playerVelX; playerPosY += playerVelY; if (playerPosY &amp;gt; canvas.height-playerImg.height) { onGround = 1; } else { onGround = 0; } // stop character from building up too much speed // this means the character can realistically accelerate and continue at normal speed if (playerVelX &amp;gt;= 10) { playerVelX = 10; } else if (playerVelX &amp;lt;= -10) { playerVelX = -10; } // friction playerVelX *= 0.85; if (playerVelX &amp;lt; 0.2 &amp;amp;&amp;amp; playerVelX &amp;gt; -0.2) { // so that it leaves it as a clean zero when it gets to a stop. playerVelX = 0; } // gravity (acceleration of the velocity towards the ground) if (onGround == 0) { playerVelY += 3; } else { playerVelY = 0; // when on ground, gravity doesn't pull you through the floor } } </pre> </blockquote> </div> Result here: <a href="http://slashgame.net/html5physics.php">http://slashgame.net/html5physics.php</a><br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#rotate-image-on-html5-canvas" name="rotate-image-on-html5-canvas">How to Rotate an Image on Canvas</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> Rotation is a tricky one to understand fully, especially for beginners. A lot of people prefer to just blindy accept the way of coding it, and other like to know what the heck they are actually coding. So I'll give the opportunity for both types of people here.<br /> <br /> Firstly, I'll put this function here for you to use, this is helpful for any kind of person, but for those of you who just want the code, you only need to take the function and read my bit on how to use it. I'll then explain how rotation works, if you're interested.<br /> <br /> Here's the function:<br /> <blockquote> <pre>function drawImg(img, pX, pY, oX, oY, w, h, rot) { context2D.save(); context2D.translate(pX+oX, pY+oY); context2D.rotate(rot * Math.PI / 180); context2D.drawImage(img, 0, 0, w, h, -(oX), -(oY), w, h); context2D.restore(); } </pre> </blockquote> <br /> <span style="font-weight: bold;">How it's used:</span><br /> img: the image object<br /> pX: the x position of the image<br /> pY: the y position of the image<br /> oX: how far across the image that the origin is<br /> oY: how far down the image that the origin is<br /> w: width of the image<br /> h: height of the image<br /> rot: angle of rotation<br /> <br /> <br /> Ok, so it's not as simple as just "rotate image". There's a lot more to it. It's more like rotating the canvas, then setting the image's orientation, then resetting the canvas.<br /> <br /> - So first it saves the canvas the way it is.<br /> - Then the translate line makes the "start" of the image at the origin you want it to spin.<br /> - It then rotates the actual canvas the amount you want the player to rotate.<br /> - Then the image is drawn, but because the start of the image has changed place, it needs to start drawing at a different place (at the origin).<br /> - It then brings the canvas back to where it was before, leaving the drawn image still showing as rotated.<br /> <br /> It took me a while to figure that out at first. I was never able to find a good explanation of how it works. I just hope this helps you readers better.<br /> Although to be honest, it isn't incredibly important that you know how it works. Just that you know how to use it. <br /> Here's an example usage of rotation with canvas: <a href="http://slashgame.net/html5gamedevexample4.php">http://slashgame.net/html5gamedevexample4.php</a><br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#use-html5-audio" name="use-html5-audio">Use HTML5 Audio</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> I'll just show HTML5 Audio being used with javascript without a canvas. Using it in canvas you just include it in the javascript like normal by calling the function that plays the sound. I very much so assume that by this point you can figure that kind of thing out yourself.<br /> The JavaScript accesses the HTML5 audio, and in effect makes an <audio> element. But it's good this way, as it's less cluttered without the tags actually being there or being created.</audio><br /> <br /> <span style="font-weight: bold;">Example:</span><br /> <blockquote> <pre>var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </pre> </blockquote> <br /> Notice how it sets the currentTime to 0 before playing. This is because you can't play the same sound object twice without moving the time back to the start again.<br /> <br /> <br /> Here is a use of the result of that:<br /> <script type="text/javascript"> var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </script> <span onclick="playSound();" onmouseover="this.style.cursor='pointer';" style="font-weight: bold;">---CLICK HERE---</span><br /> <br /> <br /> <br /> <h2> <a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#conclusion" name="conclusion">Conclusion of Tutorial</a> <span style="font-size: 11px;"><a href="http://www.blogger.com/blogger.g?blogID=5756594577450809773#contents" name="contents">(back to top)</a></span></h2> So, by now you should be able to put your wonderful imagination to use, and put your new knowledge of HTML5 game development to practice, and create something awesome.<br /> <br /> There may be some things that I haven't explained, but my hope is that I've explained enough so that you are able to figure new things out yourself. Things like complicated physics can be figured out with some Maths knowledge, and game design for the most part comes from your imagination and your ability to understand what people like in games.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com3tag:blogger.com,1999:blog-5756594577450809773.post-45410455344338052822012-11-29T10:21:00.000-08:002012-11-29T10:35:52.354-08:00SlashGame Coming BackHi guys.<br /> <br /> SlashGame has been gone for nearly a year. It's making a comeback, but it's been left in a mess.<br /> <br /> There are a lot of things not working on the site at the moment. However, the most useful part of it is still here. Check out the <a href="http://html5gamedev.blogspot.co.uk/2011/08/html5-game-development-tutorial.html">HTML5 Game Development Tutorial</a> for a single page teaching you a lot of the basics of HTML5 game development.<br /> <br /> Or if you'd prefer this kind of layout, check out the <a href="http://html5gamedev.blogspot.co.uk/2011/07/how-to-make-html5-game.html">HTML5 Game Development Guide</a>, which is a bit more extensive and is broken up into different bits.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-17800561238785070352011-12-08T20:54:00.001-08:002011-12-12T07:49:24.915-08:00Bouncy Jump - Game by SlashGame up for TestingOur first official game has been under slow development and has been linked on the slashgame.net homepage for a while now.<br /> <br /> I've decided to put it up for beta testing now, as I feel it's at a point where it actually is a game. There's many planned features still to be implemented, and some bugs to fix, but it's still a playable game.<br /> Also note that current artwork is mostly temporary. A lot of the art will change.<br /> <br /> Any feedback can be put as a reply to this blog post or we're on twitter at <a href="http://twitter.com/#%21/SlashGame">@SlashGame</a>.<br /> <br /> <a href="http://slashgame.net/bouncyjump.php"><img src="http://slashgame.net/images/bouncyjumpscreenie.jpg" /></a> <br /> <br /> Right now, it's compatible with recent versions of <b>Mozilla Firefox, Google Chrome, Opera</b> and <b>Safari. </b><i>Internet Explorer compatibility will come later</i>, and possibly smartphone compatibility.<br />Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com1tag:blogger.com,1999:blog-5756594577450809773.post-87025797596004539672011-09-04T10:22:00.000-07:002013-01-12T20:42:21.530-08:00How to Make Money From an HTML5 Game (Adsense, Merchandise, etc.)Making a game is only half the battle if you are looking to make money from your creations. Once you've made the game, you will want to think of ways to make money from it.<br /> A lot of what I'm going to go into in this post applies to any kind of game, although I'm using <b>HTML5 games</b> as the focused example.<br /> <br /> One way would be having a donate button, but personally I like to stay away from donate buttons, because it feels a bit like begging. I rather make money through giving a service to people.<br /> There are three main services you can provide; merchandise, advertising and in-game purchases.<br /> <br /> <b>Merchandise:</b> I haven't really focused on selling merchandise much, I've only set up a small test store at CafePress, however I may focus more on that in the future.<br /> Setting up a CafePress store is pretty simple, you just sign up, and pick an item, and add your artwork to it. (Note that it needs to be your own artwork, copyrighted materials is a huge no-no)<br /> <br /> <b>Advertising:</b> There are many ways to go about this. The most popular way to advertise on a web page is to use Google Adsense. You just set up an account, get your site approved, then add a little block of code which generates adverts from the sites that people using adwords have created. Adwords is where people put up their sites looking for traffic, Adsense is where people put those ads on their website to give them traffic and get money in return (which the Adwords people are paying).<br /> There are many other services similar to Adsense, but none are close to being as profitable. The only case that I would suggest you use a service other than Adsense is if you have pornographic material, or something else which goes against Google's terms.<br /> There is one other way, which takes a lot more effort, although has potential to make more money. Making deals with people individually. This means you directly talk to someone to make a deal that you give them traffic for whatever price. The deal would specify how the traffic is given (text link/banner image/whatever).<br /> <br /> <b>Where to put the ads?</b> You could put the ads around the page that the HTML5, Flash or Java game is on (this requires the game to not be full screen). The page this article is written on has Adsense ads around the place, that is an example of where ads can go, and same applies to pages HTML5 games etc are on too.<br /> Another place they can go is in a pause menu of a HTML5 game. This works for full-screen games and non-full-screen games. What you'd do for that is, put the ad's code inside a <i>&lt;div id="whatever" style="display: none;"&gt;&lt;/div&gt;</i>. This will load the ad, but it will be invisible. In the game's code, you just have to make it that when the game is paused, it makes it appear.<br /> Example:<br /> <i>document.getElementById('whatever').style.display="";</i><br /> Then when the game is unpaused, use:<br /> <i>document.getElementById('whatever').style.display="none";</i><br /> <a href="http://slashgame.net/adsenseexample.php">Here is an example of adsense in a pause menu of a canvas game</a><br /> <br /> <br /> <b>How much money do the ads make?</b> This is a pretty big question. It is dependent on so many different things. It would depend on what ads actually show up, which depends on both your target audience, and the topic of the game. It also depends on how much traffic you get to your site. You need hundreds to thousands of visits per day to make any amount of money. And a huge problem is that people don't trust ads any more. The ad services that aren't Adsense have put up so many scammy ads that it gave the reputation of internet ads so much shit. However, Adsense ads are very trustworthy and they very often provide quality and interesting links.<br /> <br /> <br /> <b>In-game Purchases:</b> Depending on what kind of game it is, you could have things like purchasable clothes for your character, or vehicles, etc.<br /> Firstly, you'll need to set up a database to hold usernames, encrypted passwords and what purchases have been made by whom. When you have the database set up, you will be able to have a php script that deals with it, and you can then use AJAX in your HTML5 game's JavaScript which runs the script, putting in parameters like "username" and "itemtobuy".<br /> From there it will be able to access something like PayPal to accept a payment. Then, in your game you will be able to have it check for what purchases have been made, and it can decide what things to show up.<br /> You could also use a service specifically for In-App purchases. Such as Google In-App purchases.<br /> <br /> <br /> It is a lot harder to make money than people think. And the best way to make sure you do make money, is to <b>make sure your game will appeal to people.</b> A lot of people have the wrong idea of what kind of games will appeal to people. Too many people think it just needs to be "cool", but it actually doesn't.<br /> It needs to be addictive. And to do that, it either needs to be simple enough to just lazily do without too much thought, or complex enough that it fucks you in the mind and you just need to keep trying until you get it right.<br /> There's a whole lot more to it than that, but I'm just giving you some food for thought.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com1tag:blogger.com,1999:blog-5756594577450809773.post-52488403799078395942011-08-20T07:57:00.000-07:002011-09-12T08:03:05.798-07:00Introduction to JavaScriptIt just occurred to me that I've been going on about how to make a HTML5 game, while there's people who want to make a game who haven't even started with programming/scripting at all yet.<br/> Before you get started with games development, you're going to want to have a little bit of experience with the coding first.<br/> <br/> So, what I'll do here is introduce you to the basics of JavaScript. I'll go into enough that will allow you to start learning to make HTML5 games.<br/> <br/> <br/> <b>JavaScript is not Java</b>. This is something too many people get confused with. JavaScript is a scripting language, whereas Java is a compiled language. JavaScript is very loosely based off of the Java language.<br/> And when I say that Java is a compiled language, what I mean by that is, once you write the code, you have to run a compiler to then get the file that you actually run as the program. Scripting languages on the other hand are run line-by-line without compiling the whole code into a file. This means all you have to do is write the code and run the program. (In JavaScript's case, you just write the code then open the web page, and it's running)<br/> <br/> <br/> <br/> Ok so that's what JavaScript is, now let's get into how to write code.<br/> <b>Here is a little snippet of code, I'll then explain it:</b> <pre><blockquote> &lt;script type="text/javascript"&gt; &nbsp;&nbsp;var string = "Hello"; &nbsp;&nbsp;function writeSomeText() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.write(string+" World"); &nbsp;&nbsp;} &lt;/script&gt; &lt;a onmouseover="this.style.cursor='pointer';" onclick="writeSomeText();"&gt; CLICK HERE &lt;/a&gt; </blockquote></pre> <br/> <b>So, you see the &lt;script&gt; HTML tags. That is where the JavaScript goes in.</b><br/> The first line of JavaScript there is <i>var string = "Hello";</i><br/> That line creates a <i>variable</i> called <i>string</i>, and gives it a value of "Hello". The semi-colon at the end of the line is part of the JavaScript syntax, it splits the lines up so that when the code is run, it knows how to execute it.<br/> JavaScript is quite good with variables, because it decides itself what type a variable is. In other languages, you may have to tell it what type it is, but JavaScript automatically knows that it is a string value. And if we gave the variable a value of <i>500</i> instead of <i>"Hello"</i>, it would have known that it was a numeric value. However, <i>"500"</i> is counted as a string.<br/> <br/> <b>Now, the next block of code is creating a function.</b><br/> To make a function, you do <i>function functionName(params) { functionCode }</i><br/> In my example, I didn't give it any params (parameters), but they are basically for the purpose of passing in a variable for the function to use when you call the function. I'll get to function calling later.<br/> The function code in my example writes text to the document screen. <i>document</i> is an object which holds a function called write(). It takes a parameter which the function then takes and writes to the screen.<br/> In my example, it takes the <i>string</i> variable that we set outside the function, and attaches " World" to it. It joins up to make a string value of "Hello World", but does not change the value of the variable.<br/> <br/> <b>Function calling:</b> Outside the &lt;script&gt; tags, we see an &lt;a&gt; element. Since there is no href attribute given, I had to manually add the code that makes the mouse cursor change to the pointer when you mouse over the link. This was done with a line of JavaScript triggered by an event. The event was onmouseover.<br/> The other event I used was onclick, which I used to trigger a line of JavaScript which called our writeSomeText() function. This is where the JavaScript calls up the function with that name and executes the code inside the function.<br/> <br/> <br/> So, that's my Intro to JavaScript. It's purpose is to show you the syntax, and hopefully allow you to better understand my HTML5 game development guides.<br/> You can move onto this <a href="http://html5gamedev.blogspot.com/2011/08/html5-game-development-tutorial.html">Full HTML5 Game Development Tutorial</a> if you want.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-14587403933921415222011-07-31T16:32:00.001-07:002011-07-31T17:22:39.097-07:00Another Example Site Using HTML5 StuffThis site has a cool use of HTML5. You'll see what I'm talking about when you visit the site. It doesn't work so well on Internet Explorer (what a surprise).<br/> Here you go: <a href="http://whenyouseeityoullshitbricks.com/">When you see it you'll shit bricks</a>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com3tag:blogger.com,1999:blog-5756594577450809773.post-37459257534157117382011-07-17T09:20:00.000-07:002011-07-17T09:28:11.841-07:00Snippet ListI'll be writing a bunch of snippets for you guys to use as you please. I'm sure you will find a lot of use with them for making games, and probably other stuff too.<br/> <br/> I'll keep this list updated when I think of more stuff to put in it. And I'm open to suggestions, if you have any, you can contact me via @SlashGame on twitter (By the way, I'm more likely to see a mention than a Private Message).<br/> <br/> <br/> <br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-draw-image-with-rotation.html">Draw Image with Rotation</a><br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-draw-text-to-canvas.html">Draw Text to Canvas</a><br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-play-sound-html5-audio.html">Play Sound (HTML5 Audio)</a><br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-mouse-input.html">Mouse Input</a><br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-keyboard-input.html">Keyboard Input</a><br/> <a href="http://html5gamedev.blogspot.com/2011/07/snippet-ajax.html">AJAX</a><br/>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com1tag:blogger.com,1999:blog-5756594577450809773.post-27225347306425350862011-07-17T08:56:00.000-07:002011-09-12T12:48:20.214-07:00Snippet - AJAXThis is useful for many things with HTML5 game development. You could use it as a means to pass a user's score to a php script which adds it to a database.<br/> Or you could do it the other way round, and make it get the highscores from the database, and the function would return the script's response, which could be used to then write the scores on the canvas, or wherever.<br/> <br/> <br/> <span style="font-weight:bold;">For Example:</span><br/> <span style="font-weight:bold;">ajaxCall("addScore.php?username=Slash&score=500");</span><br/> <br/> That would have called the php script in addScore.php, and passed in the username and score parameters.<br/> The php script could have simply been written to take those parameters with $_GET['username'] and $_GET['score'], and insert the values into a MySQL database.<br/> <br/> <br/> This is just a snippet. I might later make a full tutorial on how to keep a scoreboard. But this function <span style="font-weight:bold;">will allow you to call any php script with AJAX and use it's responseText if necessary.</span><br/> <br/> <br/> <span style="font-weight:bold;">The JavaScript Code:</span> <blockquote><pre> function ajaxCall(scriptURL) { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { return xmlhttp.responseText; } } xmlhttp.open("GET", scriptURL, true); xmlhttp.send(); } </pre></blockquote> <br/> <br/> <b>Example PHP Script:</b> <div style="overflow: auto; height: 300px; width: 600px;"> <blockquote><pre> // set up connection $con = mysql_connect("localhost", "DBuser","DBpass") or die(mysql_error()); mysql_select_db("DBname", $con) or die(mysql_error()); // Get params from the url used $username = mysql_real_escape_string($_GET['username']); $score = mysql_real_escape_string($_GET['score']); // insert the score into the scores table for the user $query = "INSERT INTO scores (username, score) VALUES ('" . $username . "', '" . $score . "')"; mysql_query($query, $con) or die(mysql_error()); </pre></blockquote> </div> <br/> This example PHP script will work for the stuff I mentioned earlier, calling the JavaScript function with something like <b>ajaxCall("addScore.php?username=Slash&score=500");</b><br/> <br/> Note that this is an example to show what goes on with AJAX. However, in a professional situation, PDO would be used rather than MySQL, and jQuery would often be used in the JavaScript. Libraries are used a lot because they are already optimized code and you also have less code to write yourself.Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com2tag:blogger.com,1999:blog-5756594577450809773.post-37035886507834305852011-07-17T08:48:00.000-07:002011-09-12T08:05:04.308-07:00Snippet - Keyboard Input for HTML5 Games<span style="font-weight:bold;">Examples of use:</span><br/> If you wanted to check if the A key is pressed down: <pre>if (isKeyPressed('a')==true) { /* do whatever */ }</pre> If you wanted to check for the left arrow key being pressed: <pre>isKeyPressed('left')</pre> For escape key: <pre>isKeyPressed('esc')</pre> <br/> <br/> <br/> <span style="font-weight:bold;">The Code:</span> <div style="overflow: auto; height: 500px; width: 600px;"><pre> window.addEventListener('keydown',keyPressDown,true); window.addEventListener('keyup',keyPressUp,true); function keyPressDown(evt){ keys[evt.keyCode] = true; } function keyPressUp(evt){ keys[evt.keyCode] = false; } function isKeyPressed(checkKey) { // alphabet if ((checkKey == 'a' || checkKey == 'A') && (65 in keys && keys[65])){ return true; } else if ((checkKey == 'b' || checkKey == 'B') && (66 in keys && keys[66])){ return true; } else if ((checkKey == 'c' || checkKey == 'C') && (67 in keys && keys[67])){ return true; } else if ((checkKey == 'd' || checkKey == 'D') && (68 in keys && keys[68])){ return true; } else if ((checkKey == 'e' || checkKey == 'E') && (69 in keys && keys[69])){ return true; } else if ((checkKey == 'f' || checkKey == 'F') && (70 in keys && keys[70])){ return true; } else if ((checkKey == 'g' || checkKey == 'G') && (71 in keys && keys[71])){ return true; } else if ((checkKey == 'h' || checkKey == 'H') && (72 in keys && keys[72])){ return true; } else if ((checkKey == 'i' || checkKey == 'I') && (73 in keys && keys[73])){ return true; } else if ((checkKey == 'j' || checkKey == 'J') && (74 in keys && keys[74])){ return true; } else if ((checkKey == 'k' || checkKey == 'K') && (75 in keys && keys[75])){ return true; } else if ((checkKey == 'l' || checkKey == 'L') && (76 in keys && keys[76])){ return true; } else if ((checkKey == 'm' || checkKey == 'M') && (77 in keys && keys[77])){ return true; } else if ((checkKey == 'n' || checkKey == 'N') && (78 in keys && keys[78])){ return true; } else if ((checkKey == 'o' || checkKey == 'O') && (79 in keys && keys[79])){ return true; } else if ((checkKey == 'p' || checkKey == 'P') && (80 in keys && keys[80])){ return true; } else if ((checkKey == 'q' || checkKey == 'Q') && (81 in keys && keys[81])){ return true; } else if ((checkKey == 'r' || checkKey == 'R') && (82 in keys && keys[82])){ return true; } else if ((checkKey == 's' || checkKey == 'S') && (83 in keys && keys[83])){ return true; } else if ((checkKey == 't' || checkKey == 'T') && (84 in keys && keys[84])){ return true; } else if ((checkKey == 'u' || checkKey == 'U') && (85 in keys && keys[85])){ return true; } else if ((checkKey == 'v' || checkKey == 'V') && (86 in keys && keys[86])){ return true; } else if ((checkKey == 'w' || checkKey == 'W') && (87 in keys && keys[87])){ return true; } else if ((checkKey == 'x' || checkKey == 'X') && (88 in keys && keys[88])){ return true; } else if ((checkKey == 'y' || checkKey == 'Y') && (89 in keys && keys[89])){ return true; } else if ((checkKey == 'z' || checkKey == 'Z') && (90 in keys && keys[90])){ return true; } //numbers else if ((checkKey == '0') && (48 in keys && keys[48])){ return true; } else if ((checkKey == '1') && (49 in keys && keys[49])){ return true; } else if ((checkKey == '2') && (50 in keys && keys[50])){ return true; } else if ((checkKey == '3') && (51 in keys && keys[51])){ return true; } else if ((checkKey == '4') && (52 in keys && keys[52])){ return true; } else if ((checkKey == '5') && (53 in keys && keys[53])){ return true; } else if ((checkKey == '6') && (54 in keys && keys[54])){ return true; } else if ((checkKey == '7') && (55 in keys && keys[55])){ return true; } else if ((checkKey == '8') && (56 in keys && keys[56])){ return true; } else if ((checkKey == '9') && (57 in keys && keys[57])){ return true; } // special keys else if ((checkKey == 'left' || checkKey == 'LEFT') && (37 in keys && keys[37])){ return true; } else if ((checkKey == 'right' || checkKey == 'RIGHT') && (39 in keys && keys[39])){ return true; } else if ((checkKey == 'up' || checkKey == 'UP') && (38 in keys && keys[38])){ return true; } else if ((checkKey == 'down' || checkKey == 'DOWN') && (40 in keys && keys[40])){ return true; } else if ((checkKey == 'esc' || checkKey == 'ESC' || checkKey == 'escape' || checkKey == 'ESCAPE' ) && (27 in keys && keys[27])){ return true; } } </pre> </div>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com1tag:blogger.com,1999:blog-5756594577450809773.post-79081791547393716882011-07-16T13:17:00.000-07:002011-09-12T08:05:21.620-07:00Snippet - Mouse Input for HTML5 GamesThe following code can all be copy-pasted to your javascript and used how you wish.<br/> Keep in mind the clicked() function is empty, because you chose what goes in there if you need to use it. The rest simply set variables that can be used later in the code. (i.e. mouseX, mouseY and ismousedown)<br/> <br/> <br/> <blockquote><pre> var mouseX = 0; var mouseY = 0; window.addEventListener('mousemove', mouseMoved, true); function mouseMoved(e) { mouseX = e.pageX; mouseY = e.pageY; } // ^put that in your code and you will be able // to use mouseX and mouseY variables anywhere in that code. window.addEventListener('click', clicked, true); function clicked(e) { // you can put whatever you want in here // for example, you could use the mouseX and mouseY variables // to place a bullet-hole image where the mouse was when clicked } var ismousedown = 0; window.onmousedown = function(e) { ismousedown = 1; } window.onmouseup = function(e) { ismousedown = 0; } // ^with this code, you can now check the ismousedown variables // at any time to check if the mouse is being clicked // useful for mouse dragging or for holding the "shoot button", etc. </pre></blockquote>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-89187500863529184712011-07-16T12:58:00.000-07:002011-07-16T13:06:27.682-07:00Snippet - Play Sound (HTML5 Audio)Very simple set up and function:<br/> <blockquote><pre> var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </pre></blockquote><br/> <br/> <script type="text/javascript"> var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </script> Example usage: <span style="font-weight:bold;" onmouseover="this.style.cursor='pointer';" onclick="playSound();">---CLICK HERE---</span> <br/> <br/> Taken from <a href="http://html5gamedev.blogspot.com/2011/06/quick-tip-html5-audio-for-game.html">HTML5 Audio Quick Tip</a>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-89199201857551572652011-07-16T09:57:00.000-07:002011-09-12T08:05:38.518-07:00Snippet - Draw Text to HTML5 CanvasThis function draws text to the canvas with a specified position, color and font. <blockquote><pre> function drawCanvasText(txt, pX, pY, clr, fnt) { context2D.fillStyle = clr; // color context2D.font = fnt; // font context2D.fillText(txt, pX, pY); // text at position X, Y } </pre></blockquote> <br/> <br/> <b>Example Usage:</b><br/> <blockquote><pre>drawCanvasText("drawing text yas", 50, 50, "black", "bold 30px sans-serif");</pre></blockquote>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-84007301931874920072011-07-16T09:45:00.000-07:002011-09-12T08:06:21.641-07:00Snippet - Draw Image with Rotation (HTML5 Games)This is a function that draws an image with specified rotation.<br/> (I first posted this function in the <a href="http://html5gamedev.blogspot.com/2011/05/rotate-image-on-canvas.html">Rotate Image on Canvas</a> tutorial.<br/> <br/> <blockquote><pre>function drawImg(img, pX, pY, oX, oY, w, h, rot) { context2D.save(); context2D.translate(pX+oX, pY+oY); context2D.rotate(rot * Math.PI / 180); context2D.drawImage(img, 0, 0, w, h, -(oX), -(oY), w, h); context2D.restore(); } </pre></blockquote><br/> <span style="font-weight:bold;">Note:</span><br/> img: the image object<br/> pX: the x position of the image<br/> pY: the y position of the image<br/> oX: how far across the image that the origin is<br/> oY: how far down the image that the origin is<br/> w: width of the image<br/> h: height of the image<br/> rot: angle of rotation<br/>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-80366636620873433532011-06-27T13:07:00.000-07:002013-01-21T08:42:46.153-08:00User Input - Mouse Input for HTML5 Games<b>Note: This page has broken links and non-existant images. The code is correct, but you won't be able to use the exact code I give. Use your own images or learn from the code.<br/> Note to self: Update this page :P</b><br/> <br/> <br/> A while ago I showed you guys how to do keyboard input <a href="http://html5gamedev.blogspot.com/2011/05/game-loop.html">here</a> and <a href="http://html5gamedev.blogspot.com/2011/05/user-input-make-it-easier-on-yourself.html">here</a>. Now I'll show you how to do mouse input.<br/> <br/> It's fairly simple, just use an eventListener for the event "mousemove" and use a function that takes the event as a parameter, and use the e.pageX and e.pageY for the mouse's X and Y position.<br/> <br/> And for mouse clicks, just use eventListener for the "click" event, and use a function that does whatever. In the example I give, it sets the position of an image to the position of the mouse at the point it is clicked. In this case, a bullethole in the position the cursor was pointing at.<br/> <br/> <br/> Here is the code: <div style="overflow: auto; height: 500px; width: 600px;"><pre> &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; const FPS = 60; var canvas = null; var context2D = null; var cursorImg = new Image(); cursorImg.src = "images/cursorexample.png"; var bulletHoleImg = new Image(); bulletHoleImg.src = "images/bullethole.png"; var bulletHolesX = new Array(); var bulletHolesY = new Array(); for (var i=0; i<50; i++) { bulletHolesX[i] = -500; bulletHolesY[i] = -500; } bulletNum = 0; window.addEventListener('mousemove', mouseMoved, true); window.addEventListener('click', clicked, true); var mouseX = 0; var mouseY = 0; window.onload = init; function init() { canvas = document.getElementById('canvas1'); context2D = canvas.getContext('2d'); setInterval(draw, 1000/FPS); } function draw() { context2D.clearRect(0, 0, canvas.width, canvas.height); for (var i=0; i<50; i++) { context2D.drawImage(bulletHoleImg, bulletHolesX[i]-(bulletHoleImg.width/2), bulletHolesY[i]-(bulletHoleImg.height/2)); } context2D.drawImage(cursorImg, mouseX-(cursorImg.width/2), mouseY-(cursorImg.width/2)); } function mouseMoved(e) { mouseX = e.pageX; mouseY = e.pageY; } function clicked(e) { bulletHolesX[bulletNum] = mouseX; bulletHolesY[bulletNum] = mouseY; bulletNum++; if (bulletNum > 50) { bulletNum = 0; } } &lt;/script&gt; &lt;/head&gt; &lt;body style="padding: 0px; margin: 0px;"&gt; &lt;canvas id="canvas1" width="600" height="480" style="background-color: #A9A9A9;"&gt; Browser not compatible with HTML5 canvas &lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </pre></div> <br/> <br/> Here is the result: <a href="http://slashgame.net/mouseinput.php">here</a>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-40300555345488570732011-06-20T15:21:00.000-07:002013-01-21T08:53:50.539-08:00Quick Tip - HTML5 Audio for Game<b>Note: Audio file used in this page is non-existant. Must update this page soon.</b> <br /> <br /> I'll just show HTML5 Audio being used with javascript without a canvas. Using it in canvas you just include it in the javascript like normal by calling the function that plays the sound.<br /> The JavaScript accesses the HTML5 audio, and in effect makes an &lt;audio&gt; element. But it's good this way, as it's less cluttered without the tags actually being there or being created. <br /> <br /> <span style="font-weight: bold;">Example:</span> <br /> <blockquote> <pre>var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </pre> </blockquote> <br /> Notice how it sets the currentTime to 0 before playing. This is because you can't play the same sound object twice without moving the time back to the start again. <br /> <br /> Here is a use of the result of that:<br /> <script type="text/javascript"> var boingSound = new Audio("http://slashgame.net/boing.wav"); function playSound() { boingSound.currentTime = 0; boingSound.play(); } </script> <span onclick="playSound();" onmouseover="this.style.cursor='pointer';" style="font-weight: bold;">---CLICK HERE---</span>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0tag:blogger.com,1999:blog-5756594577450809773.post-2482490509001650592011-06-19T13:16:00.000-07:002013-01-21T08:37:27.108-08:00Quick Tip - fillText JavaScript Function - HUD<blockquote> <pre>context2D.fillStyle = "white"; context2D.font = 'bold 30px sans-serif'; context2D.fillText("POINTS: "+numOfPoints, canvas.width-200, 30); </pre> </blockquote> That right there is an example of drawing text to the canvas. It writes it on the top right of the canvas. That particular example is what would serve as the HUD in a game.<br /> <br /> <br /> Here it is in practise:<br /> (you get points for moving right and left)<br /> <canvas height="200" id="canvas332872" style="background-color: darkgrey;" width="500"> <b>Browser not compatible.</b><br /> Recent versions of Firefox, Opera, Google Chrome and Safari work for this game.<br /> If you are using Internet Explorer; Stop using it immediately before you die of idiocy. </canvas> <script type="text/javascript"> const FPS332872 = 30; var playerPosX332872 = 0; var playerPosY332872 = 0; var numOfPoints = 0; var playerImg332872 = new Image(); playerImg332872.src = "http://i.imgur.com/nEYjaIe.png"; var canvas332872 = null; var context2D332872 = null; var keys332872 = new Array(); window.onload = init332872; window.addEventListener('keydown',keyDown332872,true); window.addEventListener('keyup',keyUp332872,true); function keyDown332872(evt){ keys332872[evt.keyCode] = true; } function keyUp332872(evt){ keys332872[evt.keyCode] = false; } function init332872() { canvas332872 = document.getElementById('canvas332872'); context2D332872 = canvas332872.getContext('2d'); setInterval(draw332872, 1000 / FPS332872); } function draw332872() { if ((37 in keys332872 && keys332872[37]) || (65 in keys332872 && keys332872[65])){ //left playerPosX332872 -= 3; numOfPoints += 0.1; } if ((39 in keys332872 && keys332872[39]) || (68 in keys332872 && keys332872[68])){ //right playerPosX332872 += 3; numOfPoints += 0.1; } context2D332872.clearRect(0, 0, canvas332872.width, canvas332872.height); context2D332872.drawImage(playerImg332872, playerPosX332872, playerPosY332872); context2D332872.fillStyle = "white"; context2D332872.font = 'bold 30px sans-serif'; context2D332872.fillText("POINTS: "+Math.floor(numOfPoints), canvas332872.width-200, 30); } </script>Stephenhttp://www.blogger.com/profile/00219053447967835585noreply@blogger.com0