HTML5 Canvas rendering oddly
Question
I'm in the process of learning HTML5 (and OO Javascript) and am trying to make a simple game engine but rendering to canvas works under very odd conditions. Here is a link to the page and here is my index.html:
<html>
<head>
<script type="text/javascript">
function load()
{
var game = new Game();
game.start();
}
</script>
<title>Game</title>
<style>
canvas
{
outline:0;
border:1px solid #000;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body onload="load()">
<canvas id='c'></canvas>
<script src="classes/Tuple.js"></script>
<script src="classes/Rect.js"></script>
<script src="classes/Sprite.js"></script>
<script src="classes/Game.js"></script>
</body>
</html>
When first loaded, it will give an NS_ERROR_DOM_TYPE_MISMATCH_ERR Exception in Firefox 11.0 and a TypeError Exception in Chrome 18.0. To make it work:
Firefox 11.0
- select the URL in the address bar and manually hit enter OR
- click the refresh button OR
- press F5.
Chrome 18.0
- select the URL in the address bar and manually hit enter OR
- click the refresh button OR
- press F5 OR
- press Shift/Ctrl + F5.
What I suspect - Just a guess but it seems like one or more of the.js files is not available/ready by the time it is called during the first page load. Having stepped through it a couple of times in Firebug it seems that the sprite images never get loaded on the first page request.
Perhaps some of the.js files are still being downloaded as the instantiation to Game() is being made, then cached, and are only all available by the second page load?
Any ideas? I'd be grateful for your take on it, thanks!
1 answers
solution1
3 ACCPTED 2012-04-06 04:23:52
I copied your files locally and did some testing. It looks to me like it's not your JavaScript files that are unavailable, but your sprite.
You're not loading the PNG until you call Game.start . When you do:
roadSpritesheetImage.src = "assets/sprites/player/playerSpriteSheet.png";
This begins an asynchronous download of the image. The rest of the code is executed before the image has fully loaded, so when you're slicing the image, you're slicing it as if the src attribute were null.
This is why you're able to hit refresh and everything works as expected... the image is cached.
You can sort of preempt the loading of your sprite by adding an image tag just before the canvas:
<img src="assets/sprites/player/playerSpriteSheet.png" style="display:none;" />
This would work because the body load event isn't fired until content (including images) is fully loaded (I believe, I'd have to look this up). Then, if you assign this image to img.src , you will be referencing the cached image.
Alternatively, you could bind the rest of the game functionality to img.onload . For example:
self.loadSprites = function()
{
var roadSpritesheetImage = new Image();
roadSpritesheetImage.onload = function() {
self.entities.push(new Sprite("testTile",
roadSpritesheetImage,
new Tuple(16, 16),
new Rect(0, 0, 32, 16)));
self.run();
};
roadSpritesheetImage.src = "assets/sprites/player/playerSpriteSheet.png";
};
self.run = function() {
var drawSuccessful = false;
drawSuccessful = self.entities[0].draw(self.context);
self.entities[0].nextFrame();
//if we managed to draw the Sprite successfully without any raised exceptions
if(drawSuccessful) {
setTimeout(self.run, 300);
} else { alert("stopping execution of the game."); }
};
self.start = function()
{
self.loadSprites();
};
Doing this is a bit cleaner and it would guarantee you don't have any race conditions with your resources.
I had a similar issue with a jQuery plugin I created to draw an N-puzzle from a source image. I found this MDN documentation extremely useful at the time, although I ended up using sliced divs instead of a canvas.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.