"$dst"/src/game.ts
38 |
39 | echo "done."
40 |
--------------------------------------------------------------------------------
/skel/src/game.ts:
--------------------------------------------------------------------------------
1 | /// Simple and straightforward API .
32 |
33 | Samples
34 | -------
35 |
36 | These games are actually playable.
37 | Click the "(Code)" to see the actual source code.
38 | Be amazed at how it's simple and straightforward.
39 |
40 | * (Code)
41 | * (Code)
42 | * (Code)
43 | * (Code)
44 | * (Code)
45 | * (Code)
46 | * (Code)
47 | * (Code)
48 |
49 | Documents
50 | ---------
51 | Still work in progress...
52 |
53 | * User Guide
54 | * Quick Reference
55 | * Cheat Sheet
56 |
57 | Prerequisites
58 | -------------
59 | * TypeScript
60 | * (Optional) GNU Make
61 | * (Optional) TypeDoc http://typedoc.org/
62 |
--------------------------------------------------------------------------------
/samples/adventure/src/game.ts:
--------------------------------------------------------------------------------
1 | /// Goal! ')
189 | }
190 |
191 | onStart() {
192 | super.onStart();
193 | APP.lockKeys();
194 | APP.playSound('goal');
195 | }
196 |
197 | change() {
198 | this.changeScene(new Game());
199 | }
200 | }
201 |
202 |
203 | function main() {
204 | APP = new App(320, 240);
205 | APP.init(new Game());
206 | }
207 |
--------------------------------------------------------------------------------
/samples/shooter/src/game.ts:
--------------------------------------------------------------------------------
1 | /// Euskit User Guide
15 |
16 |
17 |
18 |
19 | Introduction
20 |
21 | Euskit (pronounced you-skit ) is a game engine for HTML5/Web games. It is
22 | specifically made for making retro-looking 2D games with pixel
23 | art. Growing up in 80s in Japan, those arcade games have always a
24 | special place in me. This is my attempt to headstart in several
25 | game jams that I participated. The engine is designed to be
26 | lightweight and self-contained in that it doesn't depend on any
27 | external library except TypeScript. It is licensed under MIT License.
28 |
29 |
Getting Started
30 |
31 | The following instruction applies both Windows and Unix (or Mac).
32 |
33 | Install Node.js and TypeScript .
34 |
35 | > npm install -g typescript
36 |
37 |
38 | Copy the skel directory as your working directory:
39 |
40 | index.html Main HTML file.
41 | tsconfig.json TypeScript compiler settings.
42 | base/*.ts Euskit base library code.
43 | src/game.ts Game source code.
44 | assets/ Game assets.
45 |
46 |
47 | (On Unix, this can be also done by running the following script.)
48 |
49 | $ ./tools/setup.sh /path/to/project
50 |
51 |
52 | Run tsc at the working directory.
53 |
54 | > tsc
55 |
56 |
57 | Open the index.html file.
58 |
59 |
60 | Big Picture
61 |
62 | Here are the important concepts in Euskit:
63 |
64 |
65 |
68 |
69 |
70 |
80 |
81 | App
82 | Images, ...
83 | Scene
84 | Scene
85 | ...
86 | Sprite
87 | Entity
88 | World
89 |
90 |
91 |
92 |
93 |
94 | App:
95 | Resource management and event loop.Scene:
97 | Game state management and event handling.World:
99 | Container where Entities are placed in.Entity:
101 | In-game character.Sprite:
103 | Graphical object to be shown.
105 |
Key Classes
108 |
109 | App
110 |
111 | Every game has exactly one App object. It does the
112 | basic pluming and resource management (images and sounds); it has
113 | an event loop and connect all the external parts (i.e. a browser)
114 | to the game. Typically, you don't have to change this part.
115 | Scene
116 |
117 | A Scene can be thought of a mini-app or "mode" within the App.
118 | It's pretty much an event handler that manages the in-game states.
119 | This is primarily what a Euskit user will write. Euskit supports
120 | multiple Scenes, but it's possible to create an entire game with just
121 | one Scene.
122 | Entity
123 |
124 | An Entity is a bit like a GameObject in Unity.
125 | (Unlike Unity, however, Euskit uses a traditional hierarchical model
126 | instead of components.)
127 | Each Entity has its own process, Collider and one or more
128 | Sprites.
129 | Once you place an Entity in the game world, it moves on its own.
130 | A Rect is typically used for Collider in 2D games.
131 | World
132 |
133 | A World is where Entitys belong to.
134 | It is basically a container that manages the state of each Entity
135 | and performs basic collision handling.
136 | Sprite
137 |
138 | A Sprite is something to be displayed.
139 | It has a location, rotation and the reference to its content.
140 | Unlike some other engines, Sprite doesn't know how to move itself.
141 | It is just sitting at a certain location on screen. Scene or
142 | Entity is responsible to change/move its position.
143 | Task
144 |
145 | Each Entity is a subclass of Task.
146 | A Task is an independent object that runs by itself.
147 | It is often convenient to create a short-lived task for a delayed action
148 | (see the examples ).
149 | Signal
150 |
151 | Signal is much like C# events, but it is renamed here
152 | to avoid confusing with HTML5 events. Unlike EventListener class in HTML5,
153 | Each Signals are distinguished not by strings but by variables
154 | (see the examples ).
155 |
156 |
157 | How To Make Games Like...
158 |
159 | 1. Platformer
160 |
161 | TODO
162 |
163 |
2. Shooter
164 |
165 | TODO
166 |
--------------------------------------------------------------------------------
/base/entity.ts:
--------------------------------------------------------------------------------
1 | /// ';
94 | }
95 |
96 | isVisible() {
97 | return this.isRunning();
98 | }
99 |
100 | render(ctx: CanvasRenderingContext2D) {
101 | if (this.sprites !== null && this.pos !== null) {
102 | renderSprites(
103 | ctx, this.sprites, this.pos,
104 | this.rotation, this.scale, this.alpha);
105 | }
106 | }
107 |
108 | getCollider(): Collider {
109 | if (this.pos === null || this.collider === null) return null;
110 | return this.collider.add(this.pos);
111 | }
112 |
113 | onCollided(entity: Entity) {
114 | // [OVERRIDE]
115 | }
116 |
117 | getMove(v: Vec2) {
118 | let collider = this.getCollider();
119 | return limitMotion(collider, v, this.fences);
120 | }
121 | }
122 |
123 |
124 | // Particle
125 | //
126 | class Particle extends Entity {
127 |
128 | movement: Vec2 = null;
129 |
130 | onTick() {
131 | super.onTick();
132 | if (this.movement !== null) {
133 | this.pos = this.pos.add(this.movement);
134 | let frame = this.getFrame();
135 | if (frame !== null) {
136 | let collider = this.getCollider();
137 | if (collider !== null && !collider.overlapsRect(frame)) {
138 | this.stop();
139 | }
140 | }
141 | }
142 | }
143 |
144 | getFrame(): Rect {
145 | // [OVERRIDE]
146 | return null;
147 | }
148 | }
149 |
150 |
151 | // TileMapEntity
152 | //
153 | class TileMapEntity extends Entity {
154 |
155 | tilemap: TileMap;
156 | isObstacle: (c:number)=>boolean = ((c:number) => { return false; });
157 |
158 | constructor(tilemap: TileMap, pos: Vec2) {
159 | super(pos);
160 | this.tilemap = tilemap;
161 | }
162 |
163 | getMove(v: Vec2) {
164 | let collider = this.getCollider();
165 | let hitbox = collider.getAABB();
166 | let range = hitbox.union(hitbox.add(v));
167 | let obstacles = this.tilemap.getTileRects(this.isObstacle, range);
168 | return limitMotion(collider, v, this.fences, obstacles);
169 | }
170 | }
171 |
172 |
173 | // PhysicsConfig
174 | //
175 | class PhysicsConfig {
176 |
177 | jumpfunc: (vy:number,t:number)=>number =
178 | ((vy:number, t:number) => {
179 | return (0 <= t && t <= 5)? -4 : vy+1;
180 | });
181 | maxspeed: Vec2 = new Vec2(6,6);
182 |
183 | isObstacle: (c:number)=>boolean = ((c:number) => { return false; });
184 | isGrabbable: (c:number)=>boolean = ((c:number) => { return false; });
185 | isStoppable: (c:number)=>boolean = ((c:number) => { return false; });
186 | }
187 |
188 |
189 | // PlatformerEntity
190 | //
191 | class PlatformerEntity extends TileMapEntity {
192 |
193 | physics: PhysicsConfig;
194 | velocity: Vec2 = new Vec2();
195 |
196 | protected _jumpt: number = Infinity;
197 | protected _jumpend: number = 0;
198 | protected _landed: boolean = false;
199 |
200 | constructor(physics: PhysicsConfig, tilemap: TileMap, pos: Vec2) {
201 | super(tilemap, pos);
202 | this.physics = physics;
203 | }
204 |
205 | onTick() {
206 | super.onTick();
207 | this.fall(this._jumpt);
208 | if (this.isJumping()) {
209 | this._jumpt++;
210 | } else {
211 | this._jumpt = Infinity;
212 | }
213 | }
214 |
215 | getMove(v0: Vec2, context=null as string) {
216 | let collider = this.getCollider();
217 | let hitbox = collider.getAABB();
218 | let range = hitbox.union(hitbox.add(v0));
219 | let obstacles = this.getObstaclesFor(range, v0, context);
220 | return limitMotion(collider, v0, this.fences, obstacles);
221 | }
222 |
223 | getObstaclesFor(range: Rect, v: Vec2, context: string): Rect[] {
224 | let f = ((context == 'fall')?
225 | this.physics.isStoppable :
226 | this.physics.isObstacle);
227 | return this.tilemap.getTileRects(f, range);
228 | }
229 |
230 | setJump(jumpend: number) {
231 | if (0 < jumpend) {
232 | if (this.canJump()) {
233 | this._jumpt = 0;
234 | this.onJumped();
235 | }
236 | }
237 | this._jumpend = jumpend;
238 | }
239 |
240 | fall(t: number) {
241 | if (this.canFall()) {
242 | let vy = this.physics.jumpfunc(this.velocity.y, t);
243 | let v = new Vec2(this.velocity.x, vy);
244 | v = this.getMove(v, 'fall');
245 | this.pos = this.pos.add(v);
246 | this.velocity = v.clamp(this.physics.maxspeed);
247 | let landed = (0 < vy && this.velocity.y == 0);
248 | if (!this._landed && landed) {
249 | this.onLanded();
250 | }
251 | this._landed = landed;
252 | } else {
253 | this.velocity = new Vec2();
254 | if (!this._landed) {
255 | this.onLanded();
256 | }
257 | this._landed = true;
258 | }
259 | }
260 |
261 | canMove(v: Vec2) {
262 | return v === this.getMove(v);
263 | }
264 |
265 | canJump() {
266 | return this.isLanded();
267 | }
268 |
269 | canFall() {
270 | return true;
271 | }
272 |
273 | isJumping() {
274 | return (this._jumpt < this._jumpend);
275 | }
276 |
277 | isLanded() {
278 | return this._landed;
279 | }
280 |
281 | onJumped() {
282 | // [OVERRIDE]
283 | }
284 |
285 | onLanded() {
286 | // [OVERRIDE]
287 | }
288 | }
289 |
--------------------------------------------------------------------------------
/base/task.ts:
--------------------------------------------------------------------------------
1 | /// ';
37 | }
38 |
39 | /** Returns the number of seconds elapsed since
40 | * this task has started. */
41 | getTime() {
42 | return (getTime() - this.startTime);
43 | }
44 |
45 | /** Returns true if the task is scheduled but not yet running. */
46 | isScheduled() {
47 | return (this.state == TaskState.Scheduled);
48 | }
49 |
50 | /** Returns true if the task is running. */
51 | isRunning() {
52 | return (this.state == TaskState.Running);
53 | }
54 |
55 | /** Invoked when the task is started. */
56 | onStart() {
57 | if (this.state == TaskState.Scheduled) {
58 | this.state = TaskState.Running;
59 | this.startTime = getTime();
60 | }
61 | }
62 |
63 | /** Invoked when the task is stopped. */
64 | onStop() {
65 | }
66 |
67 | /** Invoked at every frame while the task is running. */
68 | onTick() {
69 | if (this.lifetime <= this.getTime()) {
70 | this.stop();
71 | }
72 | }
73 |
74 | /** Terminates the task. */
75 | stop() {
76 | if (this.state == TaskState.Running) {
77 | this.state = TaskState.Finished;
78 | this.stopped.fire();
79 | }
80 | }
81 |
82 | /** Schedules another task right after this task.
83 | * @param next Next Task.
84 | */
85 | chain(next: Task, signal: Signal=null): Task {
86 | switch (this.state) {
87 | case TaskState.Scheduled:
88 | case TaskState.Running:
89 | signal = (signal !== null)? signal : this.stopped;
90 | signal.subscribe(() => {
91 | if (this.parent !== null) {
92 | this.parent.add(next);
93 | }
94 | });
95 | break;
96 | case TaskState.Finished:
97 | // Start immediately if this task has already finished.
98 | if (this.parent !== null) {
99 | this.parent.add(next);
100 | }
101 | }
102 | return next;
103 | }
104 | }
105 |
106 |
107 | /** Task that plays a sound.
108 | */
109 | class SoundTask extends Task {
110 |
111 | /** Sound object to play. */
112 | sound: HTMLAudioElement;
113 | /** Start time of the sound. */
114 | soundStart: number;
115 | /** End time of the sound. */
116 | soundEnd: number;
117 |
118 | /** Constructor.
119 | * @param sound Sound object to play.
120 | * @param soundStart Start time of the sound.
121 | */
122 | constructor(sound: HTMLAudioElement, soundStart=MP3_GAP, soundEnd=0) {
123 | super();
124 | this.sound = sound;
125 | this.soundStart = soundStart;
126 | this.soundEnd = soundEnd;
127 | }
128 |
129 | /** Invoked when the task is started. */
130 | onStart() {
131 | super.onStart();
132 | // Start playing.
133 | this.sound.currentTime = this.soundStart;
134 | this.sound.play();
135 | }
136 |
137 | /** Invoked when the task is stopped. */
138 | onStop() {
139 | // Stop playing.
140 | this.sound.pause();
141 | super.onStop();
142 | }
143 |
144 | /** Invoked at every frame while the task is running. */
145 | onTick() {
146 | super.onTick();
147 | // Check if the playing is finished.
148 | if (0 < this.soundEnd && this.soundEnd <= this.sound.currentTime) {
149 | this.stop();
150 | } else if (this.sound.ended) {
151 | this.stop();
152 | }
153 | }
154 | }
155 |
156 | /** Abstract list of Tasks
157 | */
158 | interface TaskList {
159 | /** Add a new Task to the list.
160 | * @param task Task to add.
161 | */
162 | add(task: Task): void;
163 |
164 | /** Remove an existing Task from the list.
165 | * @param task Task to remove.
166 | */
167 | remove(task: Task): void;
168 | }
169 |
170 | /** List of Tasks that run parallely.
171 | */
172 | class ParallelTaskList extends Task implements TaskList {
173 |
174 | /** List of current tasks. */
175 | tasks: Task[] = [];
176 | /** If true, this task is stopped when the list becomes empty. */
177 | stopWhenEmpty: boolean = true;
178 |
179 | toString() {
180 | return ('');
181 | }
182 |
183 | /** Empties the task list. */
184 | onStart() {
185 | super.onStart();
186 | this.tasks = [];
187 | }
188 |
189 | /** Invoked at every frame. Update the current tasks. */
190 | onTick() {
191 | for (let task of this.tasks) {
192 | if (task.isScheduled()) {
193 | task.onStart();
194 | }
195 | if (task.isRunning()) {
196 | task.onTick();
197 | }
198 | }
199 |
200 | // Remove the finished tasks from the list.
201 | let removed = this.tasks.filter((task: Task) => { return !task.isRunning(); });
202 | for (let task of removed) {
203 | this.remove(task);
204 | }
205 |
206 | // Terminates itself then the list is empty.
207 | if (this.stopWhenEmpty && this.tasks.length == 0) {
208 | this.stop();
209 | }
210 | }
211 |
212 | /** Add a new Task to the list.
213 | * @param task Task to add.
214 | */
215 | add(task: Task) {
216 | task.parent = this;
217 | this.tasks.push(task);
218 | }
219 |
220 | /** Remove an existing Task from the list.
221 | * @param task Task to remove.
222 | */
223 | remove(task: Task) {
224 | if (!task.isScheduled()) {
225 | task.onStop();
226 | }
227 | removeElement(this.tasks, task);
228 | }
229 | }
230 |
231 |
232 | /** List of Tasks that run sequentially.
233 | */
234 | class SequentialTaskList extends Task implements TaskList {
235 |
236 | /** List of current tasks. */
237 | tasks: Task[] = null;
238 | /** If true, this task is stopped when the list becomes empty. */
239 | stopWhenEmpty: boolean = true;
240 |
241 | /** Constructor.
242 | * @param tasks List of tasks. (optional)
243 | */
244 | constructor(tasks: Task[]=null) {
245 | super();
246 | this.tasks = tasks;
247 | }
248 |
249 | /** Empties the task list. */
250 | onStart() {
251 | super.onStart();
252 | if (this.tasks === null) {
253 | this.tasks = [];
254 | }
255 | }
256 |
257 | /** Add a new Task to the list.
258 | * @param task Task to add.
259 | */
260 | add(task: Task) {
261 | task.parent = this;
262 | this.tasks.push(task);
263 | }
264 |
265 | /** Remove an existing Task from the list.
266 | * @param task Task to remove.
267 | */
268 | remove(task: Task) {
269 | removeElement(this.tasks, task);
270 | }
271 |
272 | /** Returns the task that is currently running
273 | * (or null if empty) */
274 | getCurrentTask() {
275 | return (0 < this.tasks.length)? this.tasks[0] : null;
276 | }
277 |
278 | /** Invoked at every frame. Update the current tasks. */
279 | onTick() {
280 | let task:Task = null;
281 | while (true) {
282 | task = this.getCurrentTask();
283 | if (task === null) break;
284 | // Starts the next task.
285 | if (task.isScheduled()) {
286 | task.onStart();
287 | }
288 | if (task.isRunning()) {
289 | task.onTick();
290 | break;
291 | }
292 | // Finishes the current task.
293 | this.remove(task);
294 | }
295 |
296 | // Terminates itself then the list is empty.
297 | if (this.stopWhenEmpty && task === null) {
298 | this.stop();
299 | }
300 | }
301 | }
302 |
--------------------------------------------------------------------------------
/docs/cheatsheet.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Euskit Cheat Sheet
17 |
18 |
19 |
20 |
21 | Initialize Game
22 |
23 | let FONT: Font;
24 | let SPRITES:ImageSpriteSheet;
25 | function main() {
26 | APP = new App(320, 240);
27 | FONT = new Font(APP.images['font'], 'white');
28 | SPRITES = new ImageSpriteSheet(
29 | APP.images['sprites'], new Vec2(16,16), new Vec2(8,8));
30 | APP.init(new Game());
31 | }
32 | Basic Player Control
35 |
36 | class Player extends Entity {
37 | usermove: Vec2;
38 | constructor(pos: Vec2) {
39 | super(pos);
40 |
41 | let sprite = new RectSprite('green', new Rect(-10,-10,20,20));
42 | this.sprites = [sprite];
43 | this.collider = sprite.getBounds();
44 | }
45 | onStart() {
46 | super.onStart();
47 |
48 | this.usermove = new Vec2();
49 | }
50 | onTick() {
51 | super.onTick();
52 |
53 | this.moveIfPossible(this.usermove);
54 | }
55 | }
56 |
57 | class Game extends GameScene {
58 | player: Player;
59 | onStart() {
60 | super.onStart();
61 |
62 | this.player = new Player(this.world.area.center());
63 | this.world.add(this.player);
64 | }
65 | onDirChanged(v: Vec2) {
66 |
67 | this.player.usermove = v;
68 | }
69 | }
70 | Restrict Entity within Bounds
73 |
74 | class Player extends Entity {
75 | getFencesFor(range: Rect, v: Vec2, context: string): Rect[] {
76 | return [this.world.area];
77 | }
78 | }
79 | Spawn Another Entity
82 |
83 | class Bullet extends Particle {
84 | constructor(pos: Vec2) {
85 | super(pos);
86 | let bounds = new Rect(-2, -2, 4, 4);
87 | let sprite = new RectSprite('white', bounds)
88 | this.sprites = [sprite];
89 | this.collider = bounds;
90 | this.movement = new Vec2(8, 0);
91 | }
92 | getFrame() {
93 | return this.world.area;
94 | }
95 | }
96 |
97 | class Player extends Entity {
98 | ...
99 | fire() {
100 | let bullet = new Bullet(this.pos);
101 | this.world.add(bullet);
102 | }
103 | }
104 | Schedule Delayed Action
107 |
108 | let task = new Task();
109 | task.lifetime = 2;
110 | task.stopped.subscribe(() => { info("foo"); });
111 | this.world.add(task);
112 | Signal Subscription/Firing
115 |
116 | class Player extends Entity {
117 | happened: Signal;
118 | constructor(pos: Vec2) {
119 | super(pos);
120 | this.happened = new Signal(this);
121 | }
122 | somethingHappened() {
123 | this.happened.fire('holy!');
124 | }
125 | }
126 |
127 | let player = new Player();
128 | player.happened.subscribe((e:Entity, value:string) => {
129 | info(value);
130 | });
131 | Change Scene
134 |
135 | class Game extends GameScene {
136 | ...
137 | gameover() {
138 |
139 | APP.lockKeys();
140 |
141 | this.changeScene(new GameOver());
142 | }
143 | }
144 | Show Explosion Effect
147 |
148 | class Explosion extends Entity {
149 | constructor(pos: Vec2) {
150 | super(pos);
151 | this.sprites = [new RectSprite('yellow, new Rect(-10,-10,20,20))];
152 | this.lifetime = 0.5;
153 | }
154 | }
155 |
156 | class Player extends Entity {
157 | ...
158 | die() {
159 | this.chain(new Explosion(this.pos));
160 | this.stop();
161 | }
162 | }
163 | Create TileMap
166 |
167 | class Game extends GameScene {
168 | ...
169 | onStart() {
170 | const MAP = [
171 | "0010010000",
172 | "0222022002",
173 | ...
174 | "0000010030",
175 | ];
176 | this.tilemap = new TileMap(16, 10, 10, MAP.map(
177 | (v:string) => { return str2array(v); }
178 | ));
179 | let p = this.tilemap.findTile((c:number) => { return c == 3; });
180 | this.player = new Player(this, this.tilemap.map2coord(p).center());
181 | }
182 | render(ctx: CanvasRenderingContext2D) {
183 | super.render(ctx);
184 | this.tilemap.renderWindowFromBottomLeft(
185 | ctx, this.world.window,
186 | (x,y,c) => { return TILES.get(c); });
187 | }
188 | }
189 | Collision with TileMap
192 |
193 | class Player extends Entity {
194 | tilemap: TileMap;
195 | getObstaclesFor(range: Rect, v: Vec2, context=null as string): Rect[] {
196 | let f = ((c:number) => { return (c == 1 || c == 3); });
197 | return this.tilemap.getTileRects(f, range);
198 | }
199 | }
200 | Collision with Other Entities
203 |
204 | class Player extends Entity {
205 | getObstaclesFor(range: Rect, v: Vec2, context=null as string): Rect[] {
206 | let f = ((e:Entity) => { return (e instanceof Enemy); });
207 | return this.world.getEntityColliders(f, range);
208 | }
209 | }
210 | Draw Rectangle
213 |
214 | ctx.strokeStyle = 'white';
215 | ctx.lineWidth = 2;
216 | strokeRect(ctx, rect);
217 | Display Text
220 |
221 | let glyphs = APP.images['font'];
222 | let font = new Font(glyphs, 'white');
223 | let textbox = new TextBox(new Rect(0, 0, 300, 200), font);
224 | textbox.borderWidth = 2;
225 | textbox.borderColor = 'white';
226 | textbox.clear();
227 | textbox.putText(['HELLO', 'WORLD'], 'center', 'center');
228 | textbox.render(ctx);
229 | Blinking Banner
232 |
233 | let banner = new BannerBox(
234 | this.screen, font,
235 | ['COLLECT ALL TEH THINGS!']);
236 | banner.lifetime = 2.0;
237 | banner.interval = 0.5;
238 | this.world.add(banner);
239 | Text Particle
242 |
243 | let yay = new TextParticle(entity.pos, font, 'YAY!');
244 | yay.movement = new Vec2(0,-4);
245 | yay.lifetime = 1.0;
246 | this.world.add(yay);
247 | Typewriter Effect
250 |
251 | let textbox = new TextBox(new Rect(0, 0, 300, 200), font);
252 | let dialog = new DialogBox(textbox);
253 |
254 | dialog.addDisplay('Hello, this is a test.', 12);
255 |
259 | let glyphs = APP.images['font'];
260 | let font = new Font(glyphs, 'white');
261 | let invfont = new InvertedFont(glyphs, 'white');
262 | let textbox = new TextBox(new Rect(0, 0, 300, 200), font);
263 | let dialog = new DialogBox(textbox, invfont);
264 |
265 | dialog.addDisplay('What to do?');
266 | let menu = this.dialogBox.addMenu();
267 | menu.addItem(new Vec2(20,20), 'Foo');
268 | menu.addItem(new Vec2(20,30), 'Bar');
269 | menu.addItem(new Vec2(20,40), 'Bzzz');
270 | menu.selected.subscribe((value) => {
271 | info(value);
272 | });
273 | Mouse/Touchscreen Control
276 |
277 | class Button extends Entity {
278 | constructor(pos: Vec2) {
279 | super(pos);
280 | this.sprites = [new RectSprite('white', new Rect(-10,-10,20,20))];
281 | }
282 | }
283 | class Game extends GameScene {
284 | onStart() {
285 | this.world.add(new Button(new Vec2(100,100)));
286 | this.world.mouseDown.subscribe((world:World, entity:Entity) => {
287 | info(entity);
288 | }
289 | }
290 | }
291 | Text Button
294 |
295 | class TextButton extends Entity {
296 | constructor(frame: Rect, text: string) {
297 | super(frame.center());
298 | frame = frame.move(-this.pos.x, -this.pos.y);
299 | let textbox = new TextBox(frame, font);
300 | textbox.putText([text], 'center', 'center');
301 | this.sprites = [textbox];
302 | this.collider = frame;
303 | }
304 | isFocused() {
305 | return (this.world !== null &&
306 | this.world.mouseFocus === this);
307 | }
308 | renderExtra(ctx: CanvasRenderingContext2D) {
309 | if (this.isFocused()) {
310 | let rect = this.sprite.getBounds();
311 | ctx.strokeStyle = 'white';
312 | ctx.lineWidth = 2;
313 | strokeRect(ctx, rect.inflate(4,4));
314 | }
315 | }
316 | }
317 | ';
30 | }
31 |
32 | reset() {
33 | this.window = this.area.copy();
34 | this.entities = [];
35 | }
36 |
37 | onTick() {
38 | super.onTick();
39 | this.checkEntityCollisions();
40 | }
41 |
42 | add(task: Task) {
43 | if (task instanceof Entity) {
44 | task.world = this;
45 | this.entities.push(task);
46 | this.sortEntitiesByOrder();
47 | }
48 | super.add(task);
49 | }
50 |
51 | remove(task: Task) {
52 | if (task instanceof Entity) {
53 | removeElement(this.entities, task);
54 | }
55 | super.remove(task);
56 | }
57 |
58 | render(ctx: CanvasRenderingContext2D) {
59 | ctx.save();
60 | ctx.translate(-this.window.x, -this.window.y);
61 | for (let entity of this.entities) {
62 | if (!entity.isVisible()) continue;
63 | if (entity.pos === null) continue;
64 | entity.render(ctx);
65 | }
66 | ctx.restore();
67 | for (let entity of this.entities) {
68 | if (!entity.isVisible()) continue;
69 | if (entity.pos !== null) continue;
70 | entity.render(ctx);
71 | }
72 | }
73 |
74 | findEntityAt(p: Vec2): Entity {
75 | let found: Entity = null;
76 | for (let entity of this.entities) {
77 | if (!entity.isVisible()) continue;
78 | let collider = entity.getCollider();
79 | if (collider instanceof Rect) {
80 | if (collider.containsPt(p)) {
81 | if (found === null || entity.order < found.order) {
82 | found = entity;
83 | }
84 | }
85 | }
86 | }
87 | return found;
88 | }
89 |
90 | moveCenter(v: Vec2) {
91 | this.window = this.window.add(v);
92 | }
93 |
94 | setCenter(target: Rect, bounds: Rect=null) {
95 | if (this.window.width < target.width) {
96 | this.window.x = (target.width-this.window.width)/2;
97 | } else if (target.x < this.window.x) {
98 | this.window.x = target.x;
99 | } else if (this.window.x+this.window.width < target.x+target.width) {
100 | this.window.x = target.x+target.width - this.window.width;
101 | }
102 | if (this.window.height < target.height) {
103 | this.window.y = (target.height-this.window.height)/2;
104 | } else if (target.y < this.window.y) {
105 | this.window.y = target.y;
106 | } else if (this.window.y+this.window.height < target.y+target.height) {
107 | this.window.y = target.y+target.height - this.window.height;
108 | }
109 | if (bounds !== null) {
110 | this.window = this.window.clamp(bounds);
111 | }
112 | }
113 |
114 | moveAll(v: Vec2) {
115 | for (let entity of this.entities) {
116 | if (!entity.isRunning()) continue;
117 | if (entity.pos === null) continue;
118 | entity.pos = entity.pos.add(v);
119 | }
120 | }
121 |
122 | onMouseDown(p: Vec2, button: number) {
123 | if (button == 0) {
124 | this.mouseFocus = this.findEntityAt(p);
125 | this.mouseActive = this.mouseFocus;
126 | if (this.mouseActive !== null) {
127 | this.mouseDown.fire(this.mouseActive, p);
128 | }
129 | }
130 | }
131 |
132 | onMouseUp(p: Vec2, button: number) {
133 | if (button == 0) {
134 | this.mouseFocus = this.findEntityAt(p);
135 | if (this.mouseActive !== null) {
136 | this.mouseUp.fire(this.mouseActive, p);
137 | }
138 | this.mouseActive = null;
139 | }
140 | }
141 |
142 | onMouseMove(p: Vec2) {
143 | if (this.mouseActive === null) {
144 | this.mouseFocus = this.findEntityAt(p);
145 | }
146 | }
147 |
148 | findEntities(collider0: Collider): Entity[] {
149 | let found = [] as Entity[];
150 | for (let entity1 of this.entities) {
151 | if (!entity1.isRunning()) continue;
152 | let collider1 = entity1.getCollider();
153 | if (collider1 !== null && !collider1.overlaps(collider0)) continue;
154 | found.push(entity1);
155 | }
156 | return found;
157 | }
158 |
159 | applyEntities(f: (e:Entity)=>boolean, collider0: Collider=null): Entity {
160 | for (let entity1 of this.entities) {
161 | if (!entity1.isRunning()) continue;
162 | if (collider0 !== null) {
163 | let collider1 = entity1.getCollider();
164 | if (collider1 !== null && !collider1.overlaps(collider0)) continue;
165 | }
166 | if (f(entity1)) {
167 | return entity1;
168 | }
169 | }
170 | return null;
171 | }
172 |
173 | sortEntitiesByOrder() {
174 | this.entities.sort((a:Entity, b:Entity) => { return a.order-b.order; });
175 | }
176 |
177 | getEntityColliders(f0: (e:Entity)=>boolean, range: Collider=null) {
178 | let a = [] as Collider[];
179 | let f = (entity: Entity) => {
180 | if (f0(entity)) {
181 | let collider = entity.getCollider();
182 | if (collider != null) {
183 | a.push(collider);
184 | }
185 | }
186 | return false;
187 | }
188 | this.applyEntities(f, range);
189 | return a;
190 | }
191 |
192 | checkEntityCollisions() {
193 | this.applyEntityPairs(
194 | (e0:Entity, e1:Entity) => {
195 | e0.onCollided(e1);
196 | e1.onCollided(e0);
197 | });
198 | }
199 |
200 | applyEntityPairs(f: (e0:Entity,e1:Entity)=>void) {
201 | for (let i = 0; i < this.entities.length; i++) {
202 | let entity0 = this.entities[i];
203 | if (!entity0.isRunning()) continue;
204 | let collider0 = entity0.getCollider();
205 | if (collider0 === null) continue;
206 | for (let j = i+1; j < this.entities.length; j++) {
207 | let entity1 = this.entities[j];
208 | if (!entity1.isRunning()) continue;
209 | let collider1 = entity1.getCollider();
210 | if (collider1 === null) continue;
211 | if (collider0.overlaps(collider1)) {
212 | f(entity0, entity1)
213 | }
214 | }
215 | }
216 | }
217 | }
218 |
219 |
220 | // Scene
221 | //
222 | class Scene {
223 |
224 | screen: Rect;
225 |
226 | constructor() {
227 | this.screen = new Rect(0, 0, APP.canvas.width, APP.canvas.height);
228 | }
229 |
230 | changeScene(scene: Scene) {
231 | APP.post(() => { APP.setScene(scene); });
232 | }
233 |
234 | reset() {
235 | this.onStop();
236 | this.onStart();
237 | }
238 |
239 | onStart() {
240 | // [OVERRIDE]
241 | }
242 |
243 | onStop() {
244 | // [OVERRIDE]
245 | }
246 |
247 | onTick() {
248 | // [OVERRIDE]
249 | }
250 |
251 | render(ctx: CanvasRenderingContext2D) {
252 | // [OVERRIDE]
253 | }
254 |
255 | onDirChanged(v: Vec2) {
256 | // [OVERRIDE]
257 | }
258 |
259 | onButtonPressed(keysym: KeySym) {
260 | // [OVERRIDE]
261 | }
262 |
263 | onButtonReleased(keysym: KeySym) {
264 | // [OVERRIDE]
265 | }
266 |
267 | onKeyDown(key: number) {
268 | // [OVERRIDE]
269 | }
270 |
271 | onKeyUp(key: number) {
272 | // [OVERRIDE]
273 | }
274 |
275 | onKeyPress(char: number) {
276 | // [OVERRIDE]
277 | }
278 |
279 | onMouseDown(p: Vec2, button: number) {
280 | // [OVERRIDE]
281 | }
282 |
283 | onMouseUp(p: Vec2, button: number) {
284 | // [OVERRIDE]
285 | }
286 |
287 | onMouseMove(p: Vec2) {
288 | // [OVERRIDE]
289 | }
290 |
291 | onFocus() {
292 | // [OVERRIDE]
293 | }
294 |
295 | onBlur() {
296 | // [OVERRIDE]
297 | }
298 | }
299 |
300 |
301 | // HTMLScene
302 | //
303 | class HTMLScene extends Scene {
304 |
305 | text: string;
306 |
307 | constructor(text: string) {
308 | super();
309 | this.text = text;
310 | }
311 |
312 | onStart() {
313 | super.onStart();
314 | let scene = this;
315 | let bounds = APP.elem.getBoundingClientRect();
316 | let e = APP.addElement(
317 | new Rect(bounds.width/8, bounds.height/4,
318 | 3*bounds.width/4, bounds.height/2));
319 | e.align = 'left';
320 | e.style.padding = '10px';
321 | e.style.color = 'black';
322 | e.style.background = 'white';
323 | e.style.border = 'solid black 2px';
324 | e.innerHTML = this.text;
325 | e.onmousedown = ((e) => { scene.onChanged(); });
326 | }
327 |
328 | render(ctx: CanvasRenderingContext2D) {
329 | ctx.fillStyle = 'rgb(0,0,0)';
330 | fillRect(ctx, this.screen);
331 | }
332 |
333 | onChanged() {
334 | // [OVERRIDE]
335 | }
336 |
337 | onMouseDown(p: Vec2, button: number) {
338 | this.onChanged();
339 | }
340 |
341 | onKeyDown(key: number) {
342 | this.onChanged();
343 | }
344 |
345 | }
346 |
347 |
348 | // GameScene
349 | //
350 | class GameScene extends Scene {
351 |
352 | world: World = null;
353 |
354 | onStart() {
355 | super.onStart();
356 | this.world = new World(this.screen);
357 | this.world.onStart();
358 | }
359 |
360 | onTick() {
361 | super.onTick();
362 | this.world.onTick();
363 | }
364 |
365 | render(ctx: CanvasRenderingContext2D) {
366 | super.render(ctx);
367 | this.world.render(ctx);
368 | }
369 |
370 | add(task: Task) {
371 | this.world.add(task);
372 | }
373 |
374 | remove(task: Task) {
375 | this.world.remove(task);
376 | }
377 |
378 | onMouseDown(p: Vec2, button: number) {
379 | super.onMouseDown(p, button);
380 | this.world.onMouseDown(p, button);
381 | }
382 |
383 | onMouseUp(p: Vec2, button: number) {
384 | super.onMouseUp(p, button);
385 | this.world.onMouseUp(p, button);
386 | }
387 |
388 | onMouseMove(p: Vec2) {
389 | super.onMouseMove(p);
390 | this.world.onMouseMove(p);
391 | }
392 | }
393 |
--------------------------------------------------------------------------------
/base/tilemap.ts:
--------------------------------------------------------------------------------
1 | /// ';
34 | }
35 |
36 | get(x: number, y: number): number {
37 | if (0 <= x && 0 <= y && x < this.width && y < this.height) {
38 | return this.map[y][x];
39 | } else {
40 | return -1;
41 | }
42 | }
43 |
44 | set(x: number, y: number, c: number) {
45 | if (0 <= x && 0 <= y && x < this.width && y < this.height) {
46 | this.map[y][x] = c;
47 | this._rangemap = {};
48 | }
49 | }
50 |
51 | fill(c: number, rect: Rect=null) {
52 | if (rect === null) {
53 | rect = new Rect(0, 0, this.width, this.height);
54 | }
55 | for (let dy = 0; dy < rect.height; dy++) {
56 | let y = rect.y+dy;
57 | for (let dx = 0; dx < rect.width; dx++) {
58 | let x = rect.x+dx;
59 | this.map[y][x] = c;
60 | }
61 | }
62 | this._rangemap = {};
63 | }
64 |
65 | copy(): TileMap {
66 | let map:Int32Array[] = [];
67 | for (let a of this.map) {
68 | map.push(a.slice());
69 | }
70 | return new TileMap(this.tilesize, this.width, this.height, map);
71 | }
72 |
73 | coord2map(rect: Vec2|Rect): Rect {
74 | let ts = this.tilesize;
75 | if (rect instanceof Rect) {
76 | let x0 = Math.floor(rect.x/ts);
77 | let y0 = Math.floor(rect.y/ts);
78 | let x1 = Math.ceil((rect.x+rect.width)/ts);
79 | let y1 = Math.ceil((rect.y+rect.height)/ts);
80 | return new Rect(x0, y0, x1-x0, y1-y0);
81 | } else {
82 | let x = Math.floor(rect.x/ts);
83 | let y = Math.floor(rect.y/ts);
84 | return new Rect(x, y, 1, 1);
85 | }
86 | }
87 |
88 | map2coord(rect: Vec2|Rect): Rect {
89 | let ts = this.tilesize;
90 | if (rect instanceof Vec2) {
91 | return new Rect(rect.x*ts, rect.y*ts, ts, ts);
92 | } else if (rect instanceof Rect) {
93 | return new Rect(rect.x*ts, rect.y*ts,
94 | rect.width*ts, rect.height*ts);
95 | } else {
96 | return null;
97 | }
98 | }
99 |
100 | apply(f: (x:number,y:number,c:number)=>boolean, rect: Rect=null): Vec2 {
101 | if (rect === null) {
102 | rect = new Rect(0, 0, this.width, this.height);
103 | }
104 | for (let dy = 0; dy < rect.height; dy++) {
105 | let y = rect.y+dy;
106 | for (let dx = 0; dx < rect.width; dx++) {
107 | let x = rect.x+dx;
108 | let c = this.get(x, y);
109 | if (f(x, y, c)) {
110 | return new Vec2(x,y);
111 | }
112 | }
113 | }
114 | return null;
115 | }
116 |
117 | shift(vx: number, vy: number, rect: Rect=null) {
118 | if (rect === null) {
119 | rect = new Rect(0, 0, this.width, this.height);
120 | }
121 | let src:Int32Array[] = [];
122 | for (let dy = 0; dy < rect.height; dy++) {
123 | let a = new Int32Array(rect.width);
124 | for (let dx = 0; dx < rect.width; dx++) {
125 | a[dx] = this.map[rect.y+dy][rect.x+dx];
126 | }
127 | src.push(a);
128 | }
129 | for (let dy = 0; dy < rect.height; dy++) {
130 | for (let dx = 0; dx < rect.width; dx++) {
131 | let x = (dx+vx + rect.width) % rect.width;
132 | let y = (dy+vy + rect.height) % rect.height;
133 | this.map[rect.y+y][rect.x+x] = src[dy][dx];
134 | }
135 | }
136 | }
137 |
138 | findTile(f0: (c:number)=>boolean, rect: Rect=null): Vec2 {
139 | return this.apply((x,y,c)=>{return f0(c);}, rect);
140 | }
141 |
142 | findTileByCoord(f0: (c:number)=>boolean, range: Rect): Rect {
143 | let p = this.apply((x,y,c)=>{return f0(c);}, this.coord2map(range));
144 | return (p === null)? null : this.map2coord(p);
145 | }
146 |
147 | getTileRects(f0: (c:number)=>boolean, range:Rect): Rect[] {
148 | let ts = this.tilesize;
149 | let rects = [] as Rect[];
150 | let f = (x:number, y:number, c:number) => {
151 | if (f0(c)) {
152 | rects.push(new Rect(x*ts, y*ts, ts, ts));
153 | }
154 | return false;
155 | }
156 | this.apply(f, this.coord2map(range));
157 | return rects;
158 | }
159 |
160 | getRangeMap(key:string, f: (c:number)=>boolean): RangeMap {
161 | let map = this._rangemap[key];
162 | if (map === undefined) {
163 | map = new RangeMap(this, f);
164 | this._rangemap[key] = map;
165 | }
166 | return map;
167 | }
168 |
169 | render(ctx: CanvasRenderingContext2D, sprites: SpriteSheet) {
170 | this.renderFromBottomLeft(
171 | ctx, (x,y,c) => { return sprites.get(c); });
172 | }
173 |
174 | renderFromBottomLeft(
175 | ctx: CanvasRenderingContext2D,
176 | ft: (x:number,y:number,c:number)=>Sprite,
177 | x0=0, y0=0, w=0, h=0) {
178 | // Align the pos to the bottom left corner.
179 | let ts = this.tilesize;
180 | w = (w != 0)? w : this.width;
181 | h = (h != 0)? h : this.height;
182 | // Draw tiles from the bottom-left first.
183 | for (let dy = h-1; 0 <= dy; dy--) {
184 | let y = y0+dy;
185 | for (let dx = 0; dx < w; dx++) {
186 | let x = x0+dx;
187 | let c = this.get(x, y);
188 | let sprite = ft(x, y, c);
189 | if (sprite !== null) {
190 | ctx.save();
191 | ctx.translate(ts*dx, ts*dy);
192 | sprite.render(ctx);
193 | ctx.restore();
194 | }
195 | }
196 | }
197 | }
198 |
199 | renderFromTopRight(
200 | ctx: CanvasRenderingContext2D,
201 | ft: (x:number,y:number,c:number)=>Sprite,
202 | x0=0, y0=0, w=0, h=0) {
203 | // Align the pos to the bottom left corner.
204 | let ts = this.tilesize;
205 | w = (w != 0)? w : this.width;
206 | h = (h != 0)? h : this.height;
207 | // Draw tiles from the top-right first.
208 | for (let dy = 0; dy < h; dy++) {
209 | let y = y0+dy;
210 | for (let dx = w-1; 0 <= dx; dx--) {
211 | let x = x0+dx;
212 | let c = this.get(x, y);
213 | let sprite = ft(x, y, c);
214 | if (sprite !== null) {
215 | ctx.save();
216 | ctx.translate(ts*dx, ts*dy);
217 | sprite.render(ctx);
218 | ctx.restore();
219 | }
220 | }
221 | }
222 | }
223 |
224 |
225 | renderWindow(
226 | ctx: CanvasRenderingContext2D,
227 | window:Rect, sprites: SpriteSheet) {
228 | this.renderWindowFromBottomLeft(
229 | ctx, window, (x,y,c) => { return sprites.get(c); });
230 | }
231 |
232 | renderWindowFromBottomLeft(
233 | ctx: CanvasRenderingContext2D,
234 | window: Rect,
235 | ft: (x:number,y:number,c:number)=>Sprite) {
236 | let ts = this.tilesize;
237 | let x0 = Math.floor(window.x/ts);
238 | let y0 = Math.floor(window.y/ts);
239 | let x1 = Math.ceil((window.x+window.width)/ts);
240 | let y1 = Math.ceil((window.y+window.height)/ts);
241 | ctx.save();
242 | ctx.translate(x0*ts-window.x, y0*ts-window.y);
243 | this.renderFromBottomLeft(
244 | ctx, ft,
245 | x0, y0, x1-x0+1, y1-y0+1);
246 | ctx.restore();
247 | }
248 |
249 | renderWindowFromTopRight(
250 | ctx: CanvasRenderingContext2D,
251 | window: Rect,
252 | ft: (x:number,y:number,c:number)=>Sprite) {
253 | let ts = this.tilesize;
254 | let x0 = Math.floor(window.x/ts);
255 | let y0 = Math.floor(window.y/ts);
256 | let x1 = Math.ceil((window.x+window.width)/ts);
257 | let y1 = Math.ceil((window.y+window.height)/ts);
258 | ctx.save();
259 | ctx.translate(x0*ts-window.x, y0*ts-window.y);
260 | this.renderFromTopRight(
261 | ctx, ft,
262 | x0, y0, x1-x0+1, y1-y0+1);
263 | ctx.restore();
264 | }
265 | }
266 |
267 |
268 | // RangeMap
269 | //
270 | class RangeMap {
271 |
272 | width: number;
273 | height: number;
274 |
275 | private _data: Int32Array[];
276 |
277 | constructor(tilemap: TileMap, f: (c:number)=>boolean) {
278 | let data = new Array(tilemap.height+1);
279 | let row0 = new Int32Array(tilemap.width+1);
280 | for (let x = 0; x < tilemap.width; x++) {
281 | row0[x+1] = 0;
282 | }
283 | data[0] = row0;
284 | for (let y = 0; y < tilemap.height; y++) {
285 | let row1 = new Int32Array(tilemap.width+1);
286 | let n = 0;
287 | for (let x = 0; x < tilemap.width; x++) {
288 | if (f(tilemap.get(x, y))) {
289 | n++;
290 | }
291 | row1[x+1] = row0[x+1] + n;
292 | }
293 | data[y+1] = row1;
294 | row0 = row1;
295 | }
296 | this.width = tilemap.width;
297 | this.height = tilemap.height;
298 | this._data = data;
299 | }
300 |
301 | get(x0: number, y0: number, x1: number, y1: number): number {
302 | let t: number;
303 | if (x1 < x0) {
304 | t = x0; x0 = x1; x1 = t;
305 | // assert(x0 <= x1);
306 | }
307 | if (y1 < y0) {
308 | t = y0; y0 = y1; y1 = t;
309 | // assert(y0 <= y1);
310 | }
311 | x0 = clamp(0, x0, this.width);
312 | y0 = clamp(0, y0, this.height);
313 | x1 = clamp(0, x1, this.width);
314 | y1 = clamp(0, y1, this.height);
315 | return (this._data[y1][x1] - this._data[y1][x0] -
316 | this._data[y0][x1] + this._data[y0][x0]);
317 | }
318 |
319 | exists(rect: Rect): boolean {
320 | return (this.get(rect.x, rect.y,
321 | rect.x+rect.width,
322 | rect.y+rect.height) !== 0);
323 | }
324 |
325 | }
326 |
--------------------------------------------------------------------------------
/base/sprite.ts:
--------------------------------------------------------------------------------
1 | /// You Won! Yay!';
386 | super(html);
387 | }
388 |
389 | change() {
390 | this.changeScene(new Game());
391 | }
392 | }
393 |
--------------------------------------------------------------------------------
/base/pathfind.ts:
--------------------------------------------------------------------------------
1 | /// ');
103 | }
104 | }
105 |
106 | class NullAction extends PlanAction {
107 | toString() {
108 | return ('');
109 | }
110 | }
111 |
112 |
113 | // PlanMap
114 | //
115 | class PlanActionEntry {
116 | action: PlanAction;
117 | total: number;
118 | constructor(action: PlanAction, total: number) {
119 | this.action = action;
120 | this.total = total;
121 | }
122 | }
123 | class PlanMap {
124 |
125 | private _map: { [index:string]: PlanAction } = {};
126 | private _queue: PlanActionEntry[] = [];
127 | private _goal: Vec2 = null; // for debugging
128 | private _start: Vec2 = null; // for debugging
129 |
130 | toString() {
131 | return ('');
132 | }
133 |
134 | addAction(start: Vec2, action: PlanAction) {
135 | let key = action.getKey();
136 | let prev = this._map[key];
137 | if (prev === undefined || action.cost < prev.cost) {
138 | this._map[key] = action;
139 | let dist = ((start === null)? Infinity :
140 | (Math.abs(start.x-action.p.x)+
141 | Math.abs(start.y-action.p.y)));
142 | this._queue.push(new PlanActionEntry(action, dist+action.cost));
143 | }
144 | }
145 |
146 | getAction(x: number, y: number, context: string=null) {
147 | let k = getKey(x, y, context);
148 | if (this._map.hasOwnProperty(k)) {
149 | return this._map[k];
150 | } else {
151 | return null;
152 | }
153 | }
154 |
155 | render(ctx: CanvasRenderingContext2D, grid: GridConfig) {
156 | let gs = grid.gridsize;
157 | let rs = gs/2;
158 | ctx.lineWidth = 1;
159 | for (let k in this._map) {
160 | let action = this._map[k];
161 | let color = action.getColor();
162 | if (color !== null) {
163 | let p0 = grid.grid2coord(action.p);
164 | ctx.strokeStyle = color;
165 | ctx.strokeRect(p0.x-rs/2+.5,
166 | p0.y-rs/2+.5,
167 | rs, rs);
168 | if (action.next !== null) {
169 | let p1 = grid.grid2coord(action.next.p);
170 | ctx.beginPath();
171 | ctx.moveTo(p0.x+.5, p0.y+.5);
172 | ctx.lineTo(p1.x+.5, p1.y+.5);
173 | ctx.stroke();
174 | }
175 | }
176 | }
177 | if (this._goal !== null) {
178 | let p = grid.grid2coord(this._goal);
179 | ctx.strokeStyle = '#00ff00';
180 | ctx.strokeRect(p.x-gs/2+.5,
181 | p.y-gs/2+.5,
182 | gs, gs);
183 | }
184 | if (this._start !== null) {
185 | let p = grid.grid2coord(this._start);
186 | ctx.strokeStyle = '#ff0000';
187 | ctx.strokeRect(p.x-gs/2+.5,
188 | p.y-gs/2+.5,
189 | gs, gs);
190 | }
191 | }
192 |
193 | build(actor: PlanActor, goal: Vec2, range: Rect,
194 | start: Vec2=null, maxcost=Infinity): PlanAction {
195 | //info("build: goal="+goal+", start="+start+", range="+range+", maxcost="+maxcost);
196 | this._map = {};
197 | this._queue = [];
198 | this._goal = goal;
199 | this._start = start;
200 | this.addAction(null, new NullAction(goal));
201 | while (0 < this._queue.length) {
202 | let entry = this._queue.shift();
203 | let action = entry.action;
204 | if (start !== null && start.equals(action.p)) return action;
205 | if (maxcost <= action.cost) continue;
206 | this.expand(actor, range, action, start);
207 | // A* search.
208 | if (start !== null) {
209 | this._queue.sort((a:PlanActionEntry,b:PlanActionEntry) => {
210 | return a.total-b.total;
211 | });
212 | }
213 | }
214 | return null;
215 | }
216 |
217 | expand(actor: PlanActor, range: Rect, prev: PlanAction,
218 | start: Vec2=null) {
219 | // [OVERRIDE]
220 | }
221 | }
222 |
223 |
224 | // ActionRunner
225 | //
226 | class ActionRunner extends Task {
227 |
228 | actor: PlanActor;
229 | action: PlanAction;
230 | timeout: number;
231 |
232 | constructor(actor: PlanActor, action: PlanAction, timeout=Infinity) {
233 | super();
234 | this.actor = actor;
235 | this.timeout = timeout;
236 |
237 | this.actor.setAction(action);
238 | this.action = action;
239 | this.lifetime = timeout;
240 | }
241 |
242 | toString() {
243 | return ('');
244 | }
245 |
246 | onTick() {
247 | super.onTick();
248 | let action = this.action;
249 | if (action !== null) {
250 | action = this.execute(action);
251 | if (action === null) {
252 | this.actor.setAction(action);
253 | this.stop();
254 | } else if (action !== this.action) {
255 | this.actor.setAction(action);
256 | this.lifetime = this.timeout;
257 | }
258 | this.action = action;
259 | }
260 | }
261 |
262 | execute(action: PlanAction): PlanAction {
263 | if (action instanceof NullAction) {
264 | return action.next;
265 | }
266 | return action;
267 | }
268 | }
269 |
270 |
271 | // WalkerActor
272 | //
273 | interface WalkerActor extends PlanActor {
274 | canMoveTo(p: Vec2): boolean;
275 | moveToward(p: Vec2): void;
276 | isCloseTo(p: Vec2): boolean;
277 | }
278 |
279 | // WalkerAction
280 | //
281 | class WalkerAction extends PlanAction {
282 | toString() {
283 | return ('');
284 | }
285 | getColor(): string { return null; }
286 | }
287 | class WalkerWalkAction extends WalkerAction {
288 | toString() {
289 | return ('');
290 | }
291 | getColor(): string { return 'white'; }
292 | }
293 |
294 | // WalkerPlanMap
295 | //
296 | class WalkerPlanMap extends PlanMap {
297 |
298 | grid: GridConfig;
299 | obstacle: RangeMap;
300 |
301 | constructor(grid: GridConfig, obstacle: RangeMap) {
302 | super();
303 | this.grid = grid;
304 | this.obstacle = obstacle;
305 | }
306 |
307 | expand(actor: WalkerActor, range: Rect,
308 | prev: WalkerAction, start: Vec2=null) {
309 | let p0 = prev.p;
310 | let cost0 = prev.cost;
311 | // assert(range.containsPt(p0));
312 |
313 | // try walking.
314 | for (let i = 0; i < 4; i++) {
315 | let d = new Vec2(1,0).rot90(i);
316 | let p1 = p0.add(d);
317 | if (range.containsPt(p1) &&
318 | actor.canMoveTo(p1)) {
319 | this.addAction(start, new WalkerWalkAction(
320 | p1, prev, cost0+1, null));
321 | }
322 | }
323 | }
324 | }
325 |
326 | // WalkerActionRunner
327 | //
328 | class WalkerActionRunner extends ActionRunner {
329 |
330 | goal: Vec2;
331 |
332 | constructor(actor: WalkerActor, action: PlanAction,
333 | goal: Vec2, timeout=Infinity) {
334 | super(actor, action, timeout);
335 | this.goal = goal;
336 | }
337 |
338 | execute(action: PlanAction): PlanAction {
339 | let actor = this.actor as WalkerActor;;
340 |
341 | if (action instanceof WalkerWalkAction) {
342 | let dst = action.next.p;
343 | actor.moveToward(dst);
344 | if (actor.isCloseTo(dst)) {
345 | return action.next;
346 | }
347 | }
348 | return super.execute(action);
349 | }
350 | }
351 |
352 |
353 | // WalkerEntity
354 | //
355 | class WalkerEntity extends TileMapEntity implements WalkerActor {
356 |
357 | grid: GridConfig;
358 | gridbox: Rect;
359 | planmap: WalkerPlanMap;
360 | allowance: number;
361 |
362 | runner: ActionRunner = null;
363 |
364 | constructor(grid: GridConfig, objmap: RangeMap,
365 | hitbox: Rect, pos: Vec2, allowance=0) {
366 | super(grid.tilemap, pos);
367 | this.grid = grid;
368 | let gs = grid.gridsize;
369 | this.gridbox = new Rect(
370 | 0, 0,
371 | Math.ceil(hitbox.width/gs)*gs,
372 | Math.ceil(hitbox.height/gs)*gs);
373 | this.planmap = new WalkerPlanMap(this.grid, objmap);
374 | this.allowance = (allowance !== 0)? allowance : grid.gridsize/2;
375 | }
376 |
377 | buildPlan(goal: Vec2, start: Vec2=null, size=0, maxcost=20) {
378 | start = (start !== null)? start : this.getGridPos();
379 | let range = (size == 0)? this.grid.tilemap.bounds : goal.inflate(size, size);
380 | range = this.grid.clip(range);
381 | return this.planmap.build(this, goal, range, start, maxcost) as WalkerAction;
382 | }
383 |
384 | setRunner(runner: ActionRunner) {
385 | if (this.runner !== null) {
386 | this.runner.stop();
387 | }
388 | this.runner = runner;
389 | if (this.runner !== null) {
390 | this.runner.stopped.subscribe(() => { this.runner = null; });
391 | this.parent.add(this.runner);
392 | }
393 | }
394 |
395 | setAction(action: PlanAction) {
396 | // [OVERRIDE]
397 | }
398 |
399 | // WalkerActor methods
400 |
401 | canMoveTo(p: Vec2) {
402 | let hitbox = this.getGridBoxAt(p);
403 | return !this.planmap.obstacle.exists(this.grid.tilemap.coord2map(hitbox));
404 | }
405 |
406 | moveToward(p: Vec2) {
407 | let p0 = this.pos;
408 | let p1 = this.getGridBoxAt(p).center();
409 | let v = p1.sub(p0);
410 | v = this.getMove(v);
411 | this.pos = this.pos.add(v);
412 | }
413 |
414 | isCloseTo(p: Vec2) {
415 | return this.grid.grid2coord(p).distance(this.pos) < this.allowance;
416 | }
417 |
418 | getGridPos() {
419 | return this.grid.coord2grid(this.pos);
420 | }
421 | getGridBoxAt(p: Vec2) {
422 | return this.grid.grid2coord(p).expand(this.gridbox.width, this.gridbox.height);
423 | }
424 | }
425 |
--------------------------------------------------------------------------------
/samples/scramble/src/game.ts:
--------------------------------------------------------------------------------
1 | ///
22 | 
23 | 
24 | 
25 | 
Pong (Code)
41 | * 
Shooter (Code)
42 | * 
Racing (Code)
43 | * 
Maze (Code)
44 | * 
Platformer (Code)
45 | * 
Pseudo3d (Code)
46 | * 
Adventure (Code)
47 | * 
Scramble (Code)
48 |
49 | Documents
50 | ---------
51 | Still work in progress...
52 |
53 | * User Guide
54 | * Quick Reference
55 | * Cheat Sheet
56 |
57 | Prerequisites
58 | -------------
59 | * TypeScript
60 | * (Optional) GNU Make
61 | * (Optional) TypeDoc http://typedoc.org/
62 |
--------------------------------------------------------------------------------
/samples/adventure/src/game.ts:
--------------------------------------------------------------------------------
1 | /// 
22 |
23 | 
25 |
26 |
27 |
28 |