Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
17. December 2015

 

In a project that sounds disturbingly similar to VRML of days gone past, Mozilla have launched AFrame, a technology intended to bring VR to the web without requiring WebGL programming knowledge.  An attempt to make a 3D Oculus friendly web browsing experience ( think cyberspace/ the matrix ) easy to create.

 

From the announcement blog:

A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone (Android support coming soon), and the Oculus Rift.

We created A-Frame to make it easier to create VR web experiences. WebVR has shipped in builds of Firefox and Chromium since the summer of 2014, but creating content for it has required knowing WebGL. The WebGL scene is unbelievably talented and has created many mind-blowing VR experiences in the last year, but they are a small subset of the full web dev community. There are millions of talented developers who do not know WebGL. What if each of them could create and share VR experiences on the open web?

A-Frame is designed to be familiar to those web developers. It wraps the power of WebGL in HTML custom elements, so creating a high performance VR experience is as simple as:

<html>
<head>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="https://aframe.io/aframe/examples/_skies/lake.jpg"></a-sky>
<a-model src="https://aframe.io/aframe/examples/showcase-composite/sculpture.dae" position="0 0 -2"></a-model>
<a-image src="https://aframe.io/aframe/examples/showcase-composite/portland.png" width="1" height="0.35" position="-2 1.2 1"></a-image>
</a-scene>
</body>
</html>

A-Frame ships with powerful and concise “primitives” for common use cases such as 360-degree videos, images, models, skies, and more. Primitives make it easy to block out a scene in minutes. Primitives can also be combined with lighting, animation, sound and interactivity. For the full list of primitives included in A-Frame 0.1.0, see the A-Frame documentation.

For users who want deeper control and flexibility, A-Frame is built on an entity-component system which provides accessible components for lighting, materials, re-usable assets, and more. This pattern is common in the game development world, and is the backbone of A-Frame. Visit the A-Frame documentation to learn more about the entity-component system.

A-Frame is ultimately just the DOM, so developers can also manipulate it with standard JavaScript methods, such as:

var scene = document.querySelector('a-scene');
var cube = document.createElement('a-cube');
cube.setAttribute('color', 'red');
scene.appendChild(cube);

A-Frame is new. The 0.1 version has several known issues (Android rendering textures as black, for example), and the API will change over the next few months as we get feedback and open source contributions. Our hope is that early adopters find it as fun as we do, and join us in improving A-Frame over time.

To get started with A-Frame, visit aframe.io, view the examples and grab the code. The FAQprovides additional details.

To discuss A-Frame with our team and fellow developers, hop into the A-Frame Slack channel. Feedback is welcomed at @aframevr. As are bug reports and pull requests. For the latest overall WebVR setup instructions, visit MozVR.com.

As a kid the grew up on dreams of cyberspace thanks to the likes of Neuromancer, Snow Crash and Shadowrun, I’m genuinely excited by this concept.  Then again, I was excited by VRML too and we know how that turned out.

GameDev News


16. December 2015

 

Today Ludei released a new version of their game focused HTML5 app wrapper Cocoon, now called Cocoon.io and based on Cordova.  I was beginning to think Cocoon was no more, so it is nice to see a new release.

 

From the announcement:

Cocoon.io has been designed from the ground up to try to include many of the cool features users have been demanding for quite some time. Let’s review the main advantages and differences of Cocoon.io:

      • The main structural change is that Cocoon.io is completely based on Cordova. When Ludei started working on HTML5, Cordova wasn’t as widespread as it is today. It also was completely tied only to the system webview. Cocoon has always defined itself to try to overcome some of the original Cordova limitations but it was not built on top of it. Cordova is the de facto standard in the industry to setup HTML5 to native project compilations and we have decided to embrace it and contribute to the community with our approach in Cocoon.io. This new Cocoon mixes all the benefits that have made Cocoon great plus all the advantages of Cordova.
      • Select the best webview runtime for your needs: There are different needs when it comes to HTML5 games and apps, and the new Cocoon is designed to allow you to easily select between the best webview runtimes depending on your needs. We still provide our state of the art runtime called Canvas+ specifically built and well suited for games based on 2D and WebGL canvas. We also have our full DOM support using WebView+, an advanced webview based onChrome for Android and Safari for iOS. Cocoon.io even allows to select the regular systemWebView for those developers who still want to use it.
      • Redesigned UI/UX to simplify and improve the user experience. We really hope you like it. The user feedback has been very positive so far and we will continue to improve it in the future.
      • Easy Cordova plugin setup as Cordova has tons of plugins to select from. Cocoon’s new search engine plus easy to use UI will certainly help you navigate through this sometime tedious process. Of course, you can add your own plugins to your projects!
      • Github integration to tell Cocoon.io to compile your projects directly from the content of a git repository. A very convenient way to ease the process of developing, committing/pushing and compiling your apps.
      • Let Cocoon.io help you with the signing of your final native apps. Signing your final projects both on iOS and Android can be a bit tedious. If your provide your signing keys, Cocoon.io will be able to compile a final signed app ready to be uploaded to the stores.
      • Login with different types of accounts like Google or Facebook accounts for your convenience. Of course, you can still use your current Cocoon user and password or even create a new account.
      • Web2App: We are trying to redefine the ease of use to create native hybrid apps based on responsive websites. We will provide great plugins to create native apps based on a website in order to create a compelling native app with all the advantages of mobile applications regarding performance and user experience. Directly from your responsive website URL!

