[PLUGIN] Canvas

Post your completed addons to share with the community

Post » Mon Mar 23, 2015 9:39 pm

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! :)
B
3
Posts: 12
Reputation: 199

Post » Tue Mar 24, 2015 4:09 pm

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)".
B
12
S
7
G
7
Posts: 446
Reputation: 4,268

Post » Fri Mar 27, 2015 3:24 pm

Cool!
B
2
Posts: 4
Reputation: 158

Post » Wed Apr 01, 2015 8:17 pm

Hey @R0J0hound

Is there any way I can paste an object on the canvas specifying the alpha and maybe size and position?

My situation is this: I have two shapes, let's say two circles; one circle is in the middle of the canvas and the other one is bound to mouse XY, every tick the mouse-bound circle is being pasted with destination-out and the other circle is being pasted on another canvas in a way similar to this:
Code: Select all
for (var i = 0; i < 20; i ++) {
   
   var size = 128 + i * 10;
   var halfthatsize = size * 0.5;
   var x = 256 - halfthatsize;
   var y = 256 - halfthatsize;

   context.globalAlpha = (256 / ((i + 4) * (i + 4) * 20));
   context.drawImage(shape, x, y, size, size);
   
}


I can achieve the above code with sprite events but when I erase with destination out I obviously can't paste the updated shape. :|

EDIT: I used another Canvas object that I then paste in the main canvas. It works but it's a hacky way of doing it and it looks like the quality gets lost in the pastings.
B
13
S
2
Posts: 27
Reputation: 952

Post » Fri Apr 03, 2015 4:23 am

@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.
B
79
S
24
G
54
Posts: 4,754
Reputation: 40,771

Post » Fri Apr 03, 2015 9:29 pm

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)
B
4
S
1
Posts: 2
Reputation: 254

Post » Fri Apr 03, 2015 9:51 pm

@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.
B
79
S
24
G
54
Posts: 4,754
Reputation: 40,771

Post » Thu Apr 23, 2015 3:48 pm

@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!
B
25
S
5
G
1
Posts: 76
Reputation: 2,202

Post » Thu Apr 23, 2015 6:24 pm

@anubis666
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.
B
79
S
24
G
54
Posts: 4,754
Reputation: 40,771

Post » Sat Apr 25, 2015 12:21 am

@R0J0hound

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

Here's an animated GIF of it in action:

Image
B
25
S
5
G
1
Posts: 76
Reputation: 2,202

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 3 guests