Code Monkey home page Code Monkey logo

rpg's Introduction

Phaser 3 + TypeScript Starter Kit

This repository contains all the code necessary to start making a game in Phaser 3 using TypeScript.

The code contained here is an expansion of what is created in this blog post that I wrote. This repository contains all the code that I go through in that tutorial, plus some additional things to help get your game off the ground. Notably, besides a loading screen and main menu screen, an example sprite is included that can be moved around with the arrow keys.

Update: The starter kit has been updated to work with Phaser 3.20 and TypeScript 3.7.

How to Use

You should be able to clone this repository and run yarn install to get any of the necessary dependencies. Once you're done installing, simply run yarn dev and the game should begin to run. You'll have to open an internet browser and go to the port that the game is running on (usually localhost:8080 by default).

The game opens up to a main menu. Only the "Start Game" button does anything - the other two are placeholders. If you click "Start Game", you'll be taken to a black screen with a small sprite. You can move the sprite with the arrow keys. This starter kit is far from feature complete, but it's meant to take away the boilerplate that can come with getting a Phaser 3 + TypeScript project up-and-running.

Contributions

I don't actively update this repository unless major breaking changes occur in either Phaser or TypeScript. Any PRs, whether to fix bugs or add new features, are welcomed and encouraged.

A big thank-you to these people who have contributed PRs to help keep this starter kit up-to-date:

  • @tailot - fixing issues with the Phaser 3.17 upgrade and getting the types aligned.

Future Optimizations

I won't be able to tackle these myself, unfortunately, but feel free to open a PR or explore these on your own:

  • Switch from TSLint to ESLint. TSLint has been deprecated in favor of ESLint for all TypeScript projects.
  • Sample controls for different types of games. Currently, arrow key movement is provided, but it would be nice if there were examples of the physics engine, jumping, or controlling a character in a different type of game, like a top-down one.

Further Reading

The official Phaser documentation has lots of great tutorials, and the Phaser Labs page is full of great examples of using any aspect of Phaser.

I've written a few small games in Phaser. One was a game I created with a team of people for Ludum Dare 44 called Root Maker. You can find a great post-mortem of that game here. Additionally, Root Maker is open source. To see what a larger project might look like in Phaser (albeit one that doesn't use the physics system or much in the way of graphics), you can find the source code here.

rpg's People

Contributors

dependabot[bot] avatar tenji240 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

rpg's Issues

Character Protoype

Design the initial prototype architechture to support the base character, player character, and boss character

  • Health
  • Armor
  • Status Effects (enum list)
  • Skills List (skill object list)

If more skills/attributes for the character are needed for the prototype, please reference this issue in the main ticket.

Phaser Menu Screen w/Transition

Create a basic play now screen that transistions from a menu to the main battle screen in Phaser:

  • Menu Screen with clickable or enter key enabled event to trigger transition to battle menu
  • investigate if components or other HTML can be loaded, binded, and used in menus, etc.
  • From start game clickable event, end menu game loop, load main scene and start RPG game loop sequence.

Action Select

Player Characters need to choose between sets of actions the can use in battle. When clicking attack, bring up a menu with selectable actions a player character can use to attack with.

Again, dependent on full JS refactor to use an existing JS framework.

Character Attributes

Epic. Define and set up all character attributes for heroes and villians. Subject to evolve over time.

  • Speed #8
  • Damage
  • Dexerity (?)
  • Intelligence (?)

Damage Animations

Add Damage taken animations to hero and boss labels. On attack, flash damage number by the specific character.

JS Refactor

Refactor the JS library

  • main class for game logix
  • generic player class
  • game logic file

Requirements for Framework

  • compartmentalized for distribution
  • local storage support
  • class and generic support
  • Animation, Transisitons, and Sprite support
  • TBD

Phaser Setup

  • Initialze base scene with Hero & Villian
  • Create assets for hero, villain, attack, and heal buttons, as well as any supporting assets needed to create a UI (#5 - see sketch??) and display on 800x600 web view.

Turn Check

Set turn limit for player controlled characters based on number of party members

Critical Attack Feature

Applicable to all classes (damage, healer, boss). When accuracy rolls 80% or higher:

  • double the damage dealt to the target
  • display critical animation on player label

Note: This is can apply to heal skill as well

UI Design

  • Battle UI and Components
  • Coversation UI and Components
  • Traversal UI and Components

Gear/Equipment Class

Need to implement an equipment base class that buffs heroes and villians base stats. Start with damage, speed, and health.

Swift

Planning to transfer the code to Swift for iOS. Update the repository to hold archive the web project and start the new Swift folder

UI Prototype: Battle Scene

Build a simple prototype that contains the following scene

  • static game backdrop scene
  • placeholder player and enemy sprites set in the scene
  • Player Menu

HTML Classes

We need to be able to extend config files to HTML classes. Investigate extending the button object to accept configuration objects on load and on action calls.

UI: Health Bars

Coming off of #34, wire up health bars for the hero and the enemy. On click, reduce the health bar progression of each.

Also investigate config file management, geters and setters, and maybe a base class to manage HTML elements.

Research: HTML5 in Phaser 3

Investigate loading HTML components into phaser scenes complete with click actions and interactions. We can then design various components such as menus, buttons, lists, and more to support the initial design of the game.

If this is not a supported element, we'll need to rethink the engine choice completely. We may have to go from scratch, scrapping using an existing API.

Game Loop Protoype

Design and implement the basic game loop to follow the steps listed below:

  • battle initialization and turn order
  • hero turn
  • enemy damaged
  • hero post status effects (poision/bleed/corrosion)
  • enemy turn
  • hero damaged
  • enemy post status effects (poision/bleed/corrosion)
  • win/loss condition check

Skill Prototype: Player Skills

Refer to the design doc to implement the various skills for the player character.

  • Electricity
  • Posion
  • Bleed
  • Corrosive
  • Cybernetic
  • Fire

Label Updates

Wire up the labels for hero and villan to indicate damage taken and damage dealt for each character.

  • Future: generalize the class and HTML code to handle (might require a framework update. See #6 )

UI Update

Design and share new UI view here

Gear Attributes

With the definition of the Gear base class, define the associated attributes and their buff/debuff. Gear usage is depenedent existing character attributes. If a character does not have the required skill points to use a piece of gear, they incur a penalty to their attributes. Otherwise, a buff

  • Armor (Defensive)
  • Critical Hit (flat increase in damage to base double on critical hit)
  • Critical Chance (% needed to land critical hit - base is 80%)
  • TBD

Speed Attribute

At the moment, bosses have a higher speed stat than heroes. Need to add a speed stat to determine who goes first in a turn.

Local Bootstrap Upgrade

For release, make sure all assets are locally available instead of using a CDN for loading JQuery, Bootstrap, etc.

Character Select

Set up a menu in the footer to toggle between playable characters

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.