How To: Tappable Dressing Game Using Arrows!

Tada!

Alright, I can’t sleep :sob: so I wanted to share a piece of code I made for a mini-dressing game that I think is pretty cool. I’m not sure if anyone has already explained this, if so… this may be redundant.

So basically this code allows players to loop through outfits using two tappable overlays (arrow up and arrow down) and select their choice using the green checkmark.

Arrow DOWN goes back one outfit and arrow UP goes up one outfit in the list!

The current code currently only works for THREE outfits


You will need to:

  1. Create a character called OUTFITCOUNTER
  2. Upload THREE overlays: up arrow, down arrow, and checkmark (or use my overlays)
  • Name these ARROW UP, ARROW DOWN, and SAVE
  1. Have THREE outfits and THREE gains, each gain corresponding to an outfit. Ex:
  • CHARACTER_outfit1 —> outfit1
  • CHARACTER_outfit2 —> outfit2
  • CHARACTER_outfit3 —> outfit3

    Note: This step is not mandatory unless you plan to save the outfit choice in a gain (EX: Your character will wear the outfit in a later scene). If your character is choosing the outfit for the next scene, skip this step. You should remove the following piece of code as well in the SAVE block:
REMOVE THIS

if (OUTFITCOUNTER =1) {
gain outfit1
} elif (OUTFITCOUNTER =2) {
gain outfit2
} else {
gain outfit3
}

  1. Replace my custom code with your own. Everywhere you see @CHARACTER, change it to your own character’s name. Everywhere you see CHARACTER_outfit<#>, change it to your desired outfits. If you want to use gains, change outfit<#> to your custom gains in the "SAVE" block.

CODE
   @OUTFITCOUNTER =0
   readerMessage Select an outfit!

   label tap_outfit_game
   tappable
   "ARROW UP" {
   if (OUTFITCOUNTER =0) {
   @OUTFITCOUNTER +1
   @CHARACTER changes into CHARACTER_outfit1
   } elif (OUTFITCOUNTER =1) {
   @OUTFITCOUNTER +1
   @CHARACTER changes into CHARACTER_outfit2
   } elif (OUTFITCOUNTER =2) {
   @OUTFITCOUNTER +1
   @CHARACTER changes into CHARACTER_outfit3
   } else {
   @OUTFITCOUNTER -2
   @CHARACTER changes into CHARACTER_outfit1
   }
   }
   "ARROW DOWN" {
   if (OUTFITCOUNTER =0) {
   @OUTFITCOUNTER +3
   @CHARACTER changes into CHARACTER_outfit3
   } elif (OUTFITCOUNTER =1) {
   @OUTFITCOUNTER +2
   @CHARACTER changes into CHARACTER_outfit3
   } elif (OUTFITCOUNTER =2) {
   @OUTFITCOUNTER -1
   @CHARACTER changes into CHARACTER_outfit1
   } else {
   @OUTFITCOUNTER -1
   @CHARACTER changes into CHARACTER_outfit2
   }
   }
   "SAVE" {
   if (OUTFITCOUNTER =1) {
   gain outfit1
   } elif (OUTFITCOUNTER =2) {
   gain outfit2
   } else {
   gain outfit3
   }
   &ui ARROW UP opacity 0 in 1
   &ui ARROW DOWN opacity 0 in 1
   @ui SAVE opacity 0 in 1
   goto save_choice
   } 

   goto tap_outfit_game
   label save_choice

      NARRATOR
   Nice choice!

If you’d like an explanation for how it works, keep reading:


HOW THIS WORKS

Basically, when the player taps an arrow to change outfits, we want the system to keep track of which outfit the player is currently previewing. This is why we need the OUTFITCOUNTER because we need to define a variable that represents the outfit the player currently sees.
We add one to OUTFITCOUNTER when we tap UP and we subtract one to OUTFITCOUNTER when we tap DOWN.

But we also have to keep track of the fact that the player isn’t wearing any of the outfit choices at the start, so that’s why we set OUTFITCOUNTER =0.

An odd case is when the player taps ARROW DOWN and OUTFITCOUNTER =0. What we do is, we need to set it to the third outfit OUTFITCOUNTER =3 (Because there’s no -1 outfit). This part of the looping mechanism.

Another odd case is when the player taps UP and OUTFITCOUNTER =3. Well, we only have three outfits, so we need to loop back to the first outfit by setting the OUTFITCOUNTER =1 and having the player preview the first outfit.

I hope this explanation helps. If you would like to include more outfits in this mini-game, and still aren’t sure how to implement this, leave a comment below and I’ll try to get back to you as soon as I can!

Anything after label save_choice is entirely up to you.


And of course, my overlays:

My boyfriend says they’re ugly. :joy: Lmao whatever, I still use them

UP

angle-circle-up (1)

DOWN

angle-circle-down (1)

CHECKMARK

checkmark

I will go to sleep now. :heart:

EDIT: ALSO, if you plan on using my overlays, please give me credit :slight_smile: my insta handle is @duki.writes

17 Likes

This is so cool!!! I’m gonna try and use this in my story!!! I’ll leave the credit to you tho wow!!

1 Like

Thank you so much for thinking so! :smile: And great!

1 Like

OMG, omg GONNA USE THIS. THANK U SO MUCH

1 Like

yayy i’m happy you like it :blush:

excuse me but the tappable game only work on phone?

it should work in the previewer too… is there an error?

Yeah? the template doenst have any error, but the game stop at the command tappable

Try using @ui instead of @overlay when creating the buttons

and where is the exactly place i should put that @ui?

if (OUTFITCOUNTER =1) {
gain outfit1
} elif (OUTFITCOUNTER =2) {
gain outfit2
} else {
gain outfit3
}

this isnt workịng either tho it said the line in this does not follow our formatting

@ui should be placed where you originally create the overlays for the up, down, and save buttons.
This is right before the tappable script.

Ex:

@ui ARROW UP create
@ui ARROW UP shifts to 20 371 in zone 1
@ui ARROW UP scales to 0.638 0.638
@ui ARROW UP moves to layer 1

@ui ARROW DOWN create
@ui ARROW DOWN shifts to 20 106 in zone 1
@ui ARROW DOWN scales to 0.808 0.808
@ui ARROW DOWN moves to layer 2

@ui SAVE create
@ui SAVE shifts to 206 426 in zone 1
@ui SAVE scales to 0.809 0.809
@ui SAVE moves to layer 3

Could you send me your code? Or a screenshot of the page?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.