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

Links:

Phaser engine
https://raw.githubusercontent.com/photonstorm/phaser/v2.6.2/build/phaser.min.js

TB Mini Game part 1
http://pastebin.com/04ywyzZf

TB Mini Game part 2
http://pastebin.com/HXNbELAM

TB Mini Game part 3
http://pastebin.com/3eipp80p

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

More information

Status	Prototype
Platforms	HTML5
Rating	Rated 4.0 out of 5 stars (2 total ratings)
Author	Anxo Games
Genre	Visual Novel
Made with	Phaser, TyranoBuilder
Tags	hatsune-miku, phaser, Tutorial, TyranoBuilder
Average session	A few minutes
Languages	English
Inputs	Keyboard, Mouse

Download

Download NowName your own price

Click download now to get access to the following files:

How_to_create_a_simple__mini_game_in_(TyranoBuilder1.8.4c).zip 22 MB

Source code - How_to_create_a_simple_minigame_in_(Tyranobuilder1.6).zip 20 MB

VN Resources.zip 18 MB

Development log

Project updated to TyranoBuilder v1.8.4c
Jan 26, 2020

Comments

IcanY4 years ago

Hi, I tried to open example project with TyranoBuilder but it says that it has been made older version and need to be converted. After converting is complete project does not start. Can you please update?

Anxo Games4 years ago

I will update the project.

Anxo Games4 years ago

The new update is now available.

Connorses6 years ago (1 edit)

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.

Anxo Games5 years ago (1 edit)

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.

Seita6 years ago

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

Anxo Games6 years ago

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

skang17 years ago

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?

Anxo Games7 years ago

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 });

skang17 years ago

thanks. This will be very helpful.

Anxo Games7 years ago (1 edit)

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.

skang16 years ago (1 edit)

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!

Anxo Games6 years ago

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.

skang16 years ago

thanks a lot! i will try it.

Quemachina7 years ago

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

Anxo Games7 years ago

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

Quemachina7 years ago(+1)

Thank you very much!^-^/

How to create a simple mini game in TyranoBuilder

Download

Development log

Comments