Generating a world from a bitmap?

I'm trying to figure out if this is possible with C2:

Take an image file, get the color of the pixel at a particular x,y coordinate for use as a basis for a map that then is procedurally generated.

Basically, each pixel of the map represents an area in the game. If it is, say, a specific green color, then the map area generated is grassland. If it's a certain blue color, it's water, etc.

It would seem that C2 is limited due to the HTML5 security and other whatsits I don't fully understand, to where I couldn't directly read in raw file data. However, I saw in the forums for C1 that someone had made a photoshop style color picker example. I could use something like that to get a pixel color from an image that's been loaded normally. Is something similar possible with C2? I would really like to avoid having to create a huge world map tile by tile directly in a C2 layout, if possible.

Yttermayn

Hi,

you could do something similar using the Canvas plugin. It allows you to check the colour of any pixel in the canvas. This could then be translated into specific sprites for your world.

spongehammer that's really interesting, I didn't know Canvas could do that!

I used this method a few times in Construct Classics canvas, and it works quite well.

It also works ok with Rojo's Canvas, however there was an issue with what was returned with Fire Fox.

I reported the bug, but you never know if or when they will fix that kind of thing.

Thanks for the response, Spongehammer! I assume this is the canvas plugin you're talking about? scirra.com/forum/plugin-canvas_topic46006.html

Yttermayn sqiddster

thats the one.

Here is an example, not overly efficient but it works.

canvas example

Spongehammer: I've set up the canvas plugin and created a map.png image that loads onto a canvas. How do I get the color of a pixel on the canvas? I loaded your example up and it doesn't make any sense to me how that's supposed to get a color from an image.

In particular, I'm unsure of what this part is: "rgba(0,255,0,1)" What is rgba()? Some function with four parameters? Stands for RedGreenBlueArray? I don't see one set up anywhere.

I get that you're filling up an array with different colored pixels, but I don't understand how this helps.

Please enlighten me, oh wise one.

Yttermayn

The code is set up to pick up only 100% RGB colours so Red is 255,0,0 Blue is 0,255,0 and so on.

rgba() just means Red, Blue, Green, Alpha which is the transparency of the pixel.

Hope this helps.

If you need any more info then make sure you put the symbol in front of my name <img src="smileys/smiley1.gif" border="0" align="middle" />

spongehammer

Ok, I didn't know what the was all about, thanks, and thanks for the reply. So rgba()is a function that will pick a specific target color and alpha combination from the canvas? So does it return a 1 or 0 or true/false or something depending on which pixel it's checking? When I get home I'll view it in this frame of mind and see if your example makes more sense.

Yttermayn

This reads the colour data from the canvas into the array

Canvas2.rgbaAt(loopindex("xloop"), loopindex("yloop"))

In each map group this is simply comparing the data at any given location in the array with a set colour.

"rgba(0,255,0,1)"

Green in this case.

Hope that helps <img src="smileys/smiley1.gif" border="0" align="middle" />

Yes, that makes more sense now, thank you very much! Hopefully I can get something rudimentary working this weekend.

spongehammer

"rgba(00,255,0,1) = Array.At(loopindex("xloop"),loopindex("yloop"))"

It looks like you are trying to compare/match colors on the array you added to the layout (which is blank?), rather than reading image data from the canvas. I'm still getting hung up on this...

Thanks for your patience.

I don't see the "Canvas2" object referenced anywhere...

Yttermayn

<img src="https://dl.dropboxusercontent.com/u/1685424/c1.JPG" border="0" />

<img src="smileys/smiley1.gif" border="0" align="middle" />

spongehammer Ah hah! Thanks! Missed that little plus sign to expand the group.