Jump to content

Phaser tutorial for linux mdm


samriggs
 Share

Recommended Posts

Hello all

I just started using phaser as I am switching from java to javascript html5 for making games and find it fits my needs, I also use linux and decided to try and use phaser and phaser editor to make an animated  mdm theme for linux (login screen) mainly for linux miint but mdm is available across the board now.

There was an issue before in mdm with canvas but after trying a sample it worked great.

I decided to make a quick tutorial for anyone wanting to make a mdm theme using phaser and the phaser editor.

You make the animation then just drop it into the mdm folder for your theme and add the javascript links to the base mdm template I made.

Quick and simple.

Here is the link to my tutorial I made

http://samsstuffsoftware.blogspot.ca/2016/04/mdm-theme-created-with-phaser-framework.html

Just another use for phaser and the editor and hopefully to allow it to grow in the linux community.

Sam

Link to comment
Share on other sites

Hey @samriggs thanks for the post! Nice work on getting it to work on a linux distro! Makes me wish I was still working of Linux so I could do this for myself ;)

I took a good look at your code, and I think I've been able to tweak the performance. There isn't any need to enable the physics engine, as all you're doing is moving the sprites body, also, I went and made it a little bit more dynamic. I hope you don't mind ;) Here's the code :)

create() {
	// create the meteor group
	this.meteorGroup = this.game.add.group;
	this.rocks = [5, 6, 7, 8, 9];
	this.numOfMeteors = 5

	for (var i = 0, i <= this.numOfMeteors; i++) {
		// generate random x value between -150 and the games width
		var x = this.game.rnd.integerInRange(-150, this.game.width);
		var y = this.game.rnd.integerInRange(0, this.game.height);
		// pick a random rock from the rocks array 
		var rock = this.rocks[Math.floor(Math.random()*this.rocks.length)];
		// create the sprite
		var meteor = this.game.add.sprite(x, y, "myatlas","rock8")
		// pick a random speed for the meteor to travel at
		meteor.speed = this.game.rnd.integerInRange(200, 250);
		// pick a rancom spin for the meteor
		meteor.spin = this.game.rnd.integerInRange(-3, 4);
		this.meteorGroup.add(meteor);
	}
}

update() {
	for (var i = 0; i < this.meteorGroup.children.length; i++) {
		this.meteorGroup.children[i].x += this.meteorGroup.children[i].speed;
		this.meteorGrou.children[i].angle += this.meteorGroup.children[i].spin;
		// use world wrap to allow the sprites to go off on side, and continue back on the other
		this.game.world.wrap(this.meteorGroup.children[i], this.meteorGroup.children[i].width, false, true, true);
		// alternativly, set start and x positions for the sprites individually and perform a check on every update loop
	}
}

it will allow you to create as many meteors as you want by changing one variable. It also randomsies a lot of the positional data, meaning every time you go the login screen, it will never look the same. The only thing I've not tried before, is the world.wrap function. I checked the docs and that should work fine, but if it's an issue, you can just do what the button commend of the update loop says :)

Great work on getting this in an MDM! 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...