Pender Android for Phonegap Cordova

sure, same link as before

http://www.edfarias.com/arcaded.zip

I GOT IT!!

This part. I had to change the PenderActivity to match the name of my project. In my other attempt I let eclipse fix it for me without reading :).

import android.app.Activity;

import android.os.Bundle;

import com.pender.Pender;

public class PenderActivity extends Activity

{

    /** Called when the activity is first created. */

    hvp@Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        mPender = new Pender(this);

        mPender.init();

    }

    private Pender mPender;    

}

ok dude, easy fix!

the android project specifies your main activity as arcaded, but that's not present in your project.

rename src/com/arcaded/PenderActivity.java to src/com/arcaded/arcaded.java

then change the Activity Class name to match

public class PenderActivity extends Activity

to

public class arcaded extends Activity

that got the project working! Remember to disconnect the debbuger or unplug the phone from the machine once it's running, and behold 50 sprites rendering at 30fps, each with it's own texture bind event (equivalent to 50 unique sprites!)

-- edit --

lol, missed your fix before posting, good work mate! How's it look? What device are you running it on?

Now the big next question or 2 :).

1. What do I do to include my HTML5 project? In the past I would build the app with eclipse and phonegap. Creating a www directory under assests and including all my html5 files, phonegap.js and referencing phonegap.js in the index.html

2. Are you working on IOS support as well?

3. You the man

I'm testing on a HTC Thunderbolt running 2.3.4

I have these white bars, normal?

<img src="http://www.edfarias.com/pentest.jpg" border="0" />

1. A unique thing about Pender is that it supports a DOM-less javascript environment. No html or css. So all render code has to go in it's own file

1.A the Pender-Cordova Plugin allows crosstalk between the Pender runtime and Cordova

1.B you may need to refactor your code slightly so all the canvas calls are in their own file, you can then send javascript messages to the renderer javascript from the cordova javascript

1.C check out the Pender.java file, that's the main entrypoint for the framework. You'll see in the constructor that it refences assets to load into the javascript framework

1.D check out assets/client/penderdemo.js to see the implementation of the demo. Note that all of the texture map image processing takes place on the javascript side, just like it would in a desktop html5 project. Note that this does not preclude Pender from providing helper functions in the future, which would be optimized and natively implemented

2. yessir! I wrote a Canvas Renderer for iOS, and I need to tie it in with the iOS Pender proof of concept here

github.com/lorinbeer/Pender-iOS-POC

3. no, you da man! Thanks for sticking it out!

I'm testing on a HTC Thunderbolt running 2.3.4

I have these white bars, normal?

<img src="http://www.edfarias.com/pentest.jpg" border="0" />

no, the white bars aren't normal :)

they don't appear on mine using the same project, could be more layout/android bs from eclipse

do they appear as you run pender, or just when you take a pic?

No, I see them when it runs. I was testing through eclipse. I did a build, gonna test again on my thunderbolt then on my nexus 7

Looks fine on my nexus 7

delete

1. A unique thing about Pender is that it supports a DOM-less javascript environment. No html or css. So all render code has to go in it's own file

1.A the Pender-Cordova Plugin allows crosstalk between the Pender runtime and Cordova

1.B you may need to refactor your code slightly so all the canvas calls are in their own file, you can then send javascript messages to the renderer javascript from the cordova javascript

1.C check out the Pender.java file, that's the main entrypoint for the framework. You'll see in the constructor that it refences assets to load into the javascript framework

1.D check out assets/client/penderdemo.js to see the implementation of the demo. Note that all of the texture map image processing takes place on the javascript side, just like it would in a desktop html5 project. Note that this does not preclude Pender from providing helper functions in the future, which would be optimized and natively implemented

2. yessir! I wrote a Canvas Renderer for iOS, and I need to tie it in with the iOS Pender proof of concept here

https://github.com/lorinbeer/Pender-iOS-POC

3. no, you da man! Thanks for sticking it out!

Ashley

