Category: JavaScript

Posted on

Sprite Animation Revisited


Last year I had blogged about animating sprite using Kinetic JS.
Code in that post was part of a simple game I had created. So the code specific for animating sprite was explained in snippets. A reader of that post contacted me with a request to provide a complete example. So I created a small demo of sprite animation only. If you are interested, you can download it from here. This demo animates images in the sprite sheet at a fixed location, it does not move the image. So I thought  it would be interesting to add motion to sprite images when they are animated.

First, take a look at the demo. Click on the Walk button to make the person walk. You can stop any time. If the person hits right side wall, then she falls, which is also simulated using sprite animation. I know the ‘walk’ does not look natural, but creating graphics is not my string point and this is the best I could manage.

Walking Speed : (Enter value from 1 to 10)

Continue reading “Sprite Animation Revisited”

Posted on

Understanding AST created by Mozilla Rhino parser

For an application I am developing, I needed to get all functions and variables declared in JavaScript code. Because the application I am developing is in Java, I started looking for readily available JavaScript parser written in Java. I found Mozilla Rhino to be a good fit for my requirements and decided to use it.

Parsing with Rhino is quite simple and well documented.

private AstRoot parse(String src, int startLineNum)
	throws IOException {

	CompilerEnvirons env = new CompilerEnvirons();
	env.setRecoverFromErrors(true);
	env.setGenerateDebugInfo(true);
	env.setRecordingComments(true);

	StringReader strReader = new StringReader(src);

	IRFactory factory = new IRFactory(env);
	return factory.parse(strReader, null, startLineNum);

}

Continue reading “Understanding AST created by Mozilla Rhino parser”

Posted on

Calling Objective-C code from JavaScript in iOS applications

In the last post I described how to Create iOS Application with HTML User Interface . In this post I am going to describe how to access Objective-C code from JavaScript running in the WebView. It is not as easy as it is in Android. There is no direct API in UIWebView to call native code, unlike in Android which provides WebView.addJavascriptInterface function.

However, there is a work-around. We can intercept each URL before it is being loaded in the WebView. So to call the native code, we will have to construct a URL and pass method name and argument as part of the URL. We then set this URL to window.location in the JavaScript and intercept it in our ViewController.
However most examples I have seen (including PhoneGap) create an instance of iframe and set its source to the URL –
Continue reading “Calling Objective-C code from JavaScript in iOS applications”

Posted on

Get/Set local variables of JavaScript function from outside & Dynamic code insertion in JS function

I am working on a JavaScript framework that needs to get list of local function variables and set values of some of them. Unlike Java, JavaScript does not have runtime introspection
support. In Java you can do this using Java Reflection APIs, but I couldn’t think of any way to do this in JavaScript. So I searched on the web and came across two threads of discussions on StackOverflow –

There are some interesting solutions discussed in the above threads. The first one discusses solutions for setting local variable values. The second one interested me because I found the technique useful for injecting code (that will set local variable value) in a function.

Continue reading “Get/Set local variables of JavaScript function from outside & Dynamic code insertion in JS function”

Posted on

Remote JavaScript debugging with Chrome Developer Tools

I have been using Chrome Developer Tools (CDT) for the past couple of weeks to build a JavaScript debugger. Though you can debug JavaScript in Chrome browser itself, my requirement was such that I needed a debugger that runs outside Chrome and debugs pages running in Chrome. I found that Chrome Developer Tools provides a JavaScript debugger plugin for Eclipse. CDT has exposed Java APIs, if you want to build the debugger yourself. It also has exposed JavaScript APIs for its debugger.

So I first evaluated Eclipse plugin that CDT provides. Before I get to that plugin, here are some useful links about CDT –
Continue reading “Remote JavaScript debugging with Chrome Developer Tools”

Posted on

Record and Playback Drawing in HTML5 Canvas

A few months back I had created an application that recorded and played back drawings on HTML5 Canvas. For some time now I wanted to refactor the code in that application and create a reusable ‘component’ from it. Which is what I did this week.

Go ahead and try the demo first – Press ‘Record’ key below and then draw some strokes/lines in the box with the mouse (holding down left button). Once you are done, click Stop button. Click ‘Play’ button to play back the drawing you just drew. You can pause and resume too.

Continue reading “Record and Playback Drawing in HTML5 Canvas”

Posted on

WebAppRunner – Run your web applications standalone

Last week I wrote a blog post about how Java objects can be passed to JavaScript code running in the SWT Browser control. I mentioned that I was working on an Eclipse RCP app that could run web apps as standalone apps in the SWT browser control.

That application is now ready. If you want to give it a try, download it from following links. The application is about 21 MB in size.

JRE is not packaged in the above application. You will have to download and install it, if you don’t have it already.

I have also created a sample app to show how a web page can call Java APIs. The application uses JDK File APIs to get list of files. Download FileListApp from here. Below is a screen shot of this application –

Continue reading “WebAppRunner – Run your web applications standalone”

Posted on

Using Java Objects in JavaScript in Eclipse SWT Browser Control

I have been developing Eclipse plugins for more than four years now. I have implemented many features in the ColdFusion Builder, which is an Eclipse based IDE. Eclipse SDK provides a SWT Browser control which can be used within Eclipse plugin to display HTML files. Eclipse does not include any browser, but it uses the system browser- on Windows it is Internet Explorer and on Macintosh it is Safari. I have used this control mainly to display static HTML content or open a URL on a remote server, e.g. for executing ColdFusion Builder extensions written in CFML.

Recently I have been doing a lot of mobile application dev elopement, and saw how easy it was to invoke Java objects from JavaScript in Android. I have blogged about this in one of my posts, Creating Android Applications with HTML User Interface. This got me thinking that it would be nice if SWT Browser control would also provide some way to pass Java Objects to JavaScript. Turned out that it is possible.

Continue reading “Using Java Objects in JavaScript in Eclipse SWT Browser Control”

Posted on

Dynamic loading of JavaScript files

I am working on a JavaScript framework that uses JQueryMobile. The framework can be used for both mobile and non-mobile sites. You can set the page for mobile by calling, for example, enableMobile method. So the framework does not load JS files for JQueryMobile up front. It does so only when enableMobile method is called.

First I tried to include JS file for JQueryMobile using document.write method –

document.write("<script src='jquery.mobile-1.1.0.js' type='text/javascript'><\/script>\n");

However this did not work – the page was not converted to JQueryMobile page, i.e. CSS styles of JQM were not applied to the page. Instead I got following error –
Continue reading “Dynamic loading of JavaScript files”

Posted on

Sprite Animation in HTML5 Canvas with KineticJS

If you want to simulate motion with repeated display of a set of images, where each image correspond to one position in a series of positions in motion, then you can do this easily with sprite. Sprite is individual image in this series of images that constitute motion. The example of sprite is a person walking, where his/her motions of hands and legs are repeated during the walk. However sprite animation is not limited to repeated motion only. You can simulate, for example, explosion of an object, with series of images (sprites), each showing different stages of the explosion.

In my simple HTML5 game, the planet stops moving (and the game ends) when it hits any asteroid or boundaries of the Canvas. I modified it so that the planet explodes when it hits any obstacle. And for this I used Sprites. KineticJS makes animating Sprites very easy. This is how my sprite sheet looks like (sprite sheet is one image that contains small individual sprite images) –

Continue reading “Sprite Animation in HTML5 Canvas with KineticJS”

Social