Showing posts with label HTML5. Show all posts

HTML5 Game Development Tutorial 27 - Canvas buttons and start screen

Posted by Unknown on 6:27 PM 0 comments

HTML5 Game Development Tutorial 27 - Canvas buttons and start screen

Tag - html

Posted by Unknown on 3:01 AM 0 comments

Tag - html

Now we go to our first "tag". * The html tag - the tag that says to computers that what it contains is html.

With a couple of important exceptions (which we will get into later) all tags have to be opened and closed. Take a look at the code to the right. The opening tag is:<html>. The closing tag is </html> – the difference being the "/" in the closing tag.

Tags are containers. The html tag indicates that everything between <html> and</html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.

Everything between the opening tag and closing tag are inside that tag and therefore have the attributes that tag gives them. Those attributes can be modified. For example in this site I have changed the default color (black) for the </html>tag to dark blue.

Inside the <html> tag are two other important tags:: the <head> tag; the <body> tag

First let's take a look at the <head> tag.

HTML5 Canvas

Posted by Unknown on 5:15 AM 0 comments

HTML5 Canvas

Chapter 1 Introduction to HTML5 Canvas
1. The Basic HTML Page
2. Basic HTML We Will Use in This Book
3. The Document Object Model (DOM) and Canvas
4. JavaScript and Canvas
5. HTML5 Canvas “Hello World!”
6. Debugging with Console.log
7. The 2D Context and the Current State
8. The HTML5 Canvas Object
9. Another Example: Guess The Letter
10. What’s Next
Chapter 2 Drawing on the Canvas
1. The Basic File Setup for This Chapter
2. The Basic Rectangle Shape
3. The Canvas State
4. Using Paths to Create Lines
5. Advanced Path Methods
6. Compositing on the Canvas
7. Simple Canvas Transformations
8. Filling Objects with Colors and Gradients
9. Filling Shapes with Patterns
10. Creating Shadows on Canvas Shapes
11. What’s Next
Chapter 3 The HTML5 Canvas Text API
1. Displaying Basic Text
2. Setting the Text Font
3. Text and the Canvas Context
4. Text with Gradients and Patterns
5. Width, Height, Scale, and toDataURL() Revisited
6. Final Version of Text Arranger
7. What’s Next
Chapter 4 Images on the Canvas
1. The Basic File Setup for This Chapter
2. Image Basics
3. Simple Cell-Based Sprite Animation
4. Advanced Cell-Based Animation
5. Applying Rotation Transformations to an Image
6. Creating a Grid of Tiles
7. Zooming and Panning an Image
8. Pixel Manipulation
9. Copying from One Canvas to Another
10. What’s Next
Chapter 5 Math, Physics, and Animation
1. Moving in a Straight Line
2. Bouncing Off Walls
3. Curve and Circular Movement
4. Simple Gravity, Elasticity, and Friction
5. Easing
6. What’s Next?
Chapter 6 Mixing HTML5 Video and Canvas
1. HTML5 Video Support
2. Converting Video Formats
3. Basic HTML5 Video Implementation
4. Preloading Video in JavaScript
5. Video and the Canvas
6. Video on the Canvas Examples
7. Animation Revisited: Moving Videos
8. What’s Next?
Chapter 7 Working with Audio
1. The Basic <audio> Tag
2. Audio Formats
3. Audio Tag Properties, Functions, and Events
4. Playing a Sound with No Audio Tag
5. Creating a Canvas Audio Player
6. Case Study in Audio: Space Raiders Game
7. What’s Next
Chapter 8 Canvas Game Essentials
1. Why Games in HTML5?
2. Our Basic Game HTML5 File
3. Our Game’s Design
4. Game Graphics: Drawing with Paths
5. Animating on the Canvas
6. Applying Transformations to Game Graphics
7. Game Graphic Transformations
8. Game Object Physics and Animation
9. A Basic Game Framework
10. Putting It All Together
11. The player Object
12. Geo Blaster Game Algorithms
13. The Geo Blaster Basic Full Source
14. Rock Object Prototype
15. What’s Next
Chapter 9 Combining Bitmaps and Sound
1. Geo Blaster Extended
2. Creating a Dynamic Tile Sheet at Runtime
3. A Simple Tile-Based Game
4. What’s Next
Chapter 10 Mobilizing Games with PhoneGap
1. Going Mobile!
2. Creating the iOS Application with PhoneGap
3. Beyond the Canvas
4. What’s Next
Chapter 11 Further Explorations
1. 3D with WebGL
2. Multiplayer Applications with ElectroServer 5
3. Conclusion
  
  Description:
  No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already. HTML5 is jam-packed with features, and there's a lot to learn. This book gets you started with the Canvas element, perhaps HTML5's most exciting feature. Learn how to build interactive multimedia applications using this element to draw, render text, manipulate images, and create animation.
  
  Whether you currently use Flash, Silverlight, or just HTML and JavaScript, you'll quickly pick up the basics. Practical examples show you how to create various games and entertainment applications with Canvas as you learn. Gain valuable experience with HTML5, and discover why leading application developers rave about this specification as the future of truly innovative web development.
  
  Create and modify 2D drawings, text, and bitmap images
  
  Incorporate and manipulate video, and add audio
  
  Build a basic framework for creating a variety of games on Canvas
  
  Use bitmaps and tile sheets to develop animated game graphics
  
  Go mobile: port Canvas applications to iPhone with PhoneGap
  
  Explore ways to use Canvas for 3D and multiplayer game applications

