Example of two images combined to one?

Monkey Forums/Monkey Programming/Example of two images combined to one?

ondesic(Posted 2013) [#1]
I was wondering if there was a simple example somewhere taking two images and combining them into one. I don't mean just overlaying them, I mean drawing one to a canvas, then drawing the other onto the same canvas creating a new image?

Thanks for any help.


marksibly(Posted 2013) [#2]
Try something like:

DrawImage image1...
DrawImage image2...
ReadPixels...
image3.WritePixels...


ondesic(Posted 2013) [#3]
Can you use ReadPixels to read a portion directly from the loaded image instead of the render buffer like?

PixelArray = image1.ReadPixels...
image2.WritePixels...


Beaker(Posted 2013) [#4]
No. Unfortunately not. Try the zipped module in this link:
http://monkeycoder.co.nz/Community/post.php?topic=3482&post=36720


ondesic(Posted 2013) [#5]
I get a
Monkey Runtime Error : TypeError: Cannot call method 'Width' of undefined
when trying this module.


ondesic(Posted 2013) [#6]
Also, Mark, does the image3 in your example have to be a blank image, or can I draw to an existing image (with a picture already loaded in it)?


ondesic(Posted 2013) [#7]
Darn. I hope no one minds me venting. I am getting very disheartened.
I started Monkey a year ago. I began small but all the time keeping my eye on one goal...to port one particular program of mine to Android AND iOS. I have whittled away at each problem I would face porting this particular game. Finally today I am trying to tackle the biggest obstacle: "rendering to texture". I thought I had read correctly, but only now am I beginning to think that monkey may not be able to do this. My whole game's success henges on this ability. I need to build a map out of small custom tiles. Each tile is made by adding pictures together. For instance, one 40x40 tile is a mixture of ground, trees, rocks, and flowers. I have to create the tile first, then draw it to the large canvas. I do this until the map is made.

So far, everytime I try to draw anything to an image, it erases the entire image.

Is this doable in monkey or am I out of luck?


Gerry Quinn(Posted 2013) [#8]
image3 has to be created using CreateImage() before you can call use WritePixels(). I suspect that is the issue you are having.

Function CreateImage : Image ( width:Int, height:Int, flags:Int=image.defaultflags )

'Creates an empty image for use with Image.WritePixels.
'The contents of the image are initially undefined.


What you want is quite doable. For example, draw a big square of grass in the render buffer, then draw small flowers on it (each flower being an image with an alpha (transparency) channel.

Then create an image using CreateImage() and use WritePixels() to copy the buffer contents to it. That should give you a grassy tile with flowers that you can use any time.

Don't forget that this must be done during OnRender(). You might want to do it at the start of the game, then clear the render buffer and print on it "Preparing Graphics" and maybe a progress bar until you are done.


Gerry Quinn(Posted 2013) [#9]
Actually maybe there's an issue of sequence, if you want to use the render buffer alternately for making tiles and using them, and the buffer isn't big enough to do both at once. But in the first place, it's hard to see how tiles are helping you if you do this. In the second place, the solution is to make all the tiles first, then do your second stage of processing.

[And if the buffer size or availability restricts you, you can probably set up to use Int[] arrays as your own graphic surfaces. Though you'll still need to borrow it if you want to load images using LoadImage().]


ondesic(Posted 2013) [#10]
Looks like it isn't possible with monkey (at least not yet). I'm sad, but I have gone back to libGDX for now. I'll check in from time to time to see if this is possible and easy in the future.


Gerry Quinn(Posted 2013) [#11]
ReadPixels and WritePixels do work. Surely that is enough to do most things?


ondesic(Posted 2013) [#12]
Thanks for trying to help. I tried multiple times. It seems ReadPixels and WritePixels have two many stipulations to work. I still can't create the effect I need.


Gerry Quinn(Posted 2013) [#13]
They have no stipulations as far as I know, except:
- ReadPixels only works during OnRender()
- ReadPixels is limited to the size of the render buffer
- ReadPixels creates alpha of 1.0
- WritePixels needs a base image created using CreateImage()

I think you are probably just missing some step. Does your code fail the same way on every target?