From 8c85ec17afbf4bb0ea9078e5b947cbd218791338 Mon Sep 17 00:00:00 2001 From: Nathan Kunicki Date: Sun, 6 Mar 2016 22:32:27 -0500 Subject: [PATCH] Added Text entity with Font representation class for rendering text --- examples/pong/pong.js | 61 ++++++++++++++++++++++++++++++++++++++-- src/classes/color.js | 10 +++---- src/classes/entity.js | 4 +-- src/classes/font.js | 22 +++++++++++++++ src/classes/text.js | 65 +++++++++++++++++++++++++++++++++++++++++++ src/es5.js | 4 +++ src/es6.js | 4 +++ 7 files changed, 160 insertions(+), 10 deletions(-) create mode 100644 src/classes/font.js create mode 100644 src/classes/text.js diff --git a/examples/pong/pong.js b/examples/pong/pong.js index f10b56a..6489ac8 100644 --- a/examples/pong/pong.js +++ b/examples/pong/pong.js @@ -10,7 +10,10 @@ let width = 640, baseSize = width / 64; let white = new MomentumEngine.Classes.Color(255, 255, 255), - black = new MomentumEngine.Classes.Color(0, 0, 0); + black = new MomentumEngine.Classes.Color(0, 0, 0), + red = new MomentumEngine.Classes.Color(255, 0, 0); + +let font = new MomentumEngine.Classes.Font("Arial", "32px", white, red); class Ball extends MomentumEngine.Classes.Rect { @@ -20,6 +23,8 @@ class Ball extends MomentumEngine.Classes.Rect { super(startingLeft, startingTop, baseSize, baseSize, white); + this.startingLeft = startingLeft; + this.startingTop = startingTop; this.speed = new MomentumEngine.Classes.Vector2D(0.1, 0.05); // Starting ball speed } @@ -29,8 +34,18 @@ class Ball extends MomentumEngine.Classes.Rect { this.pos.add(this.speed.clone().multiply(delta)); - if ((this.left + baseSize > width && this.speed.x > 0) || (this.left < 0 && this.speed.x < 0)) { - this.speed.x = -this.speed.x; + if (this.left + baseSize > width && this.speed.x > 0) { + + this.left = this.startingLeft; + this.top = this.startingTop; + this.game.leftScoreboard.increment(); + + } else if (this.left < 0 && this.speed.x < 0) { + + this.left = this.startingLeft; + this.top = this.startingTop; + this.game.rightScoreboard.increment(); + } if ((this.top + baseSize > height && this.speed.y > 0) || (this.top < 0 && this.speed.y < 0)) { @@ -52,6 +67,7 @@ class Paddle extends MomentumEngine.Classes.Rect { this.keyUp = keys.up; this.keyDown = keys.down; + this.scoreboard = null; } @@ -82,6 +98,25 @@ class Paddle extends MomentumEngine.Classes.Rect { } +class Scoreboard extends MomentumEngine.Classes.Text { + + + constructor (posLeft) { + super(posLeft, 35, font); + this.score = 0; + this.text = "Score: 0"; + } + + + increment () { + this.score++; + this.text = `Score: ${this.score}`; + } + + +} + + class Pong extends MomentumEngine.Classes.Game { @@ -107,7 +142,19 @@ class Pong extends MomentumEngine.Classes.Game { } + setLeftScoreboard (scoreboard) { + this.leftScoreboard = scoreboard; + this.addChildEntity(scoreboard); + } + + setRightScoreboard (scoreboard) { + this.rightScoreboard = scoreboard; + this.addChildEntity(scoreboard); + } + + addBall (ball) { + ball.game = this; this.balls.push(ball); this.addChildEntity(ball); } @@ -139,11 +186,19 @@ window.onload = function () { down: KeyConsts.CHAR_L }); + var leftScoreboard = new Scoreboard(baseSize), + rightScoreboard = new Scoreboard(width - baseSize); + + rightScoreboard.textAlign = "right"; // Right align the text of the right scoreboard + // Create scene graph pong.addBall(ball); pong.addPaddle(leftPaddle); pong.addPaddle(rightPaddle); + pong.setLeftScoreboard(leftScoreboard); + pong.setRightScoreboard(rightScoreboard); + pong.start(); diff --git a/src/classes/color.js b/src/classes/color.js index b213580..877055a 100644 --- a/src/classes/color.js +++ b/src/classes/color.js @@ -3,12 +3,12 @@ class Color { - constructor (r, g, b, a) { + constructor (r = 0, g = 0, b = 0, a = 1) { - this.r = r || 0; - this.g = g || 0; - this.b = b || 0; - this.a = a || 1; + this.r = r; + this.g = g; + this.b = b; + this.a = a; } diff --git a/src/classes/entity.js b/src/classes/entity.js index a728e28..923869b 100644 --- a/src/classes/entity.js +++ b/src/classes/entity.js @@ -5,9 +5,9 @@ import Vector2D from "./vector2d.js"; class Entity { - constructor (x, y) { + constructor (x = 0, y = 0) { - this.pos = new Vector2D(x || 0, y || 0); + this.pos = new Vector2D(x, y); this.velocity = new Vector2D(0, 0); this.acceleration = new Vector2D(0, 0); this.size = new Vector2D(0, 0); diff --git a/src/classes/font.js b/src/classes/font.js new file mode 100644 index 0000000..0cf996c --- /dev/null +++ b/src/classes/font.js @@ -0,0 +1,22 @@ +"use strict"; + +import Color from "./color.js"; + + +class Font { + + + constructor(family, size, fill = null, stroke = null) { + + this.family = family; + this.size = size; + this.fill = fill; + this.stroke = stroke; + + } + + +} + + +export default Font; \ No newline at end of file diff --git a/src/classes/text.js b/src/classes/text.js new file mode 100644 index 0000000..98a51c0 --- /dev/null +++ b/src/classes/text.js @@ -0,0 +1,65 @@ +"use strict"; + +import Entity from "./entity.js"; +import Vector2D from "./vector2d.js"; + + +class Text extends Entity { + + + constructor (x, y, font, text) { + + super(x, y); + + this.font = font; + this.text = text; + + this.textAlign = "start"; + this.textBaseline = "alphabetic"; + this.direction = "inherit"; + + } + + + isCollidingWith (entity) { + + if (entity instanceof Rect) { + return CollisionMethods.AABB(this, entity); + } + + } + + + render () { + + if (this._game) { + + this._game.context.font = `${this.font.size} ${this.font.family}`; + + this._game.context.textAlign = this.textAlign; + this._game.context.textBaseline = this.textBaseline; + this._game.context.direction = this.direction; + + if (this.font.fill) { + this._game.context.fillStyle = this.font.fill; + this._game.context.fillText(this.text, this.relativeLeft, this.relativeTop); + } + + if (this.font.stroke) { + this._game.context.strokeStyle = this.font.stroke; + this._game.context.strokeText(this.text, this.relativeLeft, this.relativeTop); + } + + return true; + + } else { + return false; + } + + } + + +} + + +export default Text; \ No newline at end of file diff --git a/src/es5.js b/src/es5.js index 9253aea..a11319d 100644 --- a/src/es5.js +++ b/src/es5.js @@ -8,6 +8,8 @@ import Vector2D from "./classes/vector2d.js"; import Sprite from "./classes/sprite.js"; import Rect from "./classes/rect.js"; import Color from "./classes/color.js"; +import Text from "./classes/text.js"; +import Font from "./classes/font.js"; import ImageLoader from "./classes/imageloader.js"; import {KeyConsts} from "./classes/keyboardinput.js"; @@ -22,6 +24,8 @@ const Classes = { Rect, Vector2D, Color, + Text, + Font, ImageLoader }; diff --git a/src/es6.js b/src/es6.js index f8bed1f..33d906f 100644 --- a/src/es6.js +++ b/src/es6.js @@ -8,6 +8,8 @@ import Vector2D from "./classes/vector2d.js"; import Sprite from "./classes/sprite.js"; import Rect from "./classes/rect.js"; import Color from "./classes/color.js"; +import Text from "./classes/text.js"; +import Font from "./classes/font.js"; import ImageLoader from "./classes/imageloader.js"; import {KeyConsts} from "./classes/keyboardinput.js"; @@ -22,6 +24,8 @@ const Classes = { Rect, Vector2D, Color, + Text, + Font, ImageLoader };