HTML5 Games Most Wanted Build the Best HTML5 Games

Posted by Unknown on 5:12 AM 0 comments

HTML5 Games Most Wanted

Build the Best HTML5 Games

HTML5 Games Most Wanted gathers the top HTML5 games developers and reveals the passion they all share for creating and coding great games. You'll learn programming tips, tricks, and optimization techniques alongside real-world code examples that you can use in your own projects. You won't just make games—you'll make great games.

The book is packed full of JavaScript, HTML5, WebGL, and CSS3 code, showing you how these fantastic games were built and passing on the skills you'll need to create your own great games. Whether you're a coding expert looking for secrets to push your games further, or a beginner looking for inspiration and a solid game to build on and experiment with, HTML5 Games Most Wanted is for you. Topics and games covered include building complexity from simplicity in A to B, how to create, save, and load game levels in Marble Run, creating fast 3D action games like Cycleblob, entity interpolation from Snowball Fight, trait-based gaming in Grave Danger, the advanced use of WebGL from the game Bar Fight, tips on combining the entangled web of HTML5 technologies brilliantly shown in Far7, the holy grail of making a unique game like Z-Type, and how to build split-screen games as in the addictive Robots Are People Too.

What you’ll learn

How to create fantastic games using HTML5
How to add 3D to your games with WebGL
How to create multiplayer games
How to build a level designer for your game

Who this book is for

Game developers creating amazing games that will work across multiple devices using the HTML5 suite of technologies.

Top 5 Best Practices for Building HTML5 Games, In Action!

Posted by Unknown on 5:06 AM 0 comments

Top 5 Best Practices for Building HTML5 Games, In Action!

HTML5 is great because it’s versatile—it’s not specific to a single use case. More important, HTML5 is ubiquitous. It’s on your PC, your phone, your slate device—for all I know, it could even be on your kitchen appliances.

Take these two properties of HTML5—versatility and ubiquity—and it should become pretty clear why so many developers are inspired by it. And, as the proverb goes, “When developers are inspired, they usually write games.” (Okay, maybe I just made up.)

Fortunately, deep-dive articles on HTML5 game development are now widely available. Instead, I’d like to give you an overview of things you should consider before you write a game using HTML5 and while you’re working on it.

What will you learn in this article? I’ll cover HTML5 game development frameworks, how you can reach more people by supporting smartphones and slate devices, how you should go about managing your in-game state, how to deal with performance issues, and how to make the most of the platform that is your browser.

So without further ado, here are the top 5 best practices for building HTML5 Games, in action! (“in action” added for dramatic effect).

Best practice #1: Use a framework

Writing simple games in HTML5 is easy, but as you up the ante, you need to do certain things to make sure that your game runs smoothly.

For example, when you use a lot of images, sound effects, and other resources, it will take some time for your browser to download it all from your web server. You’re in for a surprise if you don’t take this into account when writing your game. Because images and sound files are loaded asynchronously, your JavaScript code will start executing before all of your resources have been loaded. This often results in “popping” (images appearing out of the blue), and in sound effects not playing when they should. A good fix for this is to create a preloader that defers script execution until all resources have been downloaded.

Another problem you’ll likely run into is that different machines and/or browsers will run your game at different speeds. While there is nothing you can do about that, you should still make sure that animation and movement speeds are independent of the frame rate your game is running at.

