[PLUGIN] Canvas

Post your completed addons to share with the community

Post » Tue Jun 23, 2015 2:18 am

Thanks R0j0. For drawing straight lines, I am not using canvas plugin...Just drawing them by spawning a sprite . So I was able to implement the erase functionality on the lines etc., Initially, I used the same method ie., spawning small lines to make an arc/cricle so that it becomes easy to erase using collision checking. However this method of drawing circles /arcs is causing performance degrade and hence I planned to implement specifically arcs & circles using canvas plugin. Using canvas alternative, the performance has definitely improved but with a sacrifice of eraser functionality.

I could think of implementing something like undo/redo from the methods you suggested but pick & choose a particular arc OR a circle on the canvas and erasing it sounds beyond my ability using the canvas plugin. So looks like I have only one of the options left - I will have to sacrifice performance and go back to my earlier method of drawing circles/arcs w/o using canvas OR sacrifice the erase functionality on circles/arcs while using the canvas plugin.

Given this, any feature on how we can check for overlap or collision on canvas objects will be a great addon to canvas, if that is possible.
For game development / IT services contact - ravindra@actualconcepts.com

List of published iOS apps -
https://itunes.apple.com/us/artist/ravi ... d693234511
B
69
S
18
G
3
Posts: 332
Reputation: 6,783

Post » Tue Jun 23, 2015 6:34 pm

@kmsravindra
The purpose of the plugin is to draw stuff to a canvas. You can already read pixels, but anything more such as keeping track of the object's that were drawn to it isn't what the plugin is for.

That said here is the color picking method:
https://dl.dropboxusercontent.com/u/542 ... cking.capx
Left drag draws a line and right click erases the line that was clicked on.
It works by adding the endpoints of each line to an array, then drawing the line on the main canvas as normal, and on a second canvas, only thicker and with a color that maps to an index in the array.
Then deleting a clicked on line is a simple matter of checking the color, deleting the array index that matches the color, and finally clearing the canvas' and redrawing all the lines left in the array.
B
79
S
24
G
54
Posts: 4,735
Reputation: 40,733

Post » Wed Jun 24, 2015 6:07 am

@R0j0hound, Thanks a lot for this working example. I suppose the same method could be used for arc's and circles...I will try that.
For game development / IT services contact - ravindra@actualconcepts.com

List of published iOS apps -
https://itunes.apple.com/us/artist/ravi ... d693234511
B
69
S
18
G
3
Posts: 332
Reputation: 6,783

Post » Mon Jun 29, 2015 4:42 pm

THX, DEMO ONLINE: http://construct2.96.lt/2/
B
32
S
7
G
1
Posts: 14
Reputation: 4,354

Post » Tue Jun 30, 2015 5:32 am

@R0j0hound, I am providing unbounded scroll / zoom view for my geometry application. For this, the canvas has to be on the layer that can scale for zoom-in/zoom-out purposes. So, for such a feature, can I have a very huge sized canvas? When I try to have a huge canvas, then the performance goes down drastically. Any alternative suggestions as to how I can reuse a small sized canvas while scrolling the view (It should not disturb the position of already drawn objects onto canvas earlier)?

Also I am unable to get the positioning onto the canvas accurate for touch/mouse positions after I do scroll+zoom due to layer parallax and relative positioning of canvas. Any help is appreciated as to how the relative positioning on canvas works when present on a scroll-able+zoom-able layer...Thanks a lot.
For game development / IT services contact - ravindra@actualconcepts.com

List of published iOS apps -
https://itunes.apple.com/us/artist/ravi ... d693234511
B
69
S
18
G
3
Posts: 332
Reputation: 6,783

Post » Thu Jul 09, 2015 2:27 pm

Hello, I might need help with the canvas plugin.
I've written an app that uses the plugin. A layer with some sprites on it is pasted onto the canvas. Then I use the browser object to download the picture:

invoke download of url... canvas.imageUrl .... name "pic.png"

For me it works perfectly fine, I get an image with the sprites on it and proper alpha channel. For another user it gives a png, but it is not transparent and shows compression artifacts that are common for jpg compression. Is it possible that a different (maybe older, out of date) browser would handle the canvas.imageurl as .jpg somehow out of compatibility reasons?
Visual Novel 'Engine' in 100 Events
if you ever have to choose between buying Construct 2 on scirra.com or on Steam, read this: Review
B
20
S
9
G
1
Posts: 785
Reputation: 3,725

Post » Sat Jul 11, 2015 6:38 pm

Thanks a lot for sharing this plugin R0j0, it will be very helpful for a lot of people !
Image
B
9
S
3
G
2
Posts: 66
Reputation: 1,600

Post » Mon Jul 13, 2015 4:50 pm

@mindfaQ
According to the html5 specifications the file should be a png by default. jpegs can be saved, but this plugin doesn't ask for a jpeg.
What browser are they using? Firefox and Chrome saves pngs for me.
B
79
S
24
G
54
Posts: 4,735
Reputation: 40,733

Post » Mon Jul 13, 2015 5:51 pm

The person uses Firefox 39.0. I am confused as well, but saw the result with common jpg compression artifacts, although in the end it was .png format. I don't suppose he lies to me.

(note: with Paster it works fine, pictures are transparent. There I have the problem that I need to use a sprite font instead of the text object, which introduces other problems (for example not being captured, when not on screen at the point of dropping the objects to the paster canvas; and worse scaling)
Visual Novel 'Engine' in 100 Events
if you ever have to choose between buying Construct 2 on scirra.com or on Steam, read this: Review
B
20
S
9
G
1
Posts: 785
Reputation: 3,725

Post » Mon Jul 13, 2015 7:15 pm

@mindfaQ
Paster creates the url to download the same way as Canvas. It's very odd if one saves as a png and one as a jpeg.

You can look at the canvas.imageUrl string and see if it says "image/png" or "image/jpg" in the first dozen characters or so. The filename extension could be wrong. For some reason your friend's computer firefox could be defaulting to jpg instead of png.

If you look in the runtime.js and search for "canvas.toDataURL()", you can force it to use png to see if that helps by adding 'image/png' as a parameter so it would look like "canvas.toDataURL('image/png')".
B
79
S
24
G
54
Posts: 4,735
Reputation: 40,733

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 2 guests