Tutorial-Blog Eventing a QTE: Time Hits Minigame

[Touchfuzzy]

by: @hiddenone
Read the Tutorial Here!​

 

[Touchfuzzy]

Also yes, I realized I mixed up days and today was supposed to be a Resource Spotlight. I just realized that after finishing this up and posting it. So. Resource Spotlight on Tuesday, you get a tutorial today!

 

[BrentBAM]

I always wanted to be able to make one of these!! Thanks for the tutorial.

 

[EndlessGame]

Hey! This tutorial is exactly what I need in my game. Right now I'm currently having some issues with it so if you could help me out I'd really appreciate it.

I am using PRG Maker MV for this.

Basically the issue is that the green goal bar is outside of the background bar and no matter what I do I can't seem to figure out what I did wrong. When I try playing the mini game as soon as I press enter it acts as if I hit the targeted goal when I did not.

My screen size is 1920 x 1056 by the way. Here is the event I have.

Also not sure if "if button is pressed down" makes any difference compared to " if button is triggered" ......... this is the only difference I can find between our events because I cannot find that option. The images are the same sizes as yours I just changed the design in aesprite.

 

[hiddenone]

@cokes1999 The 'button is being triggered' option is new to MZ, but it shouldn't be causing any issues.

It's hard to tell since it's cut off in that screenshot, but two possibilities for why it's not working is that your variable 17 has the wrong equation so it's being set to 1 instead of the right number or you have a plugin/other event that is interfering with that variable. Try setting it with a direct designation instead of with variables and see if it appears where you want it then.

 

[Mythmaker19]

this is awesome! I can see this as a nice mini-game in a lot of games here. well done!

 

[EndlessGame]

@cokes1999 The 'button is being triggered' option is new to MZ, but it shouldn't be causing any issues.

It's hard to tell since it's cut off in that screenshot, but two possibilities for why it's not working is that your variable 17 has the wrong equation so it's being set to 1 instead of the right number or you have a plugin/other event that is interfering with that variable. Try setting it with a direct designation instead of with variables and see if it appears where you want it then.

With direct designation I can place it where I want it to. The variables are there too ensure the goal is placed randomly in the background bar. What doesn't make sense to me is that I copied the equation for Variable #17 directly from the tutorial and the images I used are the same size so there shouldn't be an issue. Ideally I don't even need the goal bar to be placed randomly but just in the center. I'm not sure how I'd be able to check to see if enter is pressed when the pointer is in that designation. there has to be something wrong with the $gameVariables value I suppose which checks to see if the pointer is in the goal area.

 

[hiddenone]

I copied the equation for Variable #17 directly from the tutorial

@cokes1999 Oh, that's it! You copied the equation exactly, but forgot to change it to match the variables you're using for this event. Change the 24 and 25 in the equations to match the variables you're using (15 and 16) and you should be good to go.

 

[EndlessGame]

@cokes1999 Oh, that's it! You copied the equation exactly, but forgot to change it to match the variables you're using for this event. Change the 24 and 25 in the equations to match the variables you're using (15 and 16) and you should be good to go.

Ah that was the issue. I also changed the (21) to (12) as I was using the wrong variable for that equation as well.

I'm only running into one more issue now - When I correctly press enter in the green goal area the success sound goes off but so does the failure sound. Rather than speeding up and continuing the mini game it triggers the else branch that says I haven't pressed enter in the goal area.

 

[hiddenone]

@cokes1999 I think what's happening is that you succeed at first, but because MV only has the 'is pressing' option for button clicks when the goal spot moves and you're still hitting the ok button the event thinks you've failed. So what you need is to put something in that will pause the event until you let go of the ok button.

Off the top of my head, slapping a loop that only stops once the button isn't being pressed into the event after the success SE should work. But I didn't test it so I'm not 100% positive it'll fix your issue.

 

[caethyril]

@hiddenone: looks good, but I recommmend adding a Wait 1 frame in the "[OK] is pressed" branch, otherwise this pause-loop will process multiple times per frame.

 

[EndlessGame]

@cokes1999 I think what's happening is that you succeed at first, but because MV only has the 'is pressing' option for button clicks when the goal spot moves and you're still hitting the ok button the event thinks you've failed. So what you need is to put something in that will pause the event until you let go of the ok button.

Off the top of my head, slapping a loop that only stops once the button isn't being pressed into the event after the success SE should work. But I didn't test it so I'm not 100% positive it'll fix your issue.
View attachment 180986

I tried this plus the Wait Frame that caethyril suggested and now the pointer doesn't move at all

Here is the event if you can see any issues with it..... thank you so much for taking your time to help.

 

[hiddenone]

@cokes1999 Hmm, it should've worked, I tested it out in my mz event and it seemed fine. The pointer should stay still until the 'ok' button is let go of, so it won't accidentally trigger again before the player is ready. Just to make sure, you put the loop with the added wait right after the success sound and it didn't work?

Spoiler: added loop position

 

[EndlessGame]

@cokes1999 Hmm, it should've worked, I tested it out in my mz event and it seemed fine. The pointer should stay still until the 'ok' button is let go of, so it won't accidentally trigger again before the player is ready. Just to make sure, you put the loop with the added wait right after the success sound and it didn't work?

Spoiler: added loop position

View attachment 181247

Ah, I must have read followed your instructions wrong. It works perfect now. Thank you so much for your help!!!!!

 

