npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flockn

v0.1.0

Published

Micro game engine

Downloads

2

Readme

flockn

Build Status Dependency Status devDependency Status

flockn is a lightweight declarative game engine. (While it uses Babel to generate ECMAScript 5 compatible output, the use of Babel or ES6 in flockn-related project is not enforced. There no ES6 features that need to be used as flockn exposes an easy-to-use ES5 interface.)

How does it work?

// Import flockn function from the flockn module
import flockn from 'flockn';

// Create a game instance, no need to store it as a variable
// Using the flockn module is a shorthand for: 
//    import Game from 'flockn/game'; new Game(function() { ...
flockn(function() {
  // The logic for the game itself

  // Add a scene to the game
  this.addScene(function() {
    // The logic for this scene

    // Give the scene a name
      this.name = 'myscene';

      // Create a new game object inside the scene
      this.addGameObject(function() {
        // The logic for this game object

        // Set the position for this game object
          this.position.x = 100;
          this.position.y = 100;

          // This game object now holds a label with the text "Hello World"
          this.texture.label.text = 'Hello World';
      });
  });

  // Start the game loop
  // Since only have one scene, we don't need to specify a scene name.
  // In any other case it would be: `this.run('myscene');`
  this.run();

});

Putting everything in one file doesn't work for anything bigger than a small experiment, so I would recommend to to put each gameobjects, behaviors and scene in separate files. For a more real-life example, take a look at the template. There is also an online playground.

Examples

To run the examples for yourself, run npm run examples after all dependencies have been installed (npm install). Then navigate to http://localhost:8080 to see all the examples.

Features

  • Taggable game objects and behaviors
  • Small (less than 30kB minified)

Philosophy

  • Friendly to JavaScript transpilers: Babel, CoffeeScript, TypeScript and more
  • Transpilers are optional though: You don't need to use a transpiler with flockn
  • Lightweight
  • Events everywhere (Having an EventEmitter-like interface)
  • Pluggable
  • Over-simplification of things. Examples:
    • A flockn game instance binds scenes on itself. In other game engines, a scene director usually handles it and is mounted to the game/application instance
    • A texture can either be an image, a text, a color or a combination of these. In other game engines, a texture only holds the data of a texture whereas other objects need a texture to display anything on the screen
  • Functions are the best way to describe an object
  • Split entity-component model into
    • Game objects (base object)
    • Behaviors (logic)
    • Models (data)

Some decisions that need to be made

  • Should game objects have the attributes of behaviors?
  • Should game objects have the attributes of models?
  • Should Object.observe be used for attributes? (Reducing the Model#get and Model#set overhead)
  • Is there a possibility to simplify the access of game objects from behaviors?

Alternatives

  • If you are just interested in the DOM/jQuery side of things and wish more control over what's getting added to the DOM, you should try Lyria.
  • For a full-blown and less opiniated game engine, you could try Phaser.

Building for yourself

flockn uses Grunt as its task runner. Grunt can either be installed through npm install -g grunt-cli or you can use it as a local dependency. After that, navigate to the flockn root folder and type npm install to install all necessary dependencies.

Type grunt (or npm run grunt) to build everything. You also need to have Bower installed to take a look at the examples.

License

This is public domain (UNLICENSE). If public domain does not work for you, you can use MIT alternatively.