Search the Community

There is a PATTERN game at https://www.html5pcode.com/a1ypatternfit.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework. This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game. There are many other games written in this p-code at https://www.html5pcode.com

Hi, Phaser devs! I'm developing a game using Phaser with TypeScript and what I'm trying to achieve is this: var component:AwesomeComponent = actor.getComponent<AwesomeComponent>(); I know there's a workaround by constructing objects of type T. But I don't like it because I'd probably need to define tons of different constructors to represent all differents kinds of components. What I'm doing so far is passing a string with the type (of course a number would be better, but I'm still prototyping): getComponent<T>(componentType:string): T { for (let i = 0; i < this.components.length; i++) { if (componentType == this.components[i].componentType) { return <T><any>this.components[i]; } } return undefined; } It works, but the result is not good, you have to type the class name twice: var animComp = actor.getComponent<AnimationComponent>("AnimationComponent"); Any suggestions on how to solve it? I know there`s a way to do it, because Unity does exactly that in JavaScript. Thank you for your time!

Hi, I have implemented a simple Observer Pattern library in TypeScript/JavaScript which does not require inheritance. I have called it Paon (French name for a bird with many "eyes" on its feathers). It is available in my GitHub and in npm. Any feedback would be greatly appreciated. Paon An Observer Pattern Component in TypeScript/JavaScript. No dependencies. No inheritance is required. Observable is just a component inside an object. Observers are just functions. Installation npm install paon To compile the TypeScript source to JavaScript, you would need to install the TypeScript compiler: npm install -g typescript To generate the minified JavaScript version when building, you would need to install uglifyjs: npm install -g uglifyjs Build Resulting files are created in the dist/ folder. Complete build (compilation and minification): npm run build Simple compilation (no minification): npm run compile Usage All constants, interfaces, classes and functions are accessible inside the Paon namespace. Simple example Here is a simple example where we add an observable component inside a class Subject: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged"); // A message is sent to observers return this.name; } } function onNameChanged() { alert("Name has changed"); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed" Above, in the class Subject, the method changeName() will send a "nameChanged" message to the instance's observers. After the instanciation of Subject, the function onNameChanged() subscribes to subject's messages "nameChanged". Therefore, when changeName() is called, an alert popup appears. As we can see, with such a pattern, no inheritance with extends or implements is required. Just simple composition. Example with extra data We can send extra data to observers as we can see below: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" The parameter msg in function onNameChanged() contains the extra data we have sent via method changeName(). Here, this is an object with a property data, but this could be anything. Module Importation This library can also be imported as a module with the import statement: import Paon from "./paon"; // Declaration file .d.ts location class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" Only the import statement differs from previous examples. Otherwise, the code is the same. API Documentation Add an observer to a type of message (similar to the DOM function addEventListener()): Paon.Observable.addObserver(type: string, observer: Observer): Observer; Remove an observer from a type of message (similar to the DOM function removeEventListener()): Paon.Observable.removeObserver(type: string, observer: Observer): void; Remove all observers from a type of message: Paon.Observable.removeObserversType(type: string): void; Send a message to observers (similar to the DOM function dispatchEvent()): Paon.Observable.notifyObservers(type: string, msg?: any): void; Contributors yahiko Licence MIT

In this article I show a design pattern of writing a HTML5 game in phaser, specially helpful for writing larger games. Phaser is one of the best HTML5 game development frameworks in the wild west of Javascript world. It is certainly a powerful tool when used carefully. Phaser imposes no design decisions over you, it gives you complete freedom over what design patterns you want to choose. I have been using Phaser for more than a year. With time, I created a ‘design pattern’ which would be helpful in making games. I also created some tools to help me in C++ and FreeBASIC like the one which converts Overlap2D output to usable Phaser state in both Haxe and JS. Continue Reading Here

This isn't necessarily a Phaser- specific question, but I'm just curious about the patterns that are being leveraged in the Phaser community.. In my current project, I'm following the simple and common structure that can be seen in things like XNA. That is, I have my entities acting as wrappers for the phaser sprite something like this: entities/foo.js FooEntityFactory = function(someInitParams) { //some initialization code return { sprite: game.add.sprite(10, 20, 'sprite1'); update: function(game) { //some update code } };};And then I can keep my states relatively tidy by not cluttering it with entity logic and leaving more room for state-specific logic: states/bar.js BarState = { entities: [], create: function() { this.entities.push(FooEntityFactory()); }, update: function(game) { this.entities.forEach(function(entity) { entity.update(game); }; }};However, I'm trying to get some ideas on out how to augment things with an Entity-Component-System pattern. Has anyone else organized their code in such a way that that utilizes this pattern? How about EC?