Giter Club home page Giter Club logo

kingdomarchitect's Introduction

๐Ÿฐ Kingdom Architect

Medieval simulation and city builder game for the browser.

GitHub License GitHub Workflow Status (with event) TypeScript code style: prettier

Screenshot of the game

๐Ÿ•น๏ธ Play

You can either clone this repository and run it based on the instructions on how to run the game below, or try the last version out at https://kingdomarchitect.netlify.app

How to play

  • Gather resources
  • Unlock lands
  • Build houses to spawn workers
  • Level up the skills of workers as wizards, knights or archers
  • Defend against enemy mobs

Controls

Pointer/Touch input

Tap the item you would like to select or activate

Keyboard input

WASD: Use the W,A,S,D keys to move the cursor or selected items directionally

Escape: Go back, cancel or unselect

E: Activate the current selection or action

1-9: Activate the n'th actionbar button

M: Cycle between focus groups

J: Activate the first secondary actionbar item

K: Activate the second secondary actionbar item

Gamepad input

Not yet available

๐Ÿ“œ About the project

Kingdom architects is intended to be a combined simulation and city building game around building your own kingdom and protecting it from hordes of evil monsters. It is intended to be single-player and playable both on mobile screens and desktop size clients. Your kingdom might last for decades or only seconds, who knows what the legends of your reign will be.

Goals for the project

  • Play both using the keyboard and mouse/touch.
  • Only depend on browser-apis, no extra libraries.
  • Kingdoms are ephemeral, they only exists within the memory of the browser. Once its closed only bards will sing the tales of your kingdom. Something rewarding should happen from the start.
  • Progress in some way should be able to be carried over into future kingdoms, rogue-lite style.

๐Ÿ™‹ Contributing

I have a suggestion for a feature

Great, if you feel like it aligns with the goal for the project open a thread under discussion with some details on your idea

I have found a bug

Fantastic, getting bug reports is important. File an issue with steps to reproduce ๐Ÿ™.

I want to help code the game

Wow, thanks! First see if there are any open issues or open a thread under discussion on the improvement or contribution you would like to make.

๐Ÿ‘ฉโ€๐Ÿ’ป Development

Requirements

  • Node v20 or higher
  • An editor to edit typescript with

Get set up

Install the required development packages (typescript and rollup) with npm i. Build and bundle the typescript source with npm run build. npm run start will start a development server and give you a link to test out the game locally. Use your favourite IDE to edit any typescript game code. If you want to contribute on the development on the game, here follows some notes on the architecture for the game/application and some tools used during development.

Concepts

The architecture of the game is loosely based around three concepts:

  • A timer ticking each second
  • An entity tree and component system
  • A state system for the HUD/GUI

Game updates

Ever second a timer invokes two code paths for most of the game components. An update function and a draw function. The update function should only be invoked once per timer tick, but the draw method can be called multiple. Be wary of putting logic depending on a timed update as it will be invoked potentially more than one time per tick when input events happen or other actions are perfomed. Panning the gameworld is a good example of when the draw method of the different classes are invoked, this method is executed on each drag event from the browser.

Entity component system

A entity component system is in the works where all items in the world are tied to an entity with some amount of componets on it handle updates and draw actions. Some exceptions exists like tiles where all tiles belong to the same entity with a component that is responsible for drawing and handling all the tiles. All new game world items and data will be stored in components on entities. If you create new components or jobs, remember to run the Typelistgen tooling

A state system for the HUD/GUI

Items that are not directly connected to the game world, like menus and screens are considered InteractionStates these are screens that can be navigated to and from in a stack. States can draw custom actions and handle events as well as setting up complex views using the custom UI system

Folder Structure

Folder name Function
asset code related to load and lookup of assets can be found here.
common generic code that can be used across the whole application
data defintions and lists for the items/buildings in game
game the game logic, both hud and world code
input code related to recieveing input from the browser
path pathfinding and graphing code
persistence logic for saving and loading state
rendering code related to drawing pixels on the game canvas
ui a custom ui system for setting up GUI elements and screens

