How can I automatically add "back" "next" and "main menu" buttons to newly created scenes?

gfb08174

I am looking to create about 50 scenes, each one with a differently colored background, and each one with an option to go back, next, or return to the main menu.

I am therefore creating at least three actors per scene, one for each option. Each actor has to be colored the same as the scene's background so as to blend in, and be individually programmed to go back or move forward. However, this is taking me an eternity.

Is there a faster way to program a newly created scene to integrate these actors with their corresponding functions and features?

gyroscope

Hi @gfb08174 Yes, there is a quicker way for what you're after: make one scene exactly as you want it with the three buttons on it, and their respective Rules.

Then go to Home>Scenes, click on this newly-made scene, and hold down alt and drag to copy the scene. Do this for your 50 scenes.

You'll still have to go into each scene to change the background colour tho'....

gfb08174

Thank you @gyroscope . It worked. The only problem now is that the way the scenes show up sequentially in the "Scenes" page means that the order is all wrong.

In the main menu of my game you can select several options. "houses" "food" "cars", etc.

Imagine you select cars. I am then redirected to the "cars" page. However, since the scene of the cars page is sandwiched between a scene belonging to "food" and "houses" it will bring me to one of those pages when I click "next" or "back", instead of bringing me to the proper page.

When clicking "next" or "back" GameSalad figures that to mean the next scene within the "scenes" page, instead of a scene which belongs to that category.

Is there any way you can create 'breaks' between scenes so as to separate them from each other? e.g. when clicking "next" or "back" the "food" scene should not send me to a page which belongs to the "cars" scene.

It's quite a confusing read, let me know if you'd like me to clarify.

gyroscope

I think from what you are saying, it'll be as easy as clicking on any scene (Home>Scenes again) and dragging to its proper position. You can do this to any of your scenes there to arrange the order as you want.

As for grouping, in your situation, perhaps make new scenes to be at the front of each group?

gfb08174

@gyroscope The problem with that would be that the scenes would still show up sequentially even if you sort them with their kind. At some point the "cars" scenes will be followed up by the "food" scenes. Imagine you opened up the first "food" scene, and clicked "back" I would be redirected to the last page of the "cars" scene.

gyroscope

Then perhaps decide to add your sections (as buttons to take the user to the first scene of the relevant section) in the main menu, and then make sure that on the front "card" of each section there's no back button, nor no forward button on the last scene of a section - so the only alternative there for the user is to press the Home/Menu button to take them back to choose another section. Would that work in your situation?

tatiang

Just to interject... have you considered making a single scene and just changing the actors' images based on table data? It sounds like the app you're making would be perfect for that. The benefit is much less setup and less coding as well.

gfb08174

@tatiang I'm not sure I understand what you're saying.

The idea of my app is to select a category, i.e. cars, and then scroll through 25 pages of cars. I programmed each "back" and "next" button to go to the correct corresponding page, and I programmed the "main menu" page to bring me pack to the welcome page. I have about 50 scenes already and I'm not even a quarter of the way in, so I've got a ton of work ahead of me and any tips on how to speed this up would be great.

gfb08174

@tatiang & @gyroscope I have another question but it's totally unrelated and I was hoping you might know the answer.

I don't think I fully understand the "actor mode" and "camera mode" functions. I want to display the entire scene and its buttons within each scene of the game, not just a portion of it. I want to place clickable buttons right on the corners so you can go further/back.

http://imgur.com/a/ZvU4d

To explain with this picture. I want the gamer to see everything that's green, not just the area covered by the rectangle in the middle. Would I accomplish that by just dragging the sides in picture two to the farthermost edges?

Is it possible to change default setting when creating a new scene so that the entire green area is covered automatically instead of having to do it manually?

gyroscope

Hi, the camera sizing is for "tracking" an actor while the background pans - seeing as your scenes are static, there's no need to worry about the camera origin/size at all, just ignore it. The user will see the complete scene without touching the camera sizing/tracking.

gfb08174

@gyroscope great! so even if I might have changed the camera sizing on some scenes, it should not be a problem and I just wasted some time?

gyroscope

Yup.

P.S I'll delete your duplicate question in the new thread you've made - best not to duplicate questions in the Forums (can cause confusion).

gfb08174

Thank you! You're so helpful

tatiang

Let me make you a quick demo.

tatiang

This works equally well for 1 image or 1000 images. Just make sure your images are named 1.png, 2.png, etc. If you had multiple categories, you could concatenate a word onto the image name: Constrain Attribute self.Image to "truck"..game.pageNumber, and then name those images truck1.png, truck2.png, etc.

