Coloring Book App

tickledpink

I am developing a coloring book app for kids. What I need to figure out is how the user can select a color and then apply that color to a certain area on the "coloring page". Would I need to chop up the image into parts and have an image for each color that will be available?

You will have to forgive me I am VERY new to all of this and not sure what the best way to accomplish this would be. Any advice or help is extremely appreciated.

expired_012

Lol you don't have to chop it into parts. Just intert everything as separate images. So say you have a tree. Insert a blank white tree and a colored tree, so that when the user clicks that tree it will bring out the new colored one.

Instead of inserting 1 image with the scene already set up, insert separate images and design your scene within gamesalad using those images

StusApps

Or you could have each element of the scene as a white image with a black outline. Then the user can select different colours and set that actor to change its colour when touched. This is what my wife is doing with the game she is currently making.

tickledpink

Ok, I think I understand what you mean but what if they want to use like purple for the tree top and I only have it in the white and green? Here is a link to something similar http://itunes.apple.com/app/coloring-book/id297952833?mt=8

The user would select the page they want to color, then a crayon color and tap the screen to color certain parts of it.

tickledpink

@StusApps How do I connect it so the app knows which color they have chosen? (Told ya I was a newbie LOL)

tickledpink

Here is a link to one of the pages I have designed http://www.tickledpinkdesignz.com/dinosaur.jpg

StusApps

tickledpink said:
@StusApps How do I connect it so the app knows which color they have chosen? (Told ya I was a newbie LOL)

Make a little list of colors (on paper) you want and give each a number. ie. red=1 blue=2 green=3

Create an global attribute called 'color'.

Then create actors of each color to act as a palette at the bottom of the screen. Within each actor create rules to say that if touch is pressed change game.color to ..... (a number corresponding to that color). So the red palette block would say:

If actor receives event touch is pressed

change attribute game.color=1

In the actual picture items of the scene then create a rule that says:

if actor receives touch is pressed AND game.color=1

change attribute self.color.red=1
change attribute self.color.green=0
change attribute self.color.blue=0

Hope that makes sense

tickledpink

Yes! That makes sense! Thank you so very much.

tickledpink

OH! One other question for the image would I need to chop that up into pieces and then put them together in GameSalad. So that the entire image won't change to the selected color?

JackBQuick

Just a few ideas:

With GameSalad, you can change RGB (as well as alpha) values of an image by changing the actor's attributes -- you can read up on it here:

Actor Attributes Pane Reference

Despite the fact that it says that it takes "integer value from 0 to 1", it does take decimal numbers. So, if you look up the RGB value of a number, say from:

Web Color Chart

you can divide each RGB value by 255 before using it. So a light purple color with RGB values of 204, 153, 204 would translate to 0.8, 0.6, and 0.8 in GameSalad.

Yes, if you want each piece to be a different color, you will have to make a separate image for each. This is where it becomes tricky.

I think, to achieve the effect you are describing, you will need a bunch of overlapping PNGs with transparent backgrounds. When the user clicks on the image, how can you determine where exactly they want to color?

For example, in your image dinosaur.jpg, how does the user color just the wing of the dinosaur (nice artwork, btw) -- the user can't touch the wing without also triggering the main dinosaur actor and perhaps even the mountains behind it and even the sky.

I would ask StusApps how his wife did it before starting with your project -- I don't want you to be stuck on this crucial part. Or, you can stick with simple images.

I could be totally wrong but maybe some GameSalad vets can volunteer their experience with this?

Best of luck!

expired_012

@Tickledpink, no. Say you have a tree that is colored green on the leaves and brown on the wood. You would have 4 images.

1st image: One blank image of the tree
2nd image: An image of the leaves colored and the wood blank
3rd image: An image of the wood colored and the leaves blank
4th image: An image of both the wood and leaves colored

tickledpink

@JackBQuick Thanks!

See that is sort of what I was thinking I could do but when I attempt to do that it also turns my black lines that same shade of color which I don't want.

So I am assuming the easiest way to accomplish this would to be take the dinosaur body and create multiple colored pngs then the wings and mountains etc so that I have one of each color that I will offer, fit them all together in the GameSalad screen and then just swap out the image/actor once a color is chosen and the user taps the screen. Does that make sense?

