Git Product home page Git Product logo

a-blast's Introduction

A-Blast

A WebVR FPS mini-game demo using A-Frame by Mozilla VR.

Read the introductory blog post.

Screenshot of A-Blast main menu

Usage

Recording of A-Blast gameplay

Local Development

git clone [email protected]:aframevr/a-blast && cd a-blast
npm install
npm start

Then, load http://localhost:8080 in your browser.

We are opened to new ideas and contributions, feel free to send a pull request with your A-Blast improvements.

Laser Gun

Soundtrack by José Manuel Pérez Paredes AKA JosSs

a-blast's People

Contributors

caseyyee avatar cvan avatar dmarcos avatar feiss avatar fernandojsg avatar ngokevin 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  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

a-blast's Issues

"Good job!" high-score screen appears overlayed in "VR mode" on Cardfoard for iOS

It wouldn't be a trivial change. But having the Hall of Fame drops you out of VR mode in iOS and Cardboard.

  1. Persist the user's name in localStorage the first time the screen appears.
  2. Allow the user to enter his/her name by shooting three letters for his/her initials.
  3. When a game begins, ask the user to select an existing profile or prompt for his/her name at that point.
  4. Prompt after the headset is taken off.

The initial player position appears to be inside the floor

If you keep on playing the game again and again by refreshing the webpage on the same browser tab. With the same exact room setup in Vive, after every 10-12 runs the player spawns embedded inside the floor.

The browser had to be restarted every time
2017-08-26 11 55 09
2017-08-26 11 54 57
2017-08-26 11 55 15
2017-08-26 11 55 20

to make it go back to normal. Just refreshing doesn't help.

Firefox Version: 56.ob6 (64bit)
OS: Windows 10
Laptop: Razor Blade Pro

API to explicitly set waypoints

<a-entity movement-pattern>
  <a-entity waypoint position="1 2 3"></a-entity>
  <a-entity waypoint position="2 4 6"></a-entity>
</a-entity>

Bullets bugs

Enemy bullets have some bugs: sometimes they are not destroyable, and sometimes they go backwards, or very slowly. Player bullets go slow sometimes too.

Also, enemy bullets use to have their target some centimeters above player's head.

Assign custom face texture to enemy0

Interface for capture and acquisition of the texture is being done via #59 , it only needs to assign it to the actual texture of the game

Maybe apply the new face to all enemies, not just one?

Player hit effect

