Giter Club home page Giter Club logo

fae's Introduction

Fae - 2D WebGL Renderer

Warning: In heavy development, API subject to break before v1.0.0 is released.

Build Status Dependency Status
Sauce Test Status

Get Involved:

Website: Coming Soon
Discord: https://discord.gg/qghcMmr
Docs/Guides: Documentation
Contribute: How to Contribute
Support: How to Support

Overview

Fae is meant to be a highly modular ecosystem of modules. The primary target use-case for Fae is to be easily intregrable into larger application frameworks. However, the plugin library for Fae enables it to be useful to end users as well when used as a standalone framework.

Fae contains some code that is originally based on pixi.js. However, Fae takes a different approach to rendering and modularity than pixi. Some notable differences in philosophy are:

  • Fae is focused on WebGL
  • Fae uses a flat entity structure with z-ordering instead of a heirarchal scene tree
  • Fae uses an assemblage-heavy Entity-Component-System (ECS) approach to composing objects

and a few other core design differences that result in a familiar but slightly different API.

Contents

Download

Pre-built versions of the library are hosted on Amazon S3. These are "full builds" meaning they include all the official, open-source, plugins.

Each build of Fae includes these files:

  • fae.js - Development build. Unminified and includes debug asserts and other checks that negatively affect performance.
  • fae.js.map - Development source-map file that maps compiled fae.js file back into source code.
  • fae.min.js - Production build. Minified and all debugging code is stripped out for maximum performance.

Below is information on how to download each build type.

Stable Release

You can download the builds for any particular release at:

http://fae-builds.s3-website-us-west-2.amazonaws.com/release/<version>/fae.js
http://fae-builds.s3-website-us-west-2.amazonaws.com/release/<version>/fae.js.map
http://fae-builds.s3-website-us-west-2.amazonaws.com/release/<version>/fae.min.js

Replace <version> with the version of the library you want. For example, to get v1.0.0:

Unstable Builds

You can download the builds for any particular branch or git-sha at:

http://fae-builds.s3-website-us-west-2.amazonaws.com/unstable/<branch-or-git-sha>/fae.js
http://fae-builds.s3-website-us-west-2.amazonaws.com/unstable/<branch-or-git-sha>/fae.js.map
http://fae-builds.s3-website-us-west-2.amazonaws.com/unstable/<branch-or-git-sha>/fae.min.js

Replace <branch-or-git-sha> with a branch name (like master) to get the latest successful build of that branch or with the git-sha of a particular commit (like 1e532f70822f262452fb85b3669102bb05b443eb).

For example:

Note that only builds that succeed will have files on S3. If the build fails there will be no built files, so not every git-sha in the history may work.

Support

Developing Fae takes a lot of time and effort. The multiple services and servers that run for the Fae project cost a non-trivial amount of money. If you want to help support the continued development of Fae, please consider making a donation.

There are a couple ways you can have an impact:

  • A monthly contribution via Patreon (Coming Soon).
  • A donation via PayPal: PayPal

All donations go right back into the Fae community in the form of server hosting, and development time.

Roadmap

Issues are tagged with labels to help give a good view of the current state of the project.

For example, to see what plugins need to be made you can look at the New Plugin label.

Guides/Tutorials to write:

  • Intro to the ECS architecture Fae uses
  • General Performance Guidelines
  • How batching happens and how you can take advantage of it.
  • How to write efficient systems.
  • Using renderPriority and renderGroupHint to make batching better.
  • Batching the addition of entities (skipping sort in addEntity).
  • Rendering looks weird on my old XYZ Mobile Device
  • Description of the options that may fix issues on old mobile
  • Shader precision, batch sizes, multi-texture sizes, VAO usage, etc.

Contributing

The Contributing Guide contains the full details on how to contribute changes to the project.

Main points:

  • Report bugs on GitHub Issues and include a code sample.
  • Pull Requests should be made against master.
  • Before contributing read the Code of Conduct.

Analytics

fae's People

Contributors

ch1pstar avatar englercj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fae's Issues

