Log in with your account to leave a comment.

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 ^^

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 ) {
      •["-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)


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.


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.


  • //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!^-^/