Forums » Help » iOS, rotation and alpha

I've got my game running on the iOS simulator in xcode, using the wrapper Dominic wrote. Great stuff!

There are a few things that don't work as expected, wondering if anyone could tell me how to work around them, or find my workarounds useful :)

1) Setting the alpha on animations:

this.anims.idle.alpha = 0.8;

has no effect. Not found a workaround for this yet.

2) Rotating anims - this is in degrees instead of radians when using the iOS wrapper. Detect for running on iOS and translate accordingly. This also affects the box2d plugin, I'm working on a workaround there.

3) The fixed backgrounds, as seen in 'drop' don't render for me. Possibly due to the size of them, but I get nothing at all. Not found a workaround yet, as I have a fixed background that is 480x320.

Workaround for rotation :

In JS_Canvas change

JS_FUNC(JS_Canvas, rotate, ctx, argc, argv) {
	[self flushBuffers];
	glRotatef(JSValueToNumber(ctx, argv[0], NULL) , 0, 0, 1);
	return NULL;
}

to

JS_FUNC(JS_Canvas, rotate, ctx, argc, argv) {
	[self flushBuffers];
	glRotatef(JSValueToNumber(ctx, argv[0], NULL) * 57.2957795, 0, 0, 1);
	return NULL;
}

Impact is sending the rotation in radians, this converts to the angle that glRotate expects :)

1) There's a bug in lib/plugins/ios/animation.js: It has two "render pathes" - one with rotation and one without. The path with rotation is missing the last parameter (this.alpha), so the .alpha property works only on non-rotated sprites.

If you change line 40 to the following, it should work:

this.flip.x, this.flip.y, this.alpha

Sorry about that.

2.) Whooops, thank you!

3.) How exactly are you drawing your background image? Just loading an ig.Image and calling .draw(x,y)? The size shouldn't be a problem. I'm drawing a 320x480 px image myself in the AppStore version of Drop.

Maybe you're clearing the screen after drawing the background? Calling this.parent() in your Game's .draw() method will clear the screen if this.clearColor is not null.

I am setting clearColor to null, and in my draw() I'm calling .draw(0,0) on the background image, and then calling the parent draw. In the browser, I get the background image with my level drawn on top of it. In the iOS simulator, I get no background, my level is drawn, but all entities leave trails. When I have no level loaded (so no background or collision maps) it works fine. As soon as I load a level, there's no background image.

from my game class:

	draw: function() {
		// tutorials are jpgs, 480x320. These work fine.
		if (this.tutorials.length > 0) {
			this.tutorials[0].drawTutorial();
			return;
		}
		// background is jpg, 480x320. Doesn't show :(
		this.background.draw(0,0);
		this.parent();
	}

I made the fix to line 40 of lib/plugins/ios/animation.js but it's not had an effect. I'm using xcode4, if that helps.

Wish I could help more but I know absolutely zero objective c and I've never done any opengl before!

Totally random thought... but could the two issues be related? My level map tiles are pngs, with transparency. If the alpha channel isn't working correctly, that could explain why I can't see the background image through the transparent parts of my level map (i'm pre-rendering the maps).

Just tested the alpha with non-rotated anims, and it's not working there either.

Narf, instead of calling this.sheet.image.drawTile() in lib/plugins/ios/animation.js, call ig.system.context.drawImageTile(), like so:

ig.system.context.drawImageTile(
	this.sheet.image.data,
	-this.pivot.x, -this.pivot.y,
	this.tile,
	this.sheet.width, this.sheet.height,
	this.flip.x, this.flip.y, this.alpha
);

This is essentially a shortcut to pass some additional parameters to the native draw function, instead of having to set ctx.globalAlpha.

I still don't know what causes the problem with your background image. Normally background maps are pre-rendered on an initially transparent texture - so every tile that is semi transparent (or 0) should still be transparent in the pre-rendered background map.

Can you switch the drawing order and draw your background image last, just to make sure that it can be drawn when the level is loaded? I.e. either your background image can't be drawn for whatever reason (no more RAM?) or it is overdrawn by the background map.

Ok, the background image works fine if I convert it to a jpg, but if it's a png I get nothing. I might have said my images were all jpgs, sorry about that, they're not. Still weird how it'll draw fine if the source is a jpg, but not if png...

Testing the alpha now :)

With that patch for the alpha, the pivot point is no longer in the center, it seems to be size.y pixels above, and so the sprite spins through the air and below the ground instead of along the ground... and the alpha sitll isn't happening :)

My sprites are PNGs if that makes a difference?

 -this.pivot.x, this.pivot.y,

should be

 -this.pivot.x, -this.pivot.y,

I missed the minus before the this.pivot.y above. Fixed it. Sorry.

PNGs should work fine. I just tested it and have rotated, semi-transparent PNG sprites.

Try setting the .alpha to 0.1. An alpha of 0.8 is still fairly opaque.

It works!!! Ignore my (now edited) post about it not working... I was looking at the wrong screen :-)

And thanks for your help!!

Mh, the star.png works fine for me in iOSImpact. You could try to re-save it in PhotoShop or some other graphics package (should be 32bit = 24bit + 8bit alpha).

But again, the star.png you uploaded works fine for me.

If you want to, you can send me your game and I'll have a closer look. My email is here: http://impactjs.com/contact

Edit: hehe, ok. Glad I could help. And thanks for finding these bugs!