GameDev News


3. December 2015

 

BabylonJS is a popular 3D game engine for WebGL that I covered back in the spring.  Today Sébastien Pertus at Microsoft announced the release of a project generator available on npm:

 

Today I want to share with you a new project I work on those days. The idea is to bring you a new tool to generate code for BabylonJS

Imagine you want to create a quick project with BabylonJS. You have to create a project, reference BabylonJS, create a simple scene, add assets and so on.

It’s straightforward, but we can do better…

BabylonJS Generator is a npm package based on Yeoman to provide you a simple way to create a BabylonJS project, hosted on node.js

Yeoman generator is already used with a lot of project (angular, webapp, wordpress, asp.net, office addins and so on …)

Check the generators here : http://yeoman.io/generators/

The Babylon generator

Installation

First, install Yeoman and generator-babylonjs using npm (we assume you have pre-installed node.js).

This step has to be done only one time. The “-g” argument will install those packages globally to your computer.

npm install -g yo

npm install -g generator-babylonjs

From now, you can generate your new project with this simple command :

yo babylonjs

 

GameDev News


26. November 2015

 

Quickly after the open sourcing of Goo engine,  Goo have announced a new version of their Goo Create tool.  They also launched a new developer forum.

From the announcement:

New Features/Improvements

UI Overview inside of Create

New users get presented with a general UI overview of the Dashboard and Create. Hopefully this will help people get started and contribute to the creation of a larger and more dynamic community that everyone can benefit from.

Uniform (and proportional) Scaling

create-uniform-scale

There is a new checkbox in the Transform Component panel that lets you enable uniform scaling. When this setting is enabled, changing one of the scale values will also change the other values to ensure that they keep the proportions between them. For example, if the scale is set to (1, 1, 1), changing the scale along the X axis to 2 will result in a scale of (2, 2, 2).

Correct script names in the Chrome DevTools

Scripts will now show their correct name in the Chrome DevTools. This makes it a lot easier to debug your scripts.

Other Improvements
  • Numerical (spinner) inputs we improved to ensure that text selection works properly and that dragging up or down to change the value works in a smooth way (not stopping to change will dragging over the “threshold” area).
  • Texture positioning inputs now use steps of 0.01 for a more precise control.
  • Added touch support for the button script.

GameDev News


26. November 2015

 

Construct2, the popular visual HTML5 game engine, just released version R218 beta.  Construct2Logo

From the release notes:

New this release: support for NW.js 0.13.0-alpha6 with a few bug fixes, experimental support for recording a video of the canvas with Firefox, and pressure and size information for touches, particularly relevant for the iPhone 6S with its 3D touch support.

NW.js 0.13.0-alpha6

Hot on the heels of the alpha5 update, alpha6 is now out with more feature support and some important bug fixes including allowing NW.js features to work in preview mode. This C2 release also fixes a bug that was causing a blank screen after export. Be sure to head to scirra.com/nwjs to download the latest alpha6 release of NW.js, which is out now.

Canvas video recording

Firefox 43 adds a new feature that enables recording a video of canvas elements. Note Firefox 43 is due for stable release in December, but you can try it now using Firefox Beta, Dev or Nightly. The User Media object has been extended to allow recording the canvas, and Construct 2 has a new "canvas recording" example that demonstrates how to use it. Previously recording a video of your game would involve using separate video recording software, so it could be handy to instead record it directly from the browser.

This is a pre-release feature, so there may be some bugs or quirks. I noticed for example Firefox only appears to encode video at 30 FPS with the VP8 codec in a WebM container. If you need video in another format, you may need to transcode it afterwards. It also does not currently include sound, although it may be possible to add that later on.

 

Changelog

Add User Media: experimental support for recording a video of the canvas [currently Firefox 43+ only].

Add Touch: experimental WidthForID, HeightForID and PressureForID expressions, to get a given touch's area and pressure. This should also report the pressure of touches on the iPhone 6S (although we do not have a device to test this on yet).

Bug Fix NW.js plugin: caused blank screen in NW.js 0.13

Bug Fix IAP: could have failed to restore purchases on Android

Bug Fix Using savegames could crash if the browser had blocked access to storage

Bug Fix Preview & debugger could crash in Firefox if cookies had been disabled in Privacy settings

GameDev News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List