Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by alexandre

I'm running into some problem I don't quite understand. I borrowed the DropLoader code from Drop to pixify the project's images. Code for main is below.

Java console reports:
Uncaught TypeError: Object #<HTMLImageElement> has no method 'getContext'

for this line:
pixify: function (img, s) {
	var ctx = img.data.getContext ('2d');

Full source for main class follows:
ig.module( 
	'game.main'
)
.requires(
	'impact.game',
	'game.fullsize-backdrop',
	'game.title'
)
.defines(function()
{
	// from Impact Drop.js: a custom loader that, after all
	// images have been loaded, goes through and "pixifies"
	// them (aka LCD effect)
	MyLoader = ig.Loader.extend (
	{
		end: function ()
		{
			for (i in ig.Image.cache)
			{
				var img = ig.Image.cache[i];
				if (! (img instanceof FullsizeBackdrop))
				{
					this.pixify (img, ig.system.scale);
				}
			}
			this.parent ();
		},

		// function to delete last row and column of pixels for each
		// upscaled pixel
		pixify: function (img, s)
		{
			var ctx = img.data.getContext ('2d');	// <= ERROR
			var px = ctx.getImageData (0, 0, img.data.width, img.data.height);

			for( var y = 0; y < img.data.height; y++ )
			{
				for( var x = 0; x < img.data.width; x++ )
				{
					var index = (y * img.data.width + x) * 4;
					var alpha = (x % s == 0 || y % s == 0) ? 0 : 0.9;
					px.data[index + 3] = px.data[index + 3] * alpha;
				}
			}
			ctx.putImageData (px, 0, 0);
		}
	});

	// Start the Game w. Title (a Game subclass) with 60fps,
	// a resolution of 384x480, scale up by a factor of 1
	ig.main ('#canvas', Title, 60, 320, 480, 1, MyLoader);
});

1 decade ago by yatayata

hi -

not familiar with that code at all but it looks like the method is being called on an Image when it should be on a Canvas element. could it be anything to do with the html markup on your page? maybe the image loader was converting images to in memory canvas renderings? was the imageloader also patched in the Drop game?

https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage#The_rendering_context

1 decade ago by alexandre

Current project index.html is identical to Drop's, and uses the same Loader subclass as that used by Drop.

<!DOCTYPE html>
<html>
<head>
	<title>Impact Game</title>
	<style type="text/css">
		html,body {
			background-color: #000;
			color: #fff;
			font-family: helvetica, arial, sans-serif;
			margin: 0;
			padding: 0;
			font-size: 12pt;
		}

		#frame {
			width: 345px;
			height: 623px;
			padding: 25px 0 0 21px;
			background: url(media/frame.png);
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	</style>

	<script type="text/javascript" src="lib/impact/impact.js"></script>
	<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
	<div id="frame">
		<canvas id="canvas"></canvas>
	</div>
</body>
</html>

Strangely enough, Drop runs just fine in my browser (Chrome); no errors are reported.

Could it be because

1 decade ago by dominic

If you start your game with a scaling of 1, all image resources will be <img> elements. If you start your game with any other scaling, Impact will draw the scaled image into a <canvas> and use this instead of the original <img>. See .data.

You could still switch out all the <img> elements with <canvas> with something like this (untested):
var oldData = img.data;
img.data = ig.$new('canvas');
var ctx = img.data.getContext('2d');
ctx.drawImage( oldData, 0, 0 );

1 decade ago by alexandre

That was exactly it. Thanks.

By the way, I wish there was a search box for the docs, one as useful as these forums's has been for me. Reading doc search results for "context" would have led me to img.data's and all that that implies.

Cheers
A.
Page 1 of 1
« first « previous next › last »