RSS

Category Archives: Javascript

Manage your front end project with Yeoman

Yeoman is a great kit for front end development automation. It shortens development cycle and is fully customizable with Grunt and Bower. Below is a short intro and instructions slide I shared at work last week:

Manage_Front_End_Project_With_Yeoman

The front end pioneer Addy Osmani has recently shared a detailed front end automation slide with heaps of materials on Speaker Deck. It’s a must read for front end engineers.

Advertisements
 
Leave a comment

Posted by on October 31, 2013 in HTML, HTML5, Javascript

 

Tags: , , ,

Begin Three.js With Examples

Here’s the slide of my short session in JSDC 2013 in Taiwan. The topic includes basic elements of Three.js to 3D model animations and game.
Demo link: http://begeeben.github.io/begin-threejs/
Source code: https://github.com/begeeben/begin-threejs

 
Leave a comment

Posted by on August 6, 2013 in Javascript, Three.js, WebGL

 

Tags: , ,

Basic Game Structure With ImpactJS & CocoonJS

Introduction
==================

The HTML5 app wrapper CocoonJS for iOS and Android platforms supports the integration of the popular Impact.js game engine. This article focuses on the basic folder structure with Jasmine test suit integration.

Folder Structure
==================

* index.html: The HTML5 game page. The program entry point for both ImpactJS & CocoonJS platform.
* lib: Javascript files and libraries of the game.
* media: Images, sound clips, music files and other media files to be placed here.
* tools: Tools for handling level editing.
* weltmeister.html: Level editing tool of ImpactJS.

The files listed above come with original ImpactJS 1.21 package. The weltmeister.html and the tools folder don’t need to be included in the release of the game.

* webviews: Contains the HTML5 pages which presented in the webview of the converted iOS/Android game app.

Pages in the webviews folder are called from the CocoonJS platform(Converted Javascript codes) by using CocoonJS extensions.

* SpecRunner.html: The page to run Jasmine test specs.
* test: Contains Jasmine test specs for the game app.

SpecRunner.html and test folder are Jasmine test codes and don’t need to be included in the release of the game.

Program Flow
==================

Main program entry: The flow chart indicates a way to structure an app with multiple games in it with the support of iOS/Android webview.
entry

 
Leave a comment

Posted by on April 17, 2013 in CocoonJS, HTML5, ImpactJS, Javascript

 

How to start developing iOS & Android native apps with CocoonJS

CocoonJS is one of the mobile wrappers for HTML5 web apps in the market. The pro of it is web apps especially games developed with canvas can benefit for performance from binding the code to OpenGL ES. Web apps built with HTML DOM has to be modified to run in the WebView thus these kind of apps doesn’t gain performance by using CocoonJS platform.

This step by step tutorial tells you how to set up the environment to work with ImpactJS and CocoonJS. ImpactJS is a popular Javascript game engine which is also supported by appMobi. If you don’t need to use ImpactJS, skip step 1 & 3. If you don’t need to use CocoonJS extensions which supports iOS & Android device features, skip step 2 & 3.

1. Download ImpactJS. If you are wondering whether it worth the money or not you may have a look on its forum and Point of Impact.