[lolotron6]

oh I have been looking for something like this, thank you!

 

[xabileug]

is there a QTE reference when it's circular?

 

[caethyril]

is there a QTE reference when it's circular?

That depends on what you mean by "circular".

If you just want the pointer to sweep out a circle instead of a straight line, you can use Rotate Picture (speed 2 = +1° per second) instead of Move Picture. To randomly position the target area image you could use Rotate Picture for that too (with Loop/Break), but it's much more convenient to use a script call, e.g. "set the angle (degrees) of picture 1 equal to the value of game variable 1":

---

$gameScreen.picture(1)._angle = $gameVariables.value(1);

---

In case it helps, I posted an MV demo of this approach here:

Dead By Daylight skill test reaction

I need a skill test plugin like the Dead by Daylight's skill test. I want my character to take a photo on the game if her checked the test at the right time by pressing space (or touching on the screen, on mobile). Here's the example: http://mistersyms.com/tools/gitgud/index Can anyone help me...

forums.rpgmakerweb.com

Spoiler: event transcript

◆Text：None, Window, Bottom ： ：Get ready! ◆Comment：Show gauge, rotated randomly ◆Control Variables：#0001 Gauge Angle = Random 45..270 ◆Show Picture：#1, gauge, Center (408,312), (80%,80%), 255, Normal ◆Script：$gameScreen.picture(1)._angle = $gameVariables.value(1); ◆Comment：Show pointer ◆Show Picture：#2, pointer, Center (408,312), (100%,85%), 255, Normal ◆Comment：Random start delay (60 ~ 120 frames) ◆Control Variables：#0002 Input Angle = Random 0..60 ◆Wait：60 frames ◆Loop ◆If：Input Angle = 0 ◆Break Loop ◆ ：Else ◆Control Variables：#0002 Input Angle -= 1 ◆Wait：1 frame ◆ ：End ◆ ：Repeat Above ◆Comment：Start pointer spinning (rotation speed 8 = 4 degrees per frame) ◆Rotate Picture：#2, 8 ◆Comment：Start input check loop ◆Control Variables：#0002 Input Angle = 0 ◆Loop ◆If：Button [OK] is pressed down ◆Comment：Input received! ◆Break Loop ◆ ：Else ◆Comment：Check whether pointer has come full circle ◆If：Input Angle ≥ 360 ◆Comment：Time's up! ◆Break Loop ◆ ：Else ◆Comment：Increase counter, check again next frame ◆Control Variables：#0002 Input Angle += 4 ◆Wait：1 frame ◆ ：End ◆ ：End ◆ ：Repeat Above ◆Comment：Debug message (press F8 during playtest to view) ◆Script：console.info('input angle:', $gameVariables.value(2), '\ntarget angle:', $gameVariables.value(1)); ◆Comment：Stop rotation o_o ◆Rotate Picture：#2, 0 ◆Comment：Calculate difference between input time and gauge angle ◆Control Variables：#0002 Input Angle -= Gauge Angle ◆Text：None, Window, Bottom ： ：Your score: \v[2] ◆Comment：Check for success! ◆If：Input Angle ≥ 0 ◆If：Input Angle ≤ 10 ◆Text：None, Window, Bottom ： ：Perfect! ◆ ：Else ◆If：Input Angle ≤ 30 ◆Text：None, Window, Bottom ： ：Good job! ◆ ：Else ◆Text：None, Window, Bottom ： ：Better luck next time! ◆ ：End ◆ ：End ◆ ：Else ◆Text：None, Window, Bottom ： ：Better luck next time! ◆ ：End ◆Comment：Tidy up pictures ◆Erase Picture：#1 ◆Erase Picture：#2

 

[xabileug]

something like this , there's large circle that shrinks and player needs to react when the ring is the same size as the target. "early, perfect, miss"

 

[caethyril]

large circle that shrinks and player needs to react when the ring is the same size as the target.

Ah, OK! Note that the variable doesn't have to be X or Y: it can be scale%, time, etc. I think the basic structure would still be the same, with a couple of changes:

• Use Move Picture to make the "pointer" image shrink over some duration.
• Each loop, count down the variable at a rate matching the Move Picture command.

E.g. if the picture shrinks from 100% to 10% scale over 90 frames, and the target is at 50% scale, then:

• A change of 90% over 90 frames means 1% reduction per frame. Yay!
• Set variable equal to, say, 100 (representing 100% pointer scale).
• Show Picture (pointer) at 100% scale, Center origin.
• Show Picture (target) at 50% scale, Center origin, same position as pointer.
• Move Picture (pointer) to the same place, but at 10% scale, over 90 frames.
• Loop:
  • Check for input (like in the original tutorial).
  • Decrease variable by 1 (pointer will visually scale down by 1% next frame).
  • Wait 1 frame.
• Judge result based on variable, e.g. 53~100 = early, 48~52 = perfect, otherwise miss.

If you want to randomise the target scale then you could try a Script command, e.g. (untested):

// Get picture ID 1.
const pic = $gameScreen.picture(1);
// Get target scale = value of variable 2.
const scale = $gameVariables.value(2);  // e.g. 50
// Set picture's target scale (X and Y).
pic._targetScaleX = pic._targetScaleY = scale;
// This transition should happen in 1 frame (i.e. instant).
pic._duration = pic._wholeDuration = 1;