Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Coloring Book App

tickledpinktickledpink Posts: 14Member
edited November -1 in Working with GS (Mac)
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_012expired_012 Posts: 1,802Member
    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
  • StusAppsStusApps Posts: 1,352Member, PRO
    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.
  • tickledpinktickledpink Posts: 14Member
    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

    The user would select the page they want to color, then a crayon color and tap the screen to color certain parts of it.
  • tickledpinktickledpink Posts: 14Member
    @StusApps How do I connect it so the app knows which color they have chosen? (Told ya I was a newbie LOL)
  • tickledpinktickledpink Posts: 14Member
    Here is a link to one of the pages I have designed
  • StusAppsStusApps Posts: 1,352Member, PRO
    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
    change attribute
    change attribute

    Hope that makes sense
  • tickledpinktickledpink Posts: 14Member
    Yes! That makes sense! Thank you so very much.
  • tickledpinktickledpink Posts: 14Member
    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?
  • JackBQuickJackBQuick Posts: 524Member
    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_012expired_012 Posts: 1,802Member
    @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
  • tickledpinktickledpink Posts: 14Member
    @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?
  • JackBQuickJackBQuick Posts: 524Member
    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.
  • StusAppsStusApps Posts: 1,352Member, PRO

    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.
  • tickledpinktickledpink Posts: 14Member
    @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!
  • JackBQuickJackBQuick Posts: 524Member
    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!
  • StusAppsStusApps Posts: 1,352Member, PRO
    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.

  • tickledpinktickledpink Posts: 14Member
    Thank you thank you thank you! Looking over it now, I could kiss you but I won't LOL!
  • tickledpinktickledpink Posts: 14Member
    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?
  • StusAppsStusApps Posts: 1,352Member, PRO
    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.
  • tickledpinktickledpink Posts: 14Member
    I think I got it! Thanks StusApps!
  • tickledpinktickledpink Posts: 14Member
    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.
  • tickledpinktickledpink Posts: 14Member
    Nevermind! I am such an idiot, just a little typo!
This discussion has been closed.