*Warning: Disable pop-up blocker to see the scripts in this tutorial.



A simple tutorial to put a minigame in TyranoBuilder using the phaser.

Utilized software:


You can download the full source code of this tutorial by clicking "Download Now."

Published Oct 24, 2016
StatusPrototype
PlatformsHTML5
Rating
(1)
AuthorMightquiverwalk
GenreVisual Novel
Made withTyranoBuilder, Phaser
Tagshatsune-miku, phaser, tutorial, TyranoBuilder
Average sessionA few minutes
LanguagesEnglish
InputsKeyboard, Mouse

Download

Download
Source code - How_to_create_a_simple_minigame_in_(Tyranobuilder1.6).zip 20 MB
Download
VN Resources.zip 18 MB

Comments

Log in with itch.io to leave a comment.

(Edited 1 time)

I was trying to actually paste the code into TyranoBuilder, and got an error message I really don't understand. It's not very good at elaborating on the source of errors.

Error:_preview.ks:23:An error occurred. check the scenario script.

So far I haven't gotten any kind of javascript to run  in Tyranobuilder and it's getting frustrating. Any help is appreciated.

(Edited 1 time)

Possible solutions:

Note that there is a hierarchy in the command lines in TyranoBuilder.

You must be running the game after the command line that loads the Javascripts.

Try to run the game from the title screen.

Hello! Thank you for this fantastic tutorial. It really makes visual novel game more interesting to have minigames!

However I'm wondering can we use game states in Phaser that's loaded to Tyranobuilder?

For example I wanted to have a battle game with two states, first is state where we choose the characters for the team (like there are maybe 10 characters or so but we're only allowed to bring 3 in the team), and then the second state is the battle itself.

Or is there a way to do that, that doesn't include Phaser game states?

I'm sorry if I said something wrong. Thank you very much ^^

Yes you can. In that case you have to use a scene management.

https://phaser.io/phaser3/api/scene-manager

more examples:

https://phaser.io/examples

hi. i really thank you for ur tutorial. it was really helpful and fun. i also want to use phaser in my tyranobuilder made vn. may i ask u a question? i want to use filters of phaser, for there is no filter in tyranobuilder. when i made it and inserted it into my game, based on ur tutorial, it worked. but it can not fit itself to the change of the browser size. ur invader example changes its size when i change the size of the browser in the middle of its running. but my filter size still remains the same when i change it. i think u know why. what is the difference?

Filters for Tyranobuilder:

(Jquery) Create a new "iScript" (After the "Page Break") component and paste this code:

    • $( "div" ).each(function( i ) {
      • this.style["-webkit-filter"] = "grayscale(90%)";
    • });

Or (CSS) Create a new "TyranoScript" (After the "Page Break") component and paste this code:

  • [html]
    • <style>
      • div
        • {
          • -webkit-filter: grayscale(90%);
        • }
    • </style>
  • [endhtml]


Settings in phaser game size:

You must change the position of the CANAS (Phaser) based on this code:

  • [html]
    • <div class="game" id="game"></div>
    • <style>
      • canvas{
        • transform: translate(13%, 3.5%);
      • }
      • .game{
        • position:fixed;
        • width:100%;
        • height:100%;
        • background-color:#333;
      • }
    • </style>
  • [endhtml]

In the game script (Phaser) you must define the size of the CANVAS.

Note that this may affect the behavior of the game. After this process the game must receive the necessary corrections.

  • var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload:...render });

thanks. This will be very helpful.

(Edited 1 time)

Update:

For the game with PHASER to match the screen size of the game, use this command in jQuery/JavaScript to put the CANVAS on the same layer (HTML/DIV) as the characters:

$( "div.layer.0_fore.layer_fore.layer_camera" ).append( $("canvas") );


Always place this command after the PHASER/GAME script.

Attention:

This may interfere with LIVE2D and other things that use the CANVAS.

(Edited 1 time)

a little late. thanks again. i have another question.

i put a branch button after ur minigame. but that button does not appear.

is it because u removed the .layer.layer_free? how can we make a minigame people can visit again and again?

i tried to put a jump button, but i heard its good  to destroy the game and the html layer for performance.   

but i cannot hide the jump button and make it appear after finishing the minigame. 

thanks in advance!

Create a scene and place the mini game.

After the mini game is finished, place the "JUMP" command for another scene.

Put the command to go back to the mini game scene.

Now the mini game should work.

thanks a lot! i will try it.

Hello, thank you very much for this video! But it doesn't work so good.. I have no pictures, There just green squares.. AND I did a Handy Version and don't know how to fix it in the middle of the screen.. Please help me, I want the mini games in my game so badly! T_T

In the JavaScript file (Phaser game) you must define the path of each sprite in your game.

Example:

  • //Tyrano Builder folder
  • var myassetspath = 'data/others/minigame/';
  • function preload() {
    • //Image
    • game.load.image('bullet', myassetspath+'assets/imgs/game/bullet.png');
    • game.load.image('enemyBullet', myassetspath+'assets/imgs/game/enemy-bullet.png');
    • game.load.spritesheet('invader', myassetspath+'assets/imgs/game/invader32x32x4.png', 32, 32);
    • game.load.image('ship', myassetspath+'assets/imgs/game/player.png');
    • game.load.spritesheet('kaboom', myassetspath+'assets/imgs/game/explode.png', 128, 128);
    • game.load.image('starfield', myassetspath+'assets/imgs/game/starfield.png');
    • game.load.image('background', myassetspath+'assets/imgs/game/background2.png');
  • }

Complete file

Thank you very much!^-^/