Tooling

Transpiling and bundling

Typescript and rollup is used for transpiling, typechecking and bundling the code. This is performed with the build npm task.

Testing

Note: The test suite uses the node test runner and requires node >=20.

Some tests already exists for the game, these are made with the built in node test runner. Note that files are not automatically built when tests are run. These needs to be built independently (however the npm test script includes the tsc step before the tests are run). Some files are currently just scaffold and some contain actuall test code. Tests can be run with npm test.

Custom tooling

Spritepacking

  • Task: spritepack
  • Note: typescript sources needs to be built before the task can run

To optimize, remove unused parts of images and bundling them together into a spritebin the spritepack npm task can be used. If you update any of the images in asset you need to run this task to get the updated version to show up in game. The source for this can be found in ts/tool/spritepack.

Typelistgen

  • Task: generate-loaders
  • Note: typescript sources needs to be built before the task can run

To support persisting and loading the state of components and jobs, we need a list of the constructors for all components and jobs. To update the generated list of these, or the path for their imports run the generate-loaders npm task.

โ“ FAQ

No questions so far

kingdomarchitect's People

Contributors

dependabot[bot] avatar trymnilsen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

kingdomarchitect's Issues

Actor stats

Implement stats for actors and a state for showing it

  • Base stats (Strength, Agility, Mind, Happiness, Hunger)
  • Secondary stats derived from items and base stats
  • Attack
  • Defense
  • Arcana
  • Productivity

Spawn animals from forrests

The amount of adjacent trees defines a volume/forrest. Animals will be spawned from groups of trees.

  • Fox
  • Goat
  • Frog
  • Duck
  • Racoon
  • Rat

Skills state

Finish the skill system and generate a random skill tree for each actor

Responsive book UI

The UIBookLayout should support smaller screens. There should be space for optional tabs and the first page. Once something selected on the first tab it should be translated to show the second details page.

Layout actionbar

During layout the action bar should check for available space and collapse the right items first then the left items if there is still not enough space for all the item. The collapsed items should be positioned out vertically.

Create a scroll view

Gives unlimited contrains in the scroll direction. Will support scrolling with up and down buttons and translates the content half a viewport for each scroll action.

Build navigation graph lazily

Change the graph used for pathfinding to be built lazily. Should improve performance to avoid creating and iterating over the whole world if the result is very localised.

rename workers to actors

The entities that are used for npc's (Mage, Knight, worker and Archer) should be renamed to actors to avoid confusion on the entitiy itself and the skill category a.k.a productivity.

Add a findView function to UIView

To search for child view and allow updating them there should be some sort of findView function. It should accept both looking for the first hit on an id or type.

Persist state

The state of components and the world should be persistent in-case of accidentally closing the tab. This changes the goals of the project slightly, but I think the user experience is better and there game would still only be local and singular.

Animate windmill

The windmill should have an animated spinning. The animation is present in the spritesheet

Grow farm

The farm "building" should slowly grow and produce food if harvested, an action that should be available if the food is finished grown.

Create roads

It should be possible to build roads, these will cost less energy to use and also look nice

Actor energy

all actors have energy that is used for movement and working. Energy can be regained by consuming food from a baker, goat or farm

wrap text provided to uiText

if the text to be shown in a uIText does not fit and the requested uiSize is not wrapUiSize we should attempt to wrap the text.
Based on the total measured size and available size split the string across lines.

Attack mobs

Add the ability for actors to attack mobs and for mobs to be agressive against actors.

Night and day

Finish the night and day system. Spawn mobs at night.

Keyboard navigation

Complete the implementation of navigating the ui with a keyboard

  • Actionbar should use number and e-r-t-y buttons?
  • Arrow buttons should just to the adjacent views based on the current navigation logic
  • Enter should tap/trigger an focused view

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.