Tutorials

Find tutorial navigation menu on the right side –>

Please post your ideas on tutorials in comments section below.

Future tutorials

Animation editor
Basics
Create from code
Main timeline
Easing
Character animations

Advanced
Parallax background
Path-finding
Scaling game
Handle mobile screen rotation

User interface
Loading
Menu
Intro
Shop
Game Over

Games
Dungeon
Never-ending runner
Candy crush like game

25 comments on “Tutorials”

  1. Pingback: How to create HTML5 games: Mighty Editor

  2. Is there a reason MightyEditor works not with most recent version of Phaser?
    Can I just exchange phaser.min.js or will that lead to problems of some sort?

    Reply

  3. For editor itself – there are some changes in phaser object picking ( or bounds? ) since v2.0.7 – so picking won’t work with newer version of phaser. Also tilelayer part has beeen changed since v2.0.7 – probably will need to make changes to tilelayer plugin – as MightyEditor allows to “unfix” tilemaplayer from camera.

    For projects – you can update phaser to < 2.2.0 – as in 2.2.0 tweens has been rewritten. If you don't use tween animations – you can update to latest phaser version.

    Reply

  6. Hello,
    I have written a code in play.js, that should say: generate a random integer between 0 and 10,

     
    if (this integer is 1)
{
    create an object "meteorite"
    and move it constantly by  one random number of pixels to the left
}

    My code:

    update: function() 
	{
		var randomnumber = Math.floor(Math.random()*11);
		var randomheight = Math.floor(Math.random()*500)-250;
		var randomspeed = Math.floor(Math.random()*50)+100;
		if (randomnumber == 1)
		{
			this.meteorite = mt.create("Meteorite");
			this.meteorite.body.velocity.x = - randomspeed;
		}
         }

    Also when when the object appears I want it to appear on “randomheight” y axis, but not to change the location on y afterwards.

    How can I make this work?

    Reply

  7. Hi Laura,

    you can write random integer function in more elegant way game.rnd.integerInRange(4, 8); Where integers are generated randomly from 4 to 8.

    after that you need operate with time. Create 2 variables in create method and assign current time and random time in ms for meteorite launch. I’ll set that launch will be in 1-2 seconds

    create: function(){
    this.lastTime = game.time.now;
    this.launchMeteorite = game.rnd.integerInRange(1000, 2000);
}

    then in update method check if time is passed and if yes then launch meteorite

    update: function(){
    if(game.time.now >= this.lastTime + this.launchTime){
        // here create a meteorite sprite
        this.lastTime = game.time.now; // set current time as last time
        this.launchMeteorite = game.rnd.integerInRange(1000, 2000); // set new random launch time
    }
}

    to change meteorite on y axis you need to do simple thing as

    this.meteorite.y = randomheight;

    Also I would recommend to store meteorite sprites in array. Like 

    this.meteorites = [];

    and a new meteorite can be added to array with push method 

    this.meteorites.push(meteorite);
    Reply

    1. It works, except when I increase the launch time, nothing changes, it still creates a new meteorite about every second, also I can’t seem to make the object to move constantly on the x axis by “randomspeed” pixels.
      Code:

      "use strict";
window.SpaceShooter.state.play = {
    create: function() {
        //here we add two tile sprites with parameters(locationX, locationY, width, height, key)
        this.wall = this.game.add.tileSprite(0, 0, 920, 500, '/BG.png');
        this.character = mt.create("character");
        this.meteorite = mt.create("Meteorite");
        this.lastTime = this.game.time.now;
        this.launchTime = this.game.rnd.integerInRange(50000, 60000);
        this.grass = this.game.add.tileSprite(0, 0, 920, 500, '/MeteoriteBG.png');
    },

    update: function() {
        var randomheight = this.game.rnd.integerInRange(0, 500);
        var randomspeed = this.game.rnd.integerInRange(-150, -50);
        if (this.game.time.now <= this.lastTime + this.launchTime) {
            this.meteorite = mt.create("Meteorite");
            this.meteorite.y = randomheight;
            this.meteorite.body.velocity.x = randomspeed;
            this.lastTime = this.game.time.now;
            this.launchTime = this.game.rnd.integerInRange(50000, 60000);
        }
    }
}

      Thank you for answer!

      Reply

      1. I think that you have problem in if() statement. It should be greater or equal not less

        if(this.game.time.now >= this.lastTime + this.launchTime){...
        Reply

    1. Check CocoonJS and Cordova. The first one has the best performance but you have to make game without DOM elements only canvas (and MightyEditor does that). Second – Cordova uses webview technology. Basically it opens native app with browser build in.

      Btw, soon we will have export option right from MightyEditor. So you would not have hassle to install any advanced tool. Just one click in your browser :)

      Reply

  9. Hi,
    Wanted to ask if there is a way to get an objects current location on y and x axis?
    I’m guessing this.character.getPosition(); isn’t it?
    Thank you in advance.

    Reply

  11. Have you tried highlighting the partten, left mouse click, choose copy and then opening your word program and pasting the partten on a blank document. Then print the partten from the word document? I do this a lot when I want to print out and also save a partten that is not available in pdf format.

    Reply

  13. I see you don’t monetize your site, don’t waste your traffic, you can earn extra cash every month because you’ve got hi quality content.

    If you want to know how to make extra money, search for: Mertiso’s tips best adsense
    alternative

    Reply

  14. I have checked your website and i’ve found some duplicate content, that’s why you don’t rank high in google,
    but there is a tool that can help you to create 100% unique content, search for:
    Boorfe’s tips unlimited content

    Reply

  15. Hi, is anybody here interested in online working?
    It is simple survey filling. Even 10 bucks per survey
    (ten minutes duration). If you are interested, send me email to hansorloski[at]gmail.com

    Reply

  18. I put in this code for movement, and it says somethings wrong

    “use strict”;
    window.g.state.play = {
    preload: function(){
    console.log(“loading play state”);
    },

    create: function(){
    console.log(“starting play state”);
    this.m = mt.create(“mario”);
    this.LKey = this.game.input.keyboard.addKey(Phaser.Keyboard.left);
    this.RKey = this.game.input.keyboard.addKey(Phaser.Keyboard.right);
    },

    update: function(){
    if(this.LKey.isDown){
    this.m.velocity.x -= 10;
    }else if(this.RKey.isDown){
    this.m.velocity.x += 10;

    Reply

  20. Frankly, I guess such posts must be printed and more because of the current circumstance and contemporary
    needs of their Millenials. I eagerly read these to find some fresh information that will correspond to your own needs.

    Reply

  21. This material has blown up my mind! So many intriguing truth and cases
    that are critical that I am amazed and pleased with the data that you give us.
    The issue is burning so that I indicate I’ll read it
    twice, as I did with https://notequaeler.ch/sheikh-rasheed-gambling/. Last but
    not least is I can share this information with friends of mine
    and obtain pleasure . Let such info to be!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *