*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."


Download NowName your own price

Click download now to get access to the following files:

Source code - How_to_create_a_simple_minigame_in_Tyranobuilder.zip 20 MB
VN Resources.zip 18 MB


Log in with your itch.io account to leave a comment.

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)


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.

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