In fact, if you have several categories, you could just use a game attribute for the concatenation string. Call it something like game.category (text) and change its value to "truck" or "plane" or whatever and then do Constrain Attribute self.Image to game.category..game.pageNumber. You can then switch between categories in a single scene. Having a single scene also means no loading times.

tatiang

And here's a version that pulls table data for each car. [*All data is fabricated ]

gfb08174

this is amazing.

gfb08174

@tatiang when I click the left or right arrow it shoots very rapidly to the last page, only flashing the pages in between for a split second. How can I stop it from doing that?

gfb08174

@tatiang

So far your method has saved me a ton of time.

I have begun labeling my images accordingly car.1BMW.png, car.2BMW.png, car.3AUDI.png etc etc. in sequential numerical order.

Call it something like game.category (text) and change its value to "truck" or "plane" or whatever and then do Constrain Attribute self.Image to game.category..game.pageNumber.

I'm struggling with this one. I don't understand where I have to carry that work out.

1) I create an integer attribute, name it "category" and give it a value of 1.

2) I create an integer attribute, name it "cars" and give it a value of 1.

3) I go to the actor which will host the car images, constrain attribute self.Image to game.category..game.pageNumber

This would then make the actor which hosts the images display pictures that start with "car"?

tatiang

@gfb08174 said:
tatiang when I click the left or right arrow it shoots very rapidly to the last page, only flashing the pages in between for a split second. How can I stop it from doing that?

Strange. Is that happening in the demo file I posted or did you re-create those rules in your own project file? If the latter, can you post a screenshot of the rules? You'll need to upload it to a file-sharing site (Dropbox, MediaFire, etc.) and then post the download link here.

Call it something like game.category (text) and change its value to "truck" or "plane" or whatever and then do Constrain Attribute self.Image to game.category..game.pageNumber.

It's a text attribute, not an integer. If you have a button actor that changes the category to cars then you would change that attribute to "cars". Or for trucks, another button might change it to "trucks", etc. The idea is that you would prepend that attribute to the numerical image value. That allows you to create "cars1.png", "cars2.png", etc. or "trucks1.png", "trucks2.png", etc. You actually DON'T want to include unique names as you suggested:

car.1BMW.png, car.2BMW.png, car.3AUDI.png

Because that breaks the pattern of [category].[number].png. Simplify things and just name the image files car.1.png, car.2.png, car.3.png.

---

If this still doesn't make sense, let me try to explain a bit further...

In programming, we're always looking for patterns and repetitions so that we can simplify. In real world terms, if I have five things to carry to the car, it makes little sense for me to grab one, walk to the car, walk back, grab another, walk to the car, walk back, etc. In your case, if we example this list:

car.1.BMW.png
car.2.BMW.png
car.3.AUDI.png

The only thing the image filenames have in common is the word "car" and if we substitute an attribute (aka variable), we essentially get:

x.1.BMW.png
x.2.BMW.png
x.3.AUDI.png

Trying to automate the selection of images, we're stuck with "if we're on the first page, then change the image to x.1.BMW.png, but if we're on the second page, ..." Ugh.

If we instead have this list:

car.1.png
car.2.png
car.3.png

Then we can simplify to this:

x.1.png
x.2.png
x.3.png

All of a sudden that gives us the opportunity to substitute anything for x ("car", "truck", "boat", etc.) and as long as we keep adding one when we go forward a page, it will work for any image in any category. That's efficiency.

PhilipCC

@gyroscope and @tatiang I have been following this thread and your explanations have really helped me understand some things. Just wanted to let you know that your help and input is really appreciated, even though I didn't submit the question.

gfb08174

@PhilipCC Yeah. They've been outstanding. I'm two days new to GS and this community amazes me.

@tatiang your renaming the images trick did it!

here's the file below. You'll see how an arrow click will shoot you pages ahead. Excuse the presentation and layout, I created a new file to implement the suggestions before applying it to the real deal.

car test copy.zip

tatiang

Thanks, @PhilipCC! Always nice to hear it.

@gfb08174 Glad it's working for you. There's something funky about the URL formatting in your post. I tried to fix it but couldn't, so I just removed the formatting and left the URL. On top of that, when I did download it, it was only 4 KB so clearly something went wrong with the upload. Care to try again?

Edit: I think it was the spaces in the URL. Fixed now.

gfb08174

@tatiang how about now?

http://www.mediafire.com/download/2dhix5xr5camlzr/car_test.zip

tatiang

Yes, that worked.

The problem is that you are constraining the page number attribute in the Next and Prev actors. Those should both be Change Attribute behaviors. For future reference, if you constrain an attribute to an expression that includes that attribute, you create an endless loop. It's equivalent to saying "make sure x is always equal to x+1, constantly"; once x increases by one, it immediately must increase by one again and again and again...

