Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
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


19. November 2015

 

I remember using Allegro wayyyyyy back in the day in the early 1990s.  It was one of few graphics libraries available for DOS based machines (even though it started life as an Atari library) and certainly one of the only free game libraries available.  Amazingly enough Allegro is still under active development.  Anyways enough reminiscing…  today Allegro.js was released, an HTML5 library inspired by Allegro.  For a brand new library there is already an impressive amount of documentation and reference material available.  One of the hallmarks of the Allegro library was it was brutally simple to use and Allegro.js seems to have carried on that tradition.  Here is an example Allegro app:

 

// bitmap oobjects
var logo,ball;

// sample object
var bounce;

// size and speed of the ball
var size=64,speed=5;

// positon of the ball
var cx=100,cy=100;

// velocity of the ball
var vx=speed,vy=speed;

// drawing function
function draw()
{
   // draw allegro logo background
   stretch_blit(logo,canvas,0,0,logo.w,logo.h,0,0,SCREEN_W,SCREEN_H);
   
   // draws the ball resized to size*size, centered
   // stretch it a bit vertically according to velocity
   stretch_sprite(canvas,ball,cx-size/2,cy-size/2,size,size+abs(vy));
}

// update game logic
function update()
{
   // did the ball bounce off the wall this turn?
   var bounced=false;

   
   // if the ball is going to collide with screen bounds
   // after applying velocity, if so, reverse velocity
   // and remember that it bonced
   if (cx+vx>SCREEN_W-size/2) {vx=-speed;bounced=true;}
   if (cy+vy>SCREEN_H-size/2) {vy=-speed*3;bounced=true;}
   if (cx+vx<size/2) {vx=speed;bounced=true;}
   if (cy+vy<size/2) {vy=speed;bounced=true;}
      
   // move the ball
   cx+=vx;
   cy+=vy;
   
   // if it bounced, play a sound
   if (bounced) play_sample(bounce);
   
   // add gravity
   vy+=.3;
}

// entry point of our example
function main()
{
   // enable debugging to console element
   enable_debug("debug");
   
   // init all subsystems, put allegro in canvas with id="canvas_id"
   // make the dimesnions 640x480
   allegro_init_all("canvas_id", 640, 480);
   
   // load ball image
   ball = load_bmp("data/planet.png");
   
   // load background image
   logo = load_bmp("data/allegro.png");
   
   // load the bounce sound
   bounce = load_sample("data/bounce.mp3");

   // make sure everything has loaded
   ready(function(){
      
      // repeat this game loop
      loop(function(){
         
         // clear screen
         clear_to_color(canvas, makecol(255, 255, 255));

         // update game logic
         update();

         // render everything
         draw();
   
      // all this happens 60 times per second
      }, BPS_TO_TIMER(60));
   });
   
   // the end
   return 0;
}
// make sure that main() gets called as soon as the wesbite has loaded
END_OF_MAIN();

 

If this looks interesting to you be sure to check out Allegro.js.  It looks like a cool library, based on another cool library, just waiting for a community to form around it.

GameDev News Programming


See More Tutorials on DevGa.me!

Month List

Popular Comments