Create UI Library

Create a library for rendering UI elements. Some core features would be:

  • Cursors
  • Buttons
  • Drag/Drop
  • Checkboxes
  • Dropdowns (select boxes)
  • Input boxes

Loader Integration

Need a nice way for plugins to have resource-loader integration, optionally.

Open questions:

  • How should plugins optionally add resource-loader middleware?
  • Should plugins ship with this code always? Should resource-loader stuff be in a separate plugin?

Create Tilemap Plugin

Create a generic shader-based tilemap plugin. Tiled and other editor-specific support should be in separate plugins that can be used in conjunction with this generic plugin.

Create Mesh Plugin

Create a plugin for rendering arbitrary 2D meshes. Some functionality around warping and animating those meshes may be useful as well.

Create Particle System Plugin

Create a particle plugin that adds support for something similar to the pixi ParticleContainer but also has particle-system features. This is a prime candidate for an editor.

Create Animated Sprite Plugin

Either add animation support to sprites (via a new plugin) or a whole new class that is an animation (unrelated to Sprite).

Loader without async

Hello,

Currently resource-loader uses the queue and eachSeries of the async library, but still the minified build is pretty big (64kb).

Would it be possible to make a loader plugin for fae based on resource-loader but using promises instead of async?

For example eachSeries could be replaced by:

const funcs = [foo, bar, baz, qux]; //promise factories

let f = funcs[0]();

for(let i = 1; i < funcs.length; i++)
    f = f.then(funcs[i]);

f = f.catch(function(e){ /*handle error*/ });

async.queue usage is to limit the concurrency right? There are packages on npm or libraries like bluebird that show examples of how to implement this with a few lines.

Promises may not be as performant as async but a loader is not something where an extra couple hundred operations per second matter anyway.

Create Flash Import Plugin

Would be cool to have a Flash import plugin. This may be a tool that imports flash objects, a runtime construct that can load flash files, or maybe just an editor integration that does flash importing. Unsure.

Remove Rectangle/Color from core

Right now, RenderTarget uses Rectangle and Color. While Rectangle is already in the 'shapes' plugin, we need to remove usage of it from core. Additionally moving Color to a separate plugin and removing usage of it from RenderTarget would be good.

Create Tweening Plugin

Create a plugin to handle tweening objects. Hesitant to reinvent the wheel here since there are so many generic tween libraries out there already. May not do this.

Implement Shader Filters

Need to implement filtering.

This might be 2 systems, one that prepares for rendering via filter (change render target, setup buffers, etc) and one that renders the different filter passes.

That may allow us to reuse current rendering systems inbetween these two filtering systems.

Write Philosophy Guide

Need to write a "Fae Philosophy" document that details what the philosophy Fae takes to library structure and architecture. This may help plugin authors when deciding how to implement their plugins.

Also write a "How to Write a Plugin" guide that is similar to this :)

Project status

Hi @englercj , fae looks a very great project, but seems have 2 years no update, just wondering whats your plan for this project?

Thanks.

Change ECS iteration

Currently iteration is:

  • For each system, update all entities in system

This unfortunately means entities of some system may always render after another dur to system priority reguardless of the entity z index.

Because of that, I think entity should have some sorting property (zIndex, or renderPriority, or something) and the iteration should be:

  • For each entity, apply each system to entity.

Obviously still only applying the systems that the entity is eligible for. One caveat being that for batch-based systems, this means we likely would need to bring back ObjectRenderer and the associated state :(

Objects moving without input events are incorrect

Currently, the interaction manager only reacts to DOM input events. This means we may emit that we hover an object on move, then that object moves without any mouse input and we fail to update the hover state.

[Q] I've read your blog about fae. And I have some questions...

  1. Now, Which project ( PIXI & fae) is your main goal ?
  2. Which project ( PIXI & fae) I should choose for my 2D html5 games ?
  3. Why don't you take "Component Oriented Design" to PIXI ?
  4. this project has no updated since 2 months age , is it inactive or not to continue ?

Thanks

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.