2. Download [cocoon_CocoonJSExtensions](https://bitbucket.org/ludei/cocoon_cocoonjsextensions).

3. Setup the code with [opensource ImpactJS CocoonJS boilerplate](https://github.com/fragcastle/ImpactJS-CocoonJS-Example).

4. CocoonJS requires an index.html as the program entry. Add script references of CocoonJS extensions and ImpactJS to the index.html if you need them. Use javascript to create a <canvas> element for game contents to be hardware accelerated. Webviews can be loaded using CocoonJS.App.loadInTheWebView(htmlPath). The example with webview can be downloaded at [CocoonJS webview demo source](http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/demo-list/).

5. Download and install CocoonJS Launcher App from the app store on your mobile device.

6. Once you load the CocoonJS Launcher App, there’s a “Demo” button to try official demos and a “Test” button to try your own app. Press “Test” and follow the steps to register CocoonJS. A detailed graphical registration step can be found at THE COCOONJS LAUNCHER APP.

7. After registration, you can test your app by putting your compressed app zip file through iTunes in the CocoonJS Launcher ( Make sure the index.html is located in your zip root. For Android users, see THE COCOONJS LAUNCHER APP ), or pointing the url to your zip or index.html which is faster for development.

Tutorials
==================

1. [COCOONJS DEVELOPMENT GUIDE](http://wiki.ludei.com/cocoonjs:devguide)
2. [Impactjs With Cocoonjs](http://fragcastle.com/tech/2012/12/31/impactjs-with-cocoonjs/)

 
2 Comments

Posted by on March 4, 2013 in Javascript

 

Tags: ,

BDD and test coverage measuring with Jasmine and JSCover tutorial

Jasmine
==================

[Jasmine](http://pivotal.github.com/jasmine/) is a popular BDD framework for Javascript programs. It’s a standalone framework and there are HTML reporter, console reporter, … and more to choose from. To test Javascript in CocoonJS platform we can use the console reporter.

To try Jasmine:

1. Download [Jasmine](https://github.com/pivotal/jasmine/downloads).

2. Unzip the downloaded Jasmine standalone package. You can either open the SpecRunner.html with browsers or place the files in a web server and visit the url.

The default demo uses HTML reporter. Here is an example html of using the console reporter:
Download additional reporters: [https://github.com/larrymyers/jasmine-reporters](https://github.com/larrymyers/jasmine-reporters)

<!DOCTYPE HTML>
<html>
<head>
  <title>Jasmine Spec Runner</title>

  <link rel="shortcut icon" type="image/png" href="test/lib/jasmine-1.3.1/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="test/lib/jasmine-1.3.1/jasmine.css">
  <script type="text/javascript" src="test/lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="test/lib/jasmine-1.3.1/jasmine-html.js"></script>
  <script type="text/javascript" src="test/lib/jasmine.console_reporter.js"></script>

  <!-- include source files here... -->

  <!-- include spec files here... -->

  <script type="text/javascript">
    (function() {

      // HTML Reporter
      // var jasmineEnv = jasmine.getEnv();
      // jasmineEnv.updateInterval = 1000;

      // var htmlReporter = new jasmine.HtmlReporter();

      // jasmineEnv.addReporter(htmlReporter);

      // jasmineEnv.specFilter = function(spec) {
      //   return htmlReporter.specFilter(spec);
      // };

      // var currentWindowOnload = window.onload;

      // window.onload = function() {
      //   if (currentWindowOnload) {
      //     currentWindowOnload();
      //   }
      //   execJasmine();
      // };

      // function execJasmine() {
      //   jasmineEnv.execute();
      // }

      // Console Reporter
      jasmine.getEnv().addReporter(new jasmine.ConsoleReporter());
      jasmine.getEnv().execute();

    })();
  </script>

</head>

<body>
</body>
</html>

We can also use both reporters in the same spec runner page.

JSCover
==================

To measure the test coverage for our Javascript program we can use JSCover. Here’s a step by step guide to use JSCover in server mode:

1. Download [JSCover](http://tntim96.github.com/JSCover/).

2. Unzip the downloaded file and run example-server.sh.

Mac: In terminal, type “sh example-server.sh”

Windows: In cmd, type “example-server.sh”

3. Visit [demo page](http://localhost:8080/jscoverage.html?/index.html).

4. In the Browser tab of the page, type in the test code running url in the URL box and then click “Open in frame”. Note that the domain and port of the test url has to be the same as the JSCover page.

The default script in example-server.sh is

    java -jar target/dist/JSCover-all.jar -ws --branch --document-root=doc/example --report-dir=target

We can use –no-instrument to specify the url that not to be instrumented. For example:

    java -jar target/dist/JSCover-all.jar -ws --branch --document-root=doc/example --report-dir=test/report --no-instrument=test

You can find more detailed options at [JSCover manual](http://tntim96.github.com/JSCover/manual/manual.xml#serverMode).

Tutorial
==================

1. [JSCover Guide](http://lucaspaulger.com/code-quality/2013/01/07/JSCover-Guide/)

2. [JSCover manual](http://tntim96.github.com/JSCover/manual/manual.xml)

 
Leave a comment

Posted by on February 19, 2013 in Javascript

 

Tags: , , ,

HTML5 Game Development: Introduction

This article and links will be kept updating.

I’ve been working on HTML5 games and am amazed by what we can achieved with HTML5. It took me some time to put HTML5 contents together. Now we have some progress and would like to share our findings to those who also want to start building games which can run on browsers and mobile devices. And at some time I’ll demonstrate a HTML5 game we had made. This series of articles is intended to cover topics as follows:

  • Ways to make animation in Javascript
    1. setTimeout, setInterval and requestAnimationFrame
    2. tweening
    3. sprite
    4. Javascript animation libraries
  • HTML5 audio api, web audio api and libraries
  • 3D graphics on the web
    1. WebGL and Three.js
    2. 3D model conversion for Three.js animation
    3. Tweening in Three.js
    4. Rotation and Quaternion
    5. Animate morphed model
    6. Animate skinned model
    7. Layout 3D contents in a HTML page
  • Javascript game engines
    1. building games with ImpactJS
    2. writing ImpactJS plugins
  • Develop and deploy HTML5 games to native mobile apps
    1. ImpactJS & CocoonJS
    2. webview in CocoonJS
    3. multi-languag with Impact.JS & CocoonJS
 
Leave a comment

Posted by on January 12, 2013 in CocoonJS, HTML5, ImpactJS, Javascript, Three.js, WebGL

 

Values regarded as conditional false in Javascript

These values are treated as false in conditional statements, all other values including the string ‘false’ are treated as true:

Value Type
0 Number
NaN Number
”(empty string) String
false Boolean
null Object
undefined Undefined

For example, the code below will alert “NaN is falsy”: Read the rest of this entry »

 
Leave a comment

Posted by on September 13, 2012 in Javascript, jQuery