When the player is hit, a red marquee around the camera should appear. The texture and entity is already in master (entity #hurt), but the animation doesn't work well and the texture transparency makes all other transparent objects invisible.

Sound effects pools

Add a proper sound system for handling sounds, with pooling. I tried to call different random sfx (for example in components/bullets.js:43) but that doesn't feel and work fine.

Local version

A version for running the game in the local machine would be very desirable for Hawaii All Hands.

The problem is with assets in feiss.github.io and fernando.github.io. We could add an additional local webserver for those and redirect all requests to localhost via hosts config.

Game states

Handle the three different game states: MAIN_MENU, PLAYING, GAME_OVER, GAME_WIN

I have to prepare models for GAME_OVER and GAME_WIN messages. MAIN_MENU is almost ready via #63 , it only needs an enemy0 below the logo and start playing when shot.

Unable to shoot in desktop mode

I'm unable to fire anything in desktop mode. Whenever I hit the space bar I get the following error in the console:

build.js:2 Uncaught TypeError: Cannot read property 'controllerModel' of undefined
    at i.AFRAME.registerComponent.shoot (build.js:2)
    at build.js:2
AFRAME.registerComponent.shoot	@	build.js:2
(anonymous)	@	build.js:2

I'm using the latest version of Chrome. Any ideas?

Improved background

Since the big balls in the background are very far away and paralax is unnoticeable, they can be replaced by a 360 image. I also want to add some big guys behind, and add some splashes of color, it's too monochrome now.

Highscore

Add highscore table in 2D, to be shown on game over screen, and it could be collapsible so it can be opened in the middle of the game or in the main menu too (so people can watch it while player is inside VR)

The name of the player can be requested on game over with a prompt(), and localStorage can be used for storage.

I will take care of the css.

Controller appears upside down on Samsung Gear VR

Issue #118 is for supporting Google Daydream. PR #122, which is merged to master, was to fix Daydream. I don't have my Pixel in front of me, so I can't test it.

But I tried the latest version of A-Blast on Samsung Gear VR (v2, with 3DoF controller) on a Samsung Galaxy S8. The arm model appears to be backwards. You have to shoot with the controller turned upside down and tilted a bit.

Support for desktop and other basic VR systems

The game could be easily ported to desktop and other VR systems different than Vive, by:

action what modifies
wasd camera position (limited to the platform)
mouse movement or headset orientation rotation of the camera
mouse click shoot

Menu and game over screens could be passed with space key

MVP for paint trajectories using controllers

  • Shortcut, probably menu button on the controller, to go into edit mode
  • Scale the scene
  • Paint a trajectory and after releasing the trigger it will add to a list of drawings without filtering them.
  • After pressing again the menu button, go back to the normal mode and console.log the curves so we can copy to use them in spline movement.

Awesome game.

Hey guys, awesome game! Love it!

One thing that I would love to see in future project is more markup. Maybe you guys can adopt React or Angular for a future game/project, and manipulate a-* elements with them for things like adding/removing game objects from scenes or from game objects (sub scenes). The markup-based approach would place those objects into the DOM hierarchy with initial attributes, then plain JS can take over during the lifetime of the elements (f.e. to animate things, game logic communication, etc).

Currently there is a ton of JavaScript used for A-Blast (which isn't bad at all), but I think using more markup (for example React components for changing DOM structure and simple attribute modification, but not for animation because that would run React's diff algo every tick) would really show and promote the declarative 3D paradigm that A-Frame introduces, which I think would be really really awesome in general for this type of technology (declarative 3D), while using only the minimal required amount of imperative programming.

But yeah, excited to see what comes out next!!

wave sequence not correct

The first wave is repeated twice. The message says "WAVE 2" but the enemies are from wave 1.

Here's a waves.js for quick test. It has two waves, the first one with 2 sequences of one enemy0, and the next one with one subwave with enemy1

var WAVES = [
  {
    name: "WAVE 1",
    sequences: [
      { start: 0, random: 0, subwave: "2",
        enemies:[ {type: "enemy0", points: [[1.874,-7.677,-8.328],[3.490,6.398,-7.157]], movement: "single", random: 0, } ] },
      { start: 0, random: 0, subwave: "2",
        enemies:[ {type: "enemy0", points: [[1.874,-7.677,-8.328],[3.490,6.398,-7.157]], movement: "single", random: 0, } ] },
    ]
  },
  {
    name: "WAVE 2",
    sequences: [
      { start: 0, random: 0, subwave: "2001",
        enemies:[{ points: [[0.102,-11.982,-9.037],[0.142,3.765,-13.133],[-1.412,2.089,-8.481],[0.152,1.404,-2.714],[0.164,5.907,-2.462],[1.545,6.252,-9.056]],
            type: ["enemy2"], movement: "loop", enemyTimeOffset: -1585, random: 0,
          }
        ]
      }
    ]
  }
];

Game state screens

Put info in the two screens (with names screen1 and screen2) opposite the player.

screen1: life and time left
screen2: enemy count

I will update the set model with the labels "life", "time", "blasted", and an image (or 10 images) with numbers to use as a texture for the counters.

Instant death

I'm pretty sure the game isn't supposed to be this hard? Upon loading in and shooting the start enemy two enemies spawn and instantly kill me. I've been unsuccessful dodging. I'm using Chromium Version 56.0.2902.0 (64-bit)

Here's a video: https://gfycat.com/UniformDeepChevrotain

The game is freezing on Firefox Nightly

Hi,
I run Firefox Nightly with a standard profile on Windows 10 with HTC Vive.

I play some seconds and after a while the game freeze. I don't really know when it crashes, maybe when I try to shoot too fast... It seems that I have some errors with the sound, but the music continue after the game froze.

Console screenshot

I hope it will help you. Don't hesitate to ask me more details.

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.