Have any thoughts on what LorinBeer mentioned just above? A lot of that is currently greek to me, but I'm willing to learn greek if I need too. Just thought it might make sense to you :).

No, I see them when it runs. I was testing through eclipse. I did a build, gonna test again on my thunderbolt then on my nexus 7

Looks fine on my nexus 7

oooh! A device specific issue! I test on a Nexus 7 and Galaxy Nexus primarily. We'll have a closer look at this. Speculation says it's something to do with specific implementation of gl on the thunderbolt and how we update the canvas. Log an issue at github!

Given the pain you've experienced getting this up and running, I'm prioritizing two things today:

1. Windows build script

2. Precompiled Pender.jar, located here bitbucket.org/lorinbeer/pender/downloads

I've uploaded a preliminary pender jar, but it's compiled in debug mode, and has breakpoints in it (which means you need to continue a few times to get the app to run)

This should make including pender in a project a 2 or 3 step process, I'm updating my android sdk's at the moment, once that's done I can compile a release version of the library

Awesome. Thank you.

Now use Construct 2 users just need to work through how to get our html5 project running using pender.

I'm a bit confused on this part. If I already have an entire project done in eclipse with phonegap, is that when I implement pender, or is it something that need to be done prior to creating the project in eclipse?

I guess that is my confusion now. I'll keep playing :).

It's difficult for us to support DOM-less engine. We see DOM-less as a disadvantage, not an advantage, because we support so many features that happen in the browser layer such as WebGL, Web Audio API, WebSockets, etc. etc.

Awesome. Thank you.

Now use Construct 2 users just need to work through how to get our html5 project running using pender.

I'm a bit confused on this part. If I already have an entire project done in eclipse with phonegap, is that when I implement pender, or is it something that need to be done prior to creating the project in eclipse?

I guess that is my confusion now. I'll keep playing :).

For starters, you can include the PenderLibrary project or the Pender.jar in your eclipse project.

The Cordova-Pender Plugin will live here:

github.com/lorinbeer/cordova-pender-plugin

it includes the PenderCordova files, which I mistakenly pushed, and subsequently broke the build for you guys <img src="smileys/smiley9.gif" border="0" align="middle" />. The plugin allows crosstalk between Pender and Cordova, as well as layering the views so both are visible.

Getting Construct2 talking with Pender will require a little bit of investigation, but we should be able to figure it out in short order.

It's difficult for us to support DOM-less engine. We see DOM-less as a disadvantage, not an advantage, because we support so many features that happen in the browser layer such as WebGL, Web Audio API, WebSockets, etc. etc.

Ashley

Hey Ashley!

I wouldn't expect Construct 2 to run in Pender in it's entirety. I have some experience embedding existing projects in Pender, including work for Zynga (not public unfortunately) and Bonsai.js from uxebu.

Two easy ways are:

1. Construct2Shim.js: which would redirects canvas calls through a messaging api to Pender, not as optimized as a full renderer running in Pender, but tests still indicate a massive jump in framerate and rendering performance. Easy to implement, with no change to ConstructJS, just a shim to be loaded in the WebView

2. Construct2Pender.js: which would define a tiny rendering engine using the graphics calls Construct2 expects to exist in the WebView. Instead of calling a canvas in the main Construct2 runtime, we would call Pender through the bridge, using an abbreviated syntax which would update the rendering engine.

Note that Pender can include any functionality that the device supports, exposed under any api we want. The Pender roadmap includes support for Web Audio and WebGL!

To echo your points, the DOM is most certainly an advantage when it comes to layout and the breadth of api's available. However, it kills rendering speed even when hardware acceleration is implemented in the browser. Decoupling the rendering engine is not only good architecture, but it allows a paper thin layer between the js and the native graphics calls, really bridging the gap between js graphics and native graphics.

One of the use cases of Pender is to provide embedded canvases in a Cordova/PhoneGap project, using the Pender runtime as a rendering engine for fast canvas, and not as a replacement for all that HTML5 offers.