Jump to content

How to Position Phaser in Webpage?


SoulBeaver
 Share

Recommended Posts

Hello everyone,

 

 

I hop this question hasn't been answered yet. I want to layout the game in a manner similar to the Phaser Examples, but it was too complex for my needs. I also want to bundle phaser with meteor akin to this "Meteor with Phaser" post.

 

Since the 1.8mb project is slightly too large for this site, the adventurous can get a copy of the project at MediaFire.

 

The HTML page is HTML and Handlebars:

<head>	<title>phaser-meteor</title></head><body>	{{> header}}	{{> game}}	{{> body}}	{{> footer}}</body><template name="header">	<div class="header">		<h1>Meteor-Phaser-CoffeeScript Template</h1>	</div></template><template name="game">	<div class="game">		{{game}}	</div></template><template name="body">	<div class="body">		<p>Take a look at the game code:</p>		<!-- Snip -->	</div></template><template name="footer">	<div class="footer">		<p>That's about it. Have fun and keep on coding!</p>	</div></template>

With this snappy little CSS:

.game {	display: block; 	width: 800px; 	height: 600px; 	margin: 20px auto;} 

The game code isn't much (I'm omitting the MainMenuState for brevity)

Template.game.game = ->	game = new Phaser.Game(800, 600, Phaser.CANVAS)	game.state.add "MainMenu", new MainMenuState, true	return

The entire thing looks like this:

Meteor_Phaser_1.png

Meteor_Phaser_2.png

 

I'm obviously doing something wrong, but what? Any help would be greatly appreciated!

 

Link to comment
Share on other sites

Hello rich,

 

 

thanks for the help! Yeah, I was probably a little too eager with my question this time, I apologize. I worked on my phaser template some more this weekend and eventually figured it out along with a bunch of other niggling questions. Nevertheless, thanks for your quick and helpful reply!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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