Essentially, there’s a LOT of boilerplate code that every game needs in order to function properly.Fortunately, you don’t have to write all of this code yourself. There are now a variety of frameworks that allow you to focus on your game logic without having to worry about all the little (and big) things necessary to make your game run smoothly.

The only caveat with using a framework is that there are so many to choose from. Frameworks likeImpactJS for example are designed to help with almost every aspect of the game development process, while frameworks like EaselJS focus primarily on the graphics side of things. In the end, it’s up to you to pick the framework that you are most comfortable with. This may seem like a no-brainer, but in the JavaScript world, choosing a framework often implies opting into a particular style of programming.


ig.module( 
    'monster' 
)
.requires(
    'impact.game',
)
.defines(function(){
 
Monster = ig.Entity.extend({
    eyes: 42
});
 
});

A good example of this is ImpactJS, which not only provides abstractions for displaying graphics or playing sound effects but also introduces its own object and inheritance model as illustrated above.

Ascend Arcade delivered three games in three months using the ImpactJS framework.

Although a lot of HTML5 games now rely on some form of framework, many developers still go down the rocky road of trying to do everything themselves. While this might be a great learning experience, if you want to get things done in a reasonable amount of time, using frameworks is definitely the way to go. A good example of this is the great work of Ascended Arcade who managed to release three very enjoyable (and somewhat acclaimed) games in only three months using the ImpactJS framework.

Best practice #2: Consider small- and touch-screen devices

Maybe one of the most persuasive selling points of HTML5 is that it works on desktop PCs, laptop computers, slates and even smartphones (if you haven’t seen IE9 running on Windows Phone 7 Mango,check out this video).

This unique cross-platformness (take that, Webster’s dictionary!) is intrinsic to HTML5 and often requires little additional work from the developer. However, there are a couple of things you should consider…

SpyChase running on Windows Phone 7 Mango.

First and foremost, screen sizes can vary greatly between different device categories as can screen resolutions and aspect ratios. If you want your HTML5 games to work well on mobile devices, you should make sure they either support multiple resolutions or don’t exceed the WVGA frame size of 800x480.

Also, since most mobile devices lack the screen size to render an entire web page at once, they often employ sophisticated zooming and panning techniques that can be counterproductive when writing games. These can be turned off programmatically using the viewport meta tag. The following code snippet will cause your game’s viewport to occupy all of the available horizontal screen real estate. Setting the parameter “user-scaleable” to “no” tells the mobile browser to disable pinch-zooming, which otherwise often conflicts with finger-based game controls.


<meta name="Viewport" 
  content="width=device-width; user-scaleable=no; initial-scale=1.0" />

Once your game renders okay on small-screen devices, you should also take a minute to think about input. Most touch-only devices have a virtual keyboard, but they tend to take up too much screen space to be useful in controlling game characters. If strictly touch-based input is out of the question, you should build a limited virtual keyboard with only the buttons you need for your game (e.g. the arrow keys). However, it’s best to be creative with alternative means of controlling your game that don’t require additional on-screen elements. A good example of this is the game Spy Chase, where you drive a vehicle with one finger (something you should not attempt in real life).

Best practice #3: Automatically save the player’s progress

With features like site pinning, web browsers attempt to give web applications the same status as regular desktop applications. However, the idea of websites functioning as applications is rather new, and so is the notion of web pages holding client-side state. You might think twice before closing an instance of Microsoft Word, but you might not be as careful with an open web page. Most of the time, this isn’t a problem—most web pages are either stateless or maintain a record of your information on the server.

Browser games, however, are a slightly different beast. Since JavaScript code is executed on the client, HTML5 games typically keep their game state in transient memory (aka RAM). Close the browser window and your hard-earned highscore is forever lost.

Now, you might argue that a sensible person would be cautious enough not to close the game they’ve been playing for eight hours, but accidents do happen, especially when multiple tabs are involved or batteries run out of juice.

To make a long story short: When writing HTML5 games, it’s an absolute best practice to save the player’s progress regularly and allow players to resume their game when returning to a web page they’d closed.

Now where should you keep track of players’ progress? In the past, the obvious place was either a server-side database or a client-side cookie. Neither solution is especially appealing. With a server-side approach, HTTP requests have to be made whenever information needs to be stored or retrieved. The cookie approach gives you very limited space to work with and the longevity of cookies greatly depends on the browser configuration.

A much more workable solution is to useHTML5 DOM storage. DOM storage lets you save several megabytes of data per website through an interface that resembles a key-value store (or a JavaScript expando object). It’s very convenient, but in the context of HTML5 games, you might also want to remember complex data structures—something that DOM storage does not natively support.

