Creating a transparent sprite?
basiliosz_847 January 1st, 2014

I am trying to create a transparent sprite programmatically, so I can use it to create "hot spots" that users can click or tap. I could of course use a graphics program, but being able to create it through code would make my life a little bit easier.

 

It would also be great if I could use the boundingBox_ function to draw a border for it, so I can see where it actually ends up during debugging.

 

I tried to create an empty Sprite and a corresponding SceneObject like this:

this.instructionsClickSprite = new Sprite(null, this.layers.playfield);this.instructionsClickSprite.setSize(240, 26);this.instructionsClickSprite.setDrawFunction(wade.drawFunctions.boundingBox_(0,0,this.instructionsClickSprite.draw));this.instructionsClickObj = new SceneObject(this.instructionsClickSprite);wade.app.instructionsClickObj.onMouseDown = function (eventData) {    if (eventData.position.y < 0) {        wade.app.buildInstructionsDisplay();        return true;    }};

This way I thought I could have a clickable object that I could superimpose over an existing entity - manybe another Sprite, or a TextSpite, or a piece of graphics, so that I could separate the clickable areas from the techniques used to build the GUI - a suggestion I have to thank Gio for, by thw way! - but what I get is a white, opaque rectangle.

 

Incidentally, I'm not really clear about the difference between the "axis-aligned bounding box" and the "oriented bounding box" in the documentation for the boundingBox_ function.

All 3 Comments
Gio January 2nd, 2014

WADE uses a white image to represent sprites that don't have any image associated with them. It does so because it's sometimes useful to see where a sprite is, even if its image is not present (for example because it failed loading, there was a typo in the filename, etc).

 

Anyway, you can change the draw function of the sprite so it does nothing:

sprite.setDrawFunction(function(){});

It is also possible to combine this with the boundingBox_ draw function:

sprite.setDrawFunction(wade.drawFunctions.boundingBox_(0, 0, function(){}));

To answer your other question: an oriented bounding box (as opposed to an axis-aligned one), is a bounding box that is rotated according to the sprite's rotation angle. In other words, the sides of an axis-aligned bounding box will always be aligned with the screen x and y axes. Not so for an oriented bounding box.

 

However if your sprite isn't rotated, the oriented bounding box is exactly the same as the axis-aligned bounding box.

basiliosz_847 January 2nd, 2014

Ok, that's clear now. It could be a good idea to put a short explanation in the documentation for the Sprite class. Something along the lines of "If no image is supplied, Wade will use a plan white one to make it visible".

 

Maybe it could be a good idea to have a function in the docs for Wade_drawFunctions, maybe called transparentRect_(width, height), to create a blank, transparent Sprite of a given size, that could then be used as a starting point for programmatically created Sprites. Or maybe a different constructor for Sprite?

 

Another minor note. The docs say of the image argument for Sprite() that "If omitted or falsy, a blank image will be used". If I omit the image completely (I tried to do so while attempting to solve the problem of my original post) and just supply the layer, I get an exception. And of course that's logical - the code is trying to use a layer ID as an image. Maybe the docs should be rephrased?

Gio January 2nd, 2014

Yes, very good points. I will update the docs.

Post a reply
Add Attachment
Submit Reply
Login to Reply