Git Product home page Git Product logo

rmoorman / elm-interactive-story-starter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jschomay/elm-interactive-story-starter

0.0 3.0 0.0 2.71 MB

Build your own interactive stories using the Elm Narrative Engine

Home Page: http://package.elm-lang.org/packages/jschomay/elm-narrative-engine/latest

License: BSD 3-Clause "New" or "Revised" License

Elm 72.90% CSS 19.29% HTML 0.45% JavaScript 7.35%

elm-interactive-story-starter's Introduction

Interactive Story Starter

A starting point to build your own interactive stories using the Elm Narrative Engine.

The Elm Narrative Engine is a unique tool for telling interactive stories. It features a context-aware rule-matching system to drive the story forward, and offers a total separation of logic, presentation, and content, making it an extremely flexible and extensible engine.

You can read the full API and documentation, follow along with developement, and play some sample stories.

Getting started

This repo contains a fully featured sample story that you can clone and extend for your own use. The Elm Narrative Engine is written in Elm, and so is this client code.

Run this code with npm i (to install) and then npm start (to serve it). Then you can open your browser window to http://localhost:8080/ to see the story. npm run build will build the code into the /dist directory.

Here is the demo of what this story starter creates.

The simplest way to start writing your own story is to modify the Manifest.elm, Rules.elm and Narrative.elm files with your own content. You can also change the theme by changing the code in the Theme directory. All of these source files live under the /src directory.

More advanced

This code uses a pattern called the Entity Component System pattern, which allows for strong decoupling. You don't have to use this pattern, but I find it very helpful.

In a nutshell, each "object" in your story is an "entity," which has an id.

"Components" can be anything that adds more meaning or content to an entity, such as a description, or an image file. You can add components as you need them by defining what data types the component uses, then associating that component and its specific data with an entity id.

Each component has a "system," which does something meaningful with the component data, such as rendering the description or image.

You will find some component data being added to various entities in the Manifest.elm file, which gets "plucked" out for use in the theme and Main.elm files. The source files are annotated with comments, explaining the specifics further.

Enjoy creating your interactive story!

elm-interactive-story-starter's People

Contributors

jschomay avatar lechindianer avatar

Watchers

Rico Moorman avatar James Cloos avatar  avatar

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.