In regards to 'minigames'

[Prvt. Donut]

I'm experienced enough with Javascript, html5 and canvas to make games suited to these technologies yet I can't see how we're supposed to implement them in Tyranobuilder.

So obviously we use iscript to do javascript (or loadjs) but we don't have a canvas to draw upon. Is there a basic javascript integration tutorial?

[delacannon]

Hi ,

You can use the tag http://tyranobuilder.com/tyranoscript-tags-reference/#html to add an html layer in order to create the canvas element to draw your game.

See the example, inside a TyranoScript box:

;create html canvas
;example from http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

[html top=0 left=0]

<canvas id="myCanvas" width="578" height="200" style="background:white;"></canvas>
   
<script>
window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
    var time = (new Date()).getTime() - startTime;
    var amplitude = 150;
    var period = 2000;
    var centerX = canvas.width / 2 - myRectangle.width / 2;
    var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;
    myRectangle.x = nextX;
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawRectangle(myRectangle, context);

    requestAnimFrame(function() {
        animate(myRectangle, canvas, context, startTime);
    });
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myRectangle = {
    x: 250,
    y: 70,
    width: 100,
    height: 50,
    borderWidth: 5
};
drawRectangle(myRectangle, context);
setTimeout(function() {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
}, 1000);

 </script>

[endhtml]

[jay_rab]

Hey there, thanks delacannon for the info. Is this an ideal solution for you Prvt. Donut?

[Prvt. Donut]

That's pretty much perfect. I was using the 'embed youtube' sample from the reference but it wasn't actually *creating* anything.

[Prvt. Donut]

delacannon, How would loading images work in this case?

http://www.w3schools.com/tags/canvas_drawimage.asp
http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

With Tyranobuilder we're looking at the ability to load files from our data directory, instead of a dataurl or server asset. I could turn the image into a base64 string and load it that way but I'd rather load from the directories we're already using for the rest of the game.

[delacannon]

Hi,

It will work well : ) Once your canvas is added to your html layer, you could draw on it any image from the data folder or from a remote domain with cross-origin resouce sharing.

[_tb_system_call storage=system/_scene1.ks]

[cm  ]
[bg  storage="room.jpg"  time="1000"  ]
[tb_show_message_window  ]
[tb_start_tyrano_code]

;create char
[chara_new name="yuko" storage="chara/1/yuko1_L.png"]
[chara_show name="yuko" left=0 top=20]

;create canvas
[html top=0 left=960 name='html_layer']
<canvas id="myCanvas" width="650" height="640" style="background:black;"></canvas>
[endhtml]
[anim name='html_layer' left=350]
[_tb_end_tyrano_code]

[iscript]

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var urls = ["data/fgimage/chara/1/yuko1_L.png", "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"];
var img = new Image();
var img2=new Image();

context.font = '20px Helvetica Arial';
context.fillStyle = 'white';
context.fillText('I am a canvas', 0, 50);

img.onload = function() {
context.drawImage(img,0,0);
};
img.src = urls[0];

img2.onload = function() {
context.drawImage(img2,250,270);
};
img2.src = urls[1];
[endscript]

Hello.[p]
This is a new game project.[p]


[s  ]

[Prvt. Donut]

<3 In case I never mentioned, you're amazing. I'm a C# coder by trade although not a stranger to Javascript in the context of Tyranobuilder, it's somewhat new territory.

Thank you again!

[Prvt. Donut]

Oh my, even more questions coming your way.

So something I thought might be easy, is to use window.location to point to a local html file that is the mini game in question. Location moves the WHOLE game (visual novel, not just our context) to the page (fun urls to load using this: html5test.com and whatismybrowser.com).

Now I'm pretty sure contexts can't load html files. And I'm also pretty sure that iframes don't work in tyranobuilder. So would the best solution be making my minigame locally in a regular web browser (html5/canvas) and then copy/pasting that code into a [iscript]?

[delacannon]

Depending on the purpose of your minigame and the size of it or if you use a game engine that requires some extra libs. The way to do this may differ slightly.

Maybe you prefer to load the .js inside the index.html or using the [loadjs] tag at the very beginning.

For my experience, putting all the small code inside an [iscript] tag works well.

This is the way I am doing it for snow particles:

I create a .ks file with all the code and then I call it from the game when is requiered or deleted it once is not required anymore.

http://gist.github.com/delacannon/f21d2f3df93e8f30650e

Call the *init_particles or your minigame subroutine like so inside TyranoBuilder:

[call storage="system/particles.ks" target=init_particles]
;effect variable
[eval exp="tf.part_speed=2"]
;custom macro
[snow]

And delete with:

[remove_particles]

working example[tb-particles-test-delacannon.c9.io]

[jay_rab]

Thats very neat delacannon

[[TDM] Nightmare]

Sry guys to barge in such a great conversation, but i got just a little question and i don't need such advance coding.

I'm just trying to get a stats windows for my game that is always fixed and from my search the only way i've found that could answer my problem is the use of the canvas tag, but i got 2 problems with it :

1- I can call the html and the canvas easily (i put it at the start of my every scene) but i run into the problem that the mouse doesn't advance the text anymore. Enter key works but not the mouse???? But the mouse work on button but once I click on it the canvas disapear! I'm scracthing my head on this one!!!

2- The other question is can i get my variable that i've already declared in TyranoScript (like [eval exp="sf.magic = '15'"]) to the canvas ? If yes how ?

Thanks guys!

[delacannon]

Originally posted by TDM C@ly$ton:

1- I can call the html and the canvas easily (i put it at the start of my every scene) but i run into the problem that the mouse doesn't advance the text anymore. Enter key works but not the mouse????

This is because the mouse event layer is under your canvas layer and it's blocking the click event. Play with the "z-index" attribute of your html / canvas layer till suit your needs.

Originally posted by TDM C@ly$ton:

2- The other question is can i get my variable that i've already declared in TyranoScript (like [eval exp="sf.magic = '15'"]) to the canvas ? If yes how ?

Yes, you can pass the TS variables.

[eval exp="sf.magic='15'"]

[html name="f"]
<canvas id="canvas" style="background:red"></canvas>
[endhtml]

[iscript]
var c = document.getElementById("canvas");
var context = c.getContext("2d");
context.font = '20pt Calibri';
context.fillStyle = 'white';
context.fillText("magic is " + sf.magic, 75, 100);
[endscript]

Variable "sf.magic" =  [emb exp="sf.magic"] 

[76561198207123301]

I've integrated a minigame through HTML and Javascript now, but I'd like to completely halt the scenario from moving forward until the minigame is passed. What should the flow of logic be if the minigame is loaded from the [loadjs] tag?

I've tried [wt], [jump], and using a stop block, but I can't seem to call other tags from within an [iscript] so I'm not sure how to resume to standard game flow.

EDIT: For the time being I am using a TyranoScript block immediately following a label and checking for a running expression to prevent the game from moving forward.

[if exp="running == true"]
[wait time=250]
[jump target="after_script_and_before_expression_check"]
[endif]

[Prvt. Donut]

Good info Gokiburikin!

[Sgt. Pepper]

Thanks for this thread and all who gave advice it helped me out alot

one question
When you make your mini game do you simply create a scene with only the script tags to build the game?

I think I see why I been messing up. Looking at the example code above it seems to me you are creating a new window (let say pop up) outside of the page the player is currently on.
Am I getting this right?

I thought the canvas ran inside the page (scene) window. In other words when you called a enw scene insteal of loading things like text box and such you put html code in there. I take it what I should be doing is creating an HTML window (pop up) outside of hte scene for the player to play?