From 76153d714d7828c60bcd104163fb7424d0a86a63 Mon Sep 17 00:00:00 2001 From: Evan Hemsley <2342303+ehemsley@users.noreply.github.com> Date: Thu, 23 May 2019 18:09:45 -0700 Subject: [PATCH] spawning ball --- content/pong/ball/_index.md | 9 +++ content/pong/ball/spawning.md | 93 +++++++++++++++++++++++++++++ static/images/paddle_with_ball.png | Bin 0 -> 9373 bytes 3 files changed, 102 insertions(+) create mode 100644 content/pong/ball/_index.md create mode 100644 content/pong/ball/spawning.md create mode 100644 static/images/paddle_with_ball.png diff --git a/content/pong/ball/_index.md b/content/pong/ball/_index.md new file mode 100644 index 0000000..2cb9ea7 --- /dev/null +++ b/content/pong/ball/_index.md @@ -0,0 +1,9 @@ +--- +title: "Ball" +date: 2019-05-23T17:52:21-07:00 +weight: 200 +--- + +Pong isn't much without a ball. Let's get started on that. + +Fortunately there is a lot of stuff we can re-use already. That's the power of Encompass! diff --git a/content/pong/ball/spawning.md b/content/pong/ball/spawning.md new file mode 100644 index 0000000..0fc83bc --- /dev/null +++ b/content/pong/ball/spawning.md @@ -0,0 +1,93 @@ +--- +title: "Spawning" +date: 2019-05-23T18:09:07-07:00 +weight: 10 +--- + +In **game/game.ts**... + +```ts +const ball_entity = world_builder.create_entity(); + +const ball_position_component = ball_entity.add_component(PositionComponent); +ball_position_component.x = 640; +ball_position_component.y = 360; + +const ball_size = 16; +const ball_canvas = love.graphics.newCanvas(ball_size, ball_size); +love.graphics.setCanvas(ball_canvas); +love.graphics.setBlendMode("alpha"); +love.graphics.setColor(1, 1, 1, 1); +love.graphics.rectangle("fill", 0, 0, ball_size, ball_size); +love.graphics.setCanvas(); + +const ball_canvas_component = ball_entity.add_component(CanvasComponent); +ball_canvas_component.canvas = ball_canvas; +ball_canvas_component.x_scale = 1; +ball_canvas_component.y_scale = 1; +``` + +OK. We're both thinking it. Why is all this crap going straight in **game.ts**? And there's magic values everywhere! You are absolutely right. Encompass actually has a built-in abstraction Engine for creating new Entities called a Spawner. Let's use one. + +Let's create a new folder: **game/engines/spawners** + +And a new file: **game/engines/spawners/ball.ts** + +```ts +import { Reads, Spawner } from "encompass-ecs"; +import { CanvasComponent } from "game/components/canvas"; +import { PositionComponent } from "game/components/position"; +import { BallSpawnMessage } from "game/messages/ball_spawn"; + +@Reads(BallSpawnMessage) +export class BallSpawner extends Spawner { + public spawn_message_type = BallSpawnMessage; + + public spawn(message: BallSpawnMessage) { + const ball_entity = this.create_entity(); + + const ball_position_component = ball_entity.add_component(PositionComponent); + ball_position_component.x = message.x; + ball_position_component.y = message.y; + + const ball_canvas = love.graphics.newCanvas(message.size, message.size); + love.graphics.setCanvas(ball_canvas); + love.graphics.setBlendMode("alpha"); + love.graphics.setColor(1, 1, 1, 1); + love.graphics.rectangle("fill", 0, 0, message.size, message.size); + love.graphics.setCanvas(); + + const ball_canvas_component = ball_entity.add_component(CanvasComponent); + ball_canvas_component.canvas = ball_canvas; + ball_canvas_component.x_scale = 1; + ball_canvas_component.y_scale = 1; + } +} +``` + +Spawners aren't very complicated. They have one required property and method: *spawn_message_type* and *spawn*. + +When the Spawner reads a message of *spawn_message_type*, it runs its spawn method once. Simple as that. + +Now let's actually send out the BallSpawnMessage. + +In **game/game.ts**... + +```ts +... + + world_builder.add_engine(BallSpawner); + +... + + const ball_spawn_message = world_builder.emit_message(BallSpawnMessage); + ball_spawn_message.x = 640; + ball_spawn_message.y = 360; + ball_spawn_message.size = 16; + +... +``` + +![boring ball](/images/paddle_with_ball.png) + +Well, it draws, but it's a bit boring without any movement. Let's make it move around. diff --git a/static/images/paddle_with_ball.png b/static/images/paddle_with_ball.png new file mode 100644 index 0000000000000000000000000000000000000000..54b81e29fa6d3b005e00f7ef838b1c82b5d49d64 GIT binary patch literal 9373 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 BkM;ln literal 0 HcmV?d00001