[PLUGIN] Canvas

—

What object are you pasting to the canvas?

When pasting an object to the canvas the object's non-webgl draw function is used. When webgl is on and the browser supports webgl, then plugins do stuff to get ready to draw with webgl, and have no need for the non-webgl draw function to work. For instance pasting a tilemap object with webgl on will have that problem. One solution is to set webgl to off in the project properties, but for most that's not an acceptable solution. You could use the Paster object instead as it doesn't have this issue.

It's a bit of an odd one as I'm aware the Roguelike object isn't more than a data array, so shouldn't have any bearing on Canvas! All I'm doing is pasting a light radius "Sprite" in to a Canvas, and then that Canvas in to a main Canvas. I've tried disabling WebGL but it produces the exact same error.

I'll have a go converting this over to the Paster plugin - I do have a version but I preferred how the additive lighting looked using Canvas. I also experimented with the performance on an older laptop with a mobile GPU, and Paster seemed to use up a lot more CPU compared to the Canvas implementation in fullscreen.

'Cause it might be helpful, here is how I use the paster object to implement the light system:

P.S. If you do not see a complete picture, right click on it and choose view image, or similar (according to the browser you are using).

Lunarovich

I've had a look into it and the bug occurs when I use:

for x in instances[/code:2a9uzrdq]
in my code.

"instances" is an array so x just loops over the indices of the the array (0, 1, 2...).  But when it fails x's value is "random".  Looking in rot.min.js the Array object has these two methods added:
Array.prototype.random
Array.prototype.randomize

Adding methods to the Array object will break Array.foreach since it will now loop over the the methods after the indices.  I can fix it in that particular case in my code, but any other plugin or part of C2 itself that uses Array.foreach will break as well.

The solution would be to do something like this to redefine the other prototype methods of the array to compensate.
[url=http://kenegozi.com/blog/2009/04/13/javascript-and-the-extended-array-prototype/]http://kenegozi.com/blog/2009/04/13/jav ... prototype/[/url]

Aha, I guess there is something under the hood that's not quite right. Thanks for taking a look in to it, R0j0hound, much appreciated!

Any documentation ? I'm trying to compare "Canvas.rgbaAt(x,y)". How should I use it ?

edit : nevermind, found it. "rgba(255,255,255,1)".

Cool!

sadNES

Setting the opacity, size and position of the object before pasting is the way to do it. The paste action should paste the object as it appears.

As I understand it you're erasing one circle and drawing a radial gradient with another. I don't understand how they correlate from how I'm reading it.

The quality difference is due to the full screen scaling of the project. The resolution of the canvas object by default is 1to1 with an unscaled project. You can change the resolution to be 1to 1 with a fullscreen scaling by using the "resize canvas" action with

Canvas.width *windowWidth/viewportWidth

And the same for the height. I don't recall offhand what the expressions are actually called.

Hello! I just want to know if this plugin is what I need for my project.

I need to create a background from a tiled image, and lines and circles with different size and colors. This background will never change, only scrolled.

Then I need to have some circles that will be moving around. I would like to draw them once (specifying size and color), and use them as a sprite or something.

Can I achieve this and still benefit from WebGL speed? (not completely necessary, as long as I can draw everything fast enough)

leandronw

Webgl speed is not so good with this, since it has to copy the texture to vram every time it changes (internal issue).

Different size circles is trivial, but for different color circles you mainly have these options:

1. Use this plugin to draw the circles using any color. You'd be only drawing to this so if you clear it to transparent you can have anything underneath show just fine.

2. A second option could be to use the paster object which is similar to the canvas object, but was made with webgl in mind. It doesn't draw circles but it does allow making any color. So you could do some clever things with blend modes, a circle sprite, and the paste action.

3. You could use a white circle sprite with the tint effect. This by far would be the simplest.

4. As a last resort you could just use a lot of animation frames with different colors.

R0J0hound

Hi, is there a way to turn off antialiasing? I'm doing a retro low pixel game and want to draw some curves but they come out aliased and look weird against my "crisp pixels."

Basically I want to draw some non aliased 1pixel wide curved lines.

Thanks!

—

html5 doesn't provide a way to turn it off. From what I've read is a solution is to draw the curve or lines one pixel at a time.

Here's a capx that does that. If you have the function and canvas objects you should be able to copy the "pixel lines" group over to your capx.

https://dl.dropboxusercontent.com/u/542 ... ezier.capx

It isn't completely smooth due a math error I think. I may revisit it later.

Edit: fixed, it's now smooth.

R0J0hound

Thanks very much! That worked great and looks so much nicer.

Here's an animated GIF of it in action:

Nice, that looks pretty cool.