Comments

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)

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