Add text help

voithos · Dec 31, 2013 · a8906b3 · a8906b3
1 parent 3b64b2f
commit a8906b3
Show file tree

Hide file tree

Showing 9 changed files with 327 additions and 2 deletions.
diff --git a/ATTRIBUTION.md b/ATTRIBUTION.md
@@ -10,3 +10,4 @@ Organized by asset:
 - `assets/sounds/earth.wav` made by `qubodup`, taken from OpenGameArt
 - `assets/sounds/fire.wav` made by `p0ss`, taken from OpenGameArt
 - `assets/sounds/pickup.wav` made by `p0ss`, taken from OpenGameArt
+- `assets/fonts/minecraftia-webfont.*` made by `Andrew Tyler`, from `http:https://www.andrewtyler.net/`
diff --git a/assets/fonts/minecraftia-webfont.eot b/assets/fonts/minecraftia-webfont.eot
diff --git a/assets/fonts/minecraftia-webfont.svg b/assets/fonts/minecraftia-webfont.svg
diff --git a/assets/fonts/minecraftia-webfont.ttf b/assets/fonts/minecraftia-webfont.ttf
diff --git a/assets/fonts/minecraftia-webfont.woff b/assets/fonts/minecraftia-webfont.woff
diff --git a/index.deploy.html b/index.deploy.html
@@ -3,8 +3,22 @@
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Elemental One</title>
+ <style>
+ @font-face {
+ font-family: 'minecraftiaregular';
+ src: url('assets/fonts/minecraftia-webfont.eot');
+ src: url('assets/fonts/minecraftia-webfont.eot?#iefix') format('embedded-opentype'),
+ url('assets/fonts/minecraftia-webfont.woff') format('woff'),
+ url('assets/fonts/minecraftia-webfont.ttf') format('truetype'),
+ url('assets/fonts/minecraftia-webfont.svg#minecraftiaregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ </style>
  </head>
  <body>
+ <!-- Hack to get the browser to download the font immediately -->
+ <span style="font-family: minecraftiaregular; visibility: hidden; position: absolute; top: -100px;">.</span>
  <script src="deps/phaser.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="build/all.min.js" type="text/javascript" charset="utf-8"></script>
  </body>

diff --git a/index.html b/index.html
@@ -3,8 +3,22 @@
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Elemental One</title>
+ <style>
+ @font-face {
+ font-family: 'minecraftiaregular';
+ src: url('assets/fonts/minecraftia-webfont.eot');
+ src: url('assets/fonts/minecraftia-webfont.eot?#iefix') format('embedded-opentype'),
+ url('assets/fonts/minecraftia-webfont.woff') format('woff'),
+ url('assets/fonts/minecraftia-webfont.ttf') format('truetype'),
+ url('assets/fonts/minecraftia-webfont.svg#minecraftiaregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ </style>
  </head>
  <body>
+ <!-- Hack to get the browser to download the font immediately -->
+ <span style="font-family: minecraftiaregular; visibility: hidden; position: absolute; top: -100px;">.</span>
  <script src="deps/phaser.js" type="text/javascript" charset="utf-8"></script>
  <script src="build/all.js" type="text/javascript" charset="utf-8"></script>
  </body>

diff --git a/src/data.js b/src/data.js
@@ -27,6 +27,14 @@ var checkCollideParticlePowerblock = function(particle, block) {
  return particle.group.element === block.element;
 };
 
+var font = {
+ style: {
+ font: '18px "minecraftiaregular"',
+ fill: 'slategray',
+ align: 'center'
+ }
+};
+
 var elements = {
  air: {
  element: 'air',
@@ -275,6 +283,23 @@ module.exports = {
  x: 1961,
  y: 490
  },
+ text: [
+ instance(font, {
+ x: 350,
+ y: 350,
+ msg: 'Hi! :D\nUse the arrow keys to move and jump about.\nTry to make it to the level exit!'
+ }),
+ instance(font, {
+ x: 1000,
+ y: 725,
+ msg: 'Grab a powergem with the "Z" key.\nThen use the spacebar to unleash your element!'
+ }),
+ instance(font, {
+ x: 1600,
+ y: 275,
+ msg: 'Use your power to remove obstacles.\nEach obstacle type matches one of your elements.'
+ })
+ ],
  items: [
  instance(powergems.water, {
  x: 1085,
@@ -317,6 +342,28 @@ module.exports = {
  x: 1960,
  y: 500
  },
+ text: [
+ instance(font, {
+ x: 250,
+ y: 650,
+ msg: 'Keep going!'
+ }),
+ instance(font, {
+ x: 1000,
+ y: 300,
+ msg: 'There are 4 types\nof powergems, but you\ncan only carry one at a time!'
+ }),
+ instance(font, {
+ x: 375,
+ y: 240,
+ msg: 'Use the "X" key to drop\nyour current powergem.\nThen, you can pick up a new one!'
+ }),
+ instance(font, {
+ x: 1800,
+ y: 550,
+ msg: 'From here on out,\nyou\'re on your own. :)'
+ })
+ ],
  items: [
  instance(powergems.water, {
  x: 485,

diff --git a/src/main.js b/src/main.js
@@ -7,7 +7,7 @@ var data = require('./data');
 /**
  * Game code
  */
-var game = new Phaser.Game(cfg.GAME_WIDTH, cfg.GAME_HEIGHT, Phaser.CANVAS);
+var game = window.game = new Phaser.Game(cfg.GAME_WIDTH, cfg.GAME_HEIGHT, Phaser.CANVAS);
 
 var Main = {};
 
@@ -38,7 +38,7 @@ function boot() {
  game.state.add(level, Main.Levels[level], false);
  });
 
- game.state.start('level1');
+ game.state.start('level2');
 }
 
 function preload() {
@@ -109,6 +109,7 @@ function create() {
 
  createBlocks();
  createBackgroundItems();
+ createHelpText();
  addGoal();
  addPlayer();
  createItems();
@@ -171,6 +172,15 @@ function createBackgroundItems() {
  createLevelElements(data.levels[game.level].backgroundItems, backgroundItems, 'items');
 }
 
+function createHelpText() {
+ if (data.levels[game.level].text) {
+ data.levels[game.level].text.forEach(function(text) {
+ var t = game.add.text(text.x, text.y, text.msg, text.style);
+ t.anchor.setTo(0.5, 0.5);
+ });
+ }
+}
+
 function createItems() {
  items = game.add.group();
  createLevelElements(data.levels[game.level].items, items, 'items');