JackBQuick

You could do that but your app might be huge. Say you have 5 colors and 5 shapes: that's 25 images already!

If you are going to do it this way, I would suggest that you have one image file that is just black lines against a transparent background. For the parts, I would have them in white (without a border), again against a transparent background.

Again, I would ask StusApps how his wife does it -- it's a bit more complicated than what appears on the surface (no pun intended).

I've got a few ideas and I'll try to get a simple demo up -- no promises though -- but it probably won't be for at least another 15 hours.

StusApps

Hi

Sorry, I didn't re-read this thread to see where it went.

Yes the background is the real problem (as well as overlapping items) as everything sits on it. We have tried 3 solutions and haven't settled on a final one yet.

They are:

-That there are buttons down the side that pre-select different, already coloured, backgrounds, so the images are all separate and don't overlap each other. This is fine for what we want which is simply one colour for one item, it means you can't individual colour the background though.

-That the background has a whole load of rectangular invisible actors to respond to touches and change the colour of the item through an attribute. These invisible actors fill the space as well as possible without overlapping other actors.

-The actors when touched turn on a global attribute for themselves. Background items and anything underneath have a rule that if the above actor is selected then they do not change colour. This seems to work best but would require a few rules and attributes for many overlapping items.

Sorry they are a bit vague, if you want any of them explaining in more detail let me know.

tickledpink

@JackBQuick Thank you again! Please let me know once you have that up. I know it will help a lot!

@StusApps wow so many ways to do this! I think once JackBQuick has the demo up I may have some more questions.

I assumed this would be soooo easy for my very first app, looks like I was way off base!

JackBQuick

Here it is:

Coloring Book (Demo)

It's unfinished -- only the clouds and the dinosaur work -- but it gives you an idea about how to get started on this.

I used StusApps's second option. However, I used circular collision shapes (I find them more flexible and can stretch them to fill spaces better) and didn't worry about overlaps (perhaps I should).

Here's a summary of how it works:

- I have a number of transparent PNGs: one which is just an outline of all the shapes, and the rest are shapes (clouds, dinosaur, mountains, etc.) in white with transparent backgrounds.
- When a swatch is clicked, it saves its RGB values to global attributes named colorR, colorG, and colorB.
- There are "sensors" in the picture that register clicks/touches. In this case, when a sensor within the dinosaur is clicked, it saves the word "dinosaur" to a global attribute called shape.
- The dinosaur actor has a rule: if the global attribute called shape is equal to "dinosaur", change its RGB values to the values saved in colorR, colorG, and colorB.

That's about it. I try to check the forums but it's getting busy for me. There are a lot of smart people here. If I'm not available, I'm sure someone else can answer your questions.

Good luck!

StusApps

That works really well. I hadn't bothered to set a separate outline for the actor and one for the fill, worth looking at as it does look better.

Thanks

tickledpink

Thank you thank you thank you! Looking over it now, I could kiss you but I won't LOL!

tickledpink

Ok, one other tiny thing Let's say I want to have all of the colors on one scene and once they click on a color it returns them back to the previous scene to color the page. How would I do that without having to make a color scene for each color page?

StusApps

If I were doing that I would actually have the coulers and a box for them to sit on already on the page but with alpha set to 0. Then a button on the main coloring page that when pressed turns the alpha back to 1 through a global attribute. Obviously the rules for the colours could only allow touch pressed when alpha =1. the items on the coloring page would also need
A setting where they can't be touched when the palette is on screen. I'll try to add it to jacks example later if I get a chance.

tickledpink

I think I got it! Thanks StusApps!

realmadrid1012

PS is very good
buy maplestory mesos
cheap maplestory mesos

tickledpink

OMG! I am about to pull my hair out. I had it kind of working without the "sensors" but then realized it wasn't working right so I've added in the sensors to the clouds and the dinosaur just like the demo but only the clouds are working. When I click on the dinosaur nothing happens.

tickledpink

Nevermind! I am such an idiot, just a little typo!

realmadrid1012

ilove wow
maplestory meso
buy mesos