Fortunately, modern JavaScript implementations have mechanisms built in that enable the serialization of objects into a compact notation known as JSON. Using this approach, DOM storage can also be used to remember arbitrary information. The following two helper functions illustrate how game state can be stored and retrieved using HTML5 DOM storage and the JSON features built into ECMAScript5:


function saveState(state) {
    window.localStorage.setItem("gameState", JSON.stringify(state));
}
 
function restoreState() {
    var state = window.localStorage.getItem("gameState");
    if (state) {
        return JSON.parse(state);
    } else {
        return null;
    }
}

Best practice #4: Use a profiler

One of the greatest challenges when developing a game is to maintain high frame rates as you add more and more features to it.

The good news is that browsers in general have become much faster over the last couple of years, and HTML5-powered games running at a constant 60 fps are already a reality.

It wasn’t easy. For Internet Explorer 9, this meant writing an all-new JavaScript engine that can use multiple CPU cores and a fully hardware-accelerated rendering pipeline based on Direct2D. In other words: If you’ve spent good money on your gaming rig, Internet Explorer 9 will make good use of it.

Internet Explorer 9’s integrated JavaScript profiler helps you locate performance bottlenecks.

For simple games, this means that you don’t have to worry about performance. But since HTML5 is platform agnostic, you’re potentially developing for a whole range of devices and browsers, some of which won’t be as fast as you’d like. Even if you’re only targeting high-powered PCs (something we said we wouldn’t do, remember?), performance can still become an issue.

If you want your game to run at 60 fps, you have no more than 16 milliseconds to render any individual frame. In the time it takes for you to blink, you have to render at least 6 complete frames. Now this may seem like a daunting task…and with any non-trivial game, it certainly can be.

Luckily, there aretoolsthat can help you. In Internet Explorer 9 (or 10 for that matter), hit the F12 key to open the developer tools. Select the “Profiler” tab and hit “Start profiling”.

Now navigate to where you feel performance should be better, give the profiler about 30 seconds to gather data, then hit “Stop profiling.” You will be presented with an overview of how much accumulated execution time is consumed by each of the functions of your game. Most of the time, you’ll find that there are a number of functions that take up the majority of the overall execution time. Optimizing these functions will give you the most bang for your buck and, when you analyze your code, slow subroutines will immediately stick out.

Don’t trust your instincts all too blindly though—code that looks slow might actually execute quite fast with today’s JavaScript engines. The best approach to optimization is to re-profile often and to always measure if the changes you make to your code actually have a positive impact on performance.

Gaming gone social: Warimals is based on HTML5 and allows you to playalongside your Facebook friends.

Best practice #5: Be creative!

To be able to write games that run natively in your browser is pretty awesome, but what’s even cooler is that HTML5 allows you to write games that RUN IN YOUR BROWSER! Not only is HTML5 interesting from a technology point of view, a browser is also a perfect platform for gaming.

Think about it…browsers exist on many different devices, they’re (almost) always online, and they’re a tool people use to connect with each other via email, chat and social networking. As a browser game developer, you can build games that are fun and bring together people from all over the world.

If you’re new to HTML5 game development, it might be tempting to write clones of games you’ve played offline. There is absolutely nothing wrong with this approach. But if you think of your game running inside a “communication application,” there’s a good chance you’ll come up with all-new, highly creative game ideas. An interesting example of this is Warimals, one of the first HTML5-based Facebook games. In Warimals, you can play either as dogs or kittens, and you can invite your Facebook friends to play along with you. What’s not to like?

To sum up…

Thanks to the great work of framework developers and JavaScript pioneers, HTML5 has already become a fairly mature platform for writing games. This is great news, because the Web is the single most ubiquitous runtime for applications of any kind. With the right tools (many of which are conveniently integrated into Internet Explorer 9 and 10 or can be downloaded for free) and the right framework, the HTML5 game development experience can be pleasant and greatly rewarding, especially when creating connected experiences in interesting and innovative ways.

Tools to get you started:

About the Author

Kai Jäger is a long-time web developer, JavaScript enthusiast, book author and now an Academic Developer Evangelist at Microsoft in Germany. When he doesn’t speak to student audiences about the virtues of HTML5, he works on his pet projects or enjoys the great Bavarian outdoors.

BUILD GAME BY HTML5 FOR MOBILE AND WEBSITE

Showing posts with label HTML5. Show all posts

HTML5 Game Development Tutorial 27 - Canvas buttons and start screen