aframe-super-shooter-kit
aframe-super-shooter-kit
npm i aframe-super-shooter-kit
aframe-super-shooter-kit

aframe-super-shooter-kit

🔫 A-Frame kit of components for making a simple WebVR shooter minigame.

by supermedium

1.1.7 (see all)License:MITTypeScript:DefinitelyTyped
npm i aframe-super-shooter-kit
Readme

aframe-super-shooter-kit

A-Frame kit of components for making a simple WebVR shooter minigame. From the creators of A-Frame, Supermedium, and Supercraft.

screenshot

PLAY

The kit is set of simple and easy to use components to provide a way of building simple shooting experiences, where a "shooter" shoots "bullets" that can hit "targets". A large chunk of the game can be handled at just the declarative A-Frame layer in HTML.

  1. One bullet entity acts as a template for the instances of shot bullets.
  2. Entity with shooter component attached (e.g., a gun) spawns bullets on shoot event from its position.
  3. Collisions among bullet's and target's bounding boxes are checked.
  4. Health and life of targets are calculated (hit and die events).

So we define which entities are bullets, shooters, and targets, and then wire up the game using controls and progress the game with events.

diagram

Video of Supercraft + Super Shooter Kit workflow

API

shooter component

The shooter component should be attached to a controller for gun. But it can also be attached to the camera to support 2D / desktop or normal smartphone if wired to mouse or touch.

PropertyDescriptionDefault Value
activeBulletTypeName of current active bullet the shooter is firing.'normal'
bulletTypesArray of possible bullet names.['normal']
cycleA flag to tell when swapping to the next or prev bullet type, cycle to the first or last type when reaching the last or first type respectively.false

Events

These events can be triggered with entity.emit(eventName).

Event NameEffect
shootShoot a bullet.
changebulletSwap bullet type (either prev, next, or name of bullet.

bullet component

PropertyDescriptionDefault Value
damagePointsHow many health points to remove from target when hitting target.1.0
maxTimeLife time of bullet in seconds. When elapsed, the bullet will be removed.1.0
nameName of the bullet type.normal
poolSizeHow many copies of this bullet can be on screen at once.10
speedSpeed of bullet in meters per second.1.0

target component

PropertyDescriptionDefault Value
activeWhether this target is included in collision tests.true
healthPointsNumber of hit or health points of the target. When a bullet hits this target, its health points will decrease by the bullet's damage points. When the target reaches 0 health points, then the event 'die' is emitted on the target.1
staticWhether this object does not ever move or change shape. If set to false, then the bounding box is recalculated continuously.true

Members

Component members can be accessed by like entity.components.target.lastBulletHit:

MemberDescription
lastBulletHitReference object to the last bullet object3D that hit the target. Useful for attaining the position of where the bullet contacted the target.

Events

Events emitted on the target that we can listen to, to perhaps show an explosion effect on target hit or die.

Event NameDescription
hitTarget was hit by a bullet.
dieTarget ran out of healthPoints and has been destroyed.

With Supercraft Assets

Supercraft is an A-Frame WebVR application that lets you build low-poly VR assets inside of VR with your hands, and export them to Web or JSON! With the shooter kit providing dead-easy components, A-Frame letting you do things in just HTML, and ability to create good assets without modeling experience, WebVR development is made simple.

The advantage of the Supercraft JSON exports alongside aframe-supercraft-loader and aframe-supercraft-thing is that they are tailored for A-Frame resulting in extremely small file sizes and performant through geometry merging.

All 3D assets in this scene are delivered within a single 190KB JSON file: Supercraft Shooter. All the assets in the game were done using Supercraft in 45 minutes, and the code is just dozens of lines of Javascript and HTML. Game created in an afternoon.

An extremely cool workflow is using the supercraft-loader to "live-reload" assets. The Supercraft JSON is hosted on the Web via name; we just need to do supercraft-loader="name: my-supercraft-site", and whenever we publish an update to my-supercraft-site within Supercraft, the scene will automatically have access to the fresh new assets.

And supercraft-thing-loader can be used to pick individual objects out of a Supercraft scene of objects. You can create all your assets in one scene, make sure they have good scale relative to one another, tweak them all at once!

VIDEO

Installation

Browser

See the Supercraft Shooter example source code.

Install and use by directly including the browser files:

<head>
  <title>A-Frame Super Shooter Kit - Basic</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="../../dist/aframe-super-shooter-kit.min.js"></script>
  <script>
    /**
     * Click mouse to shoot.
     */
    AFRAME.registerComponent('click-to-shoot', {
      init: function () {
        document.body.addEventListener('mousedown', () => { this.el.emit('shoot'); });
      }
    });

    /**
     * Change color when hit.
     */
    AFRAME.registerComponent('hit-handler', {
      dependencies: ['material'],

      init: function () {
        var color;
        var el = this.el;

        color = new THREE.Color();
        color.set('#666');
        el.components.material.material.color.copy(color);
        el.addEventListener('hit', () => {
          color.addScalar(0.05);
          el.components.material.material.color.copy(color);
        });

        el.addEventListener('die', () => {
          color.setRGB(1, 0, 0);
          el.components.material.material.color.copy(color);
        });
      }
    });
  </script>
</head>

<body>
  <a-scene background="color: #DADADA">
    <a-entity id="bulletTemplate" bullet geometry="primitive: sphere; radius: 0.1" material="color: orange"></a-entity>

    <a-entity class="target" target="healthPoints: 10" geometry="primitive: box" material="color: teal" position="0 0 -4" hit-handler></a-entity>

    <a-entity id="gun" shooter geometry="primitive: box; width: 0.1; height: 0.1; depth: 0.3" material="color: red" click-to-shoot position="0 0 -1"></a-entity>

    <a-camera id="camera" position="-1 0 0" shooter click-to-shoot></a-camera>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-super-shooter-kit

Then require and use.

require('aframe');
require('aframe-super-shooter-kit');

Downloads/wk

49

GitHub Stars

117

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

5

OPEN PRs

9
VersionTagPublished
1.1.7
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate