Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
7. January 2016

 

The Superpowers HTML5 game engine is now open source and available on Github. In the developers own words, Superpowers is:

download

 

Superpowers is a downloadable HTML5 app. You can use it solo like a regular offline game maker, or setup a password and let friends join in on your project through their Web browser. It's great for working together over long periods of time, for jamming over a weekend, or just for helping each other out with debugging!

... not just for making games!

We've built the Superpowers Game engine and a bunch of asset editors to make games with TypeScript. But the coolest thing is this: Superpowers itself is actually engine-agnostic. It's just a piece of software for collaborating on projects and you can extend it with project types and editors.

Use Superpowers to make static websites, Lua LÖVE games, slideshows, blogs, movies... whatever you can come up with!

 

There is a pretty solid set of tutorials and documents available here should you require more information.  You can see a demo of SuperPowers in action in the video below.  WARNING!!! Mute your sound, trust me.

GameDev News


4. January 2016

 

PlayCanvas, a popular 3D HTML5 game engine have added support for Spine the 2D bone based animation software from Esoteric Software.

 

You can get the plugin from Github, details from the announcement:

This is the first version of PlayCanvas plugin for the Spine Animation tool.

Image

Spine allows you to create bone-driven 2D animations so it does away with the need for huge sprite atlases and tedious animation processes.

Using the PlayCanvas Spine plugin you can drag and drop your Spine Animations into the Editor and get them straight into your game.

Read more on the plugin's Github page

GameDev News


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List