One more thing I noticed is that you have unlocked most of the actors in the scene. This is generally not a good idea. Unlocked actors are "instances" and have their own rules that differ from the "prototype" actors in the Inspector. This can add a lot of confusion later on when trying to troubleshoot problems. I recommend that you save a backup copy of your project file and then revert all of those actors to their prototypes (there's a button to do so at the top of the actor's rules). Then fix the rules to match what you have in the backup copy.

For more information about instances and prototypes, see the video in the Tutorials link in my signature or go here.

tatiang

Another thing I noticed is that you're constraining self.Image to game.pageNumber, which is exactly what my demo does, but your image filenames are called "1car", "2car", and "3car". The self.Image attribute is a text attribute. When you change game.pageNumber, self.Image will then become a text string containing that number. For example, if you (fixed the Next and Prev actors and were able to) go to the second page, game.pageNumber would be 2 and self.Image would be "2". So the image won't show up since there isn't a corresponding image file named "2.png". You either need to rename the images and re-import them or you need to adjust your Constrain Attribute behavior so that is constrains self.Image to game.pageNumber.."car"

The .. symbol concatenates (joins) two text strings/attributes together.

gfb08174

@tatiang for a newbie like me, your advice and help has been unbelievable. It is so helpful and so clear. I imagine my questions reflect just how new I am to GS, but you've been really patient. Thank you.

One more thing I noticed is that you have unlocked most of the actors in the scene. This is generally not a good idea. Unlocked actors are "instances" and have their own rules that differ from the "prototype" actors in the Inspector. This can add a lot of confusion later on when trying to troubleshoot problems.

Yes. I am very guilty of doing this and am realizing the problems this creates just now...

An issue I am facing now with the new setup is that the layout of the last page of a theme looks identical to the previous ones, meaning the "next" arrow is still there. How can I substitute that "next" arrow in the very last page with a different image, which when clicked would redirect me to the home page?

tatiang

I'm a sucker for people who communicate effectively and take the time to explain what it is they are trying to do, how they are attempting to do it, and what is and isn't working for them.

It also helps that most of the day I'm explaining concepts to third graders.

How can I substitute that "next" arrow in the very last page with a different image, which when clicked would redirect me to the home page?

In the Next actor, have a rule that says When game.pageNumber < game.maxPages, change Image to [rightarrow image]; Otherwise change Image to [home image]. After each Change Image behavior, add a When Touch is Pressed rule that determines what should happen when the actors is clicked. As a best practice, I like to add a Note behavior above the Otherwise section to remind me that those rules/behaviors are there. As you build complexity, you'll be glad you did that.

gfb08174

@tatiang

The image change works like a charm, until this part:

After each Change Image behavior, add a When Touch is Pressed rule that determines what should happen when the actors is clicked.

Correct me if I am mistaken. Within "otherwise", and after the image change behavior, I create a rule which brings me "home" when clicking the home button.

This doesn't work properly. Say there are 10 pages, I will be redirected "home" when clicking next on page 9. I never get to see page 10. When I turn the rule off, I am brought to page 10 and see the image change (but then I'm not redirected home when I click it).

I also noticed another thing that I can't seem to change (unrelated to the next button). The color of the text feature which displays the car's name is always the same. So it will always say Ferrari, BMW, Audi etc. in the same color. I can't seem able customize a color to each car. How can I change the colors to for instance, red for a Ferrari, and yellow for a Lamborghini?

tatiang

@gfb08174 said:
Correct me if I am mistaken. Within "otherwise", and after the image change behavior, I create a rule which brings me "home" when clicking the home button.

Correct...

This doesn't work properly. Say there are 10 pages, I will be redirected "home" when clicking next on page 9. I never get to see page 10. When I turn the rule off, I am brought to page 10 and see the image change (but then I'm not redirected home when I click it).

Hmm. The problem is that the Touch is Pressed rule condition is triggering on the final page instead of waiting for another touch. I'll think about how best to fix that.

I also noticed another thing that I can't seem to change (unrelated to the next button). The color of the text feature which displays the car's name is always the same. So it will always say Ferrari, BMW, Audi etc. in the same color. I can't seem able customize a color to each car. How can I change the colors to for instance, red for a Ferrari, and yellow for a Lamborghini?

There is really no good way to do this. It's rare that I say that about GameSalad but the issue is that the Display Text behavior uses the system color picker instead of allowing for a GameSalad expression. So you'd have to hard code each choice (When game.pageNumber=1, Display Text [yellow color chosen]; When game.pageNumber=2, Display Text [red color chosen]; etc.).

tatiang

One solution is when the next arrow is pressed on the second to last page, to then spawn the house button actor and destroy the arrow actor.

Another idea is attached.