Template for android+js

Is there any script/template to generate an Android app with js bindings ? (like the XCode “cocos2d + javascript” template with cocos2d-iphone)

i didn’t find the script and i am able to reach this copying one of the project JS that work (Watermelon with me) and modifying some files (with search and replace) in order to change the name project and in order to run the project.
This isn’t the right way obiouvsly but this is the only way unless the script generate the project for JS (but looking to the .sh scripts there isn’t anything related to javascript but for lua engine :-/)

You could use tools/project-creator to create multi-platform probject.

Did you try to do it this way: http://www.raywenderlich.com/33028/how-to-make-a-cross-platform-game-with-cocos2d-javascript-tutorial-the-platforms ?

I finally used the tools/project-creato script mentioned by Antonio Gallo.

I’ve actually read this tutorial, it’s great but I also wanted to use CocosBuilder to generate platform/screensize-specific resources.

So I came up with a few modifications on the architecture, which I explained here: http://2sa-studio.blogspot.com/2013/04/setup-cross-platform-project-with.html

oh nice tutorial! i’ve made all the step on my own i didn’t found anything months ago :frowning:
an helper class to work with this method is this:

`visibleSize = director.getVisibleSize();
visibleOrigin = director.getVisibleOrigin();

LEFT_CENTER = cc.p(visibleOrigin.x, visibleOrigin.y+visibleSize.height/2);

RIGHT_CENTER = cc.p(visibleOrigin.x+visibleSize.width, visibleOrigin.y+visibleSize.height/2);

TOP_CENTER = cc.p(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height);

BOTTOM_CENTER = cc.p(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y);

CENTER = cc.p(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/2);

LEFT_TOP = cc.p(visibleOrigin.x, visibleOrigin.y+visibleSize.height);

RIGHT_TOP = cc.p(visibleOrigin.x+visibleSize.width, visibleOrigin.y+visibleSize.height);

LEFT_BOTTOM = visibleOrigin;

RIGHT_BOTTOM = cc.p(visibleOrigin.x+visibleSize.width, visibleOrigin.y);

WIDTH = visibleSize.width;

HEIGHT = visibleSize.height;`

and use CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionNoBorder);
instead of CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionShowAll);

kResolutionShowAll can stretch the image and it’s bad :frowning:
kResolutionNoBorder can cut a piece of screen but nothing is stretched!
Then to use kResolutionNoBorder it’s necessary use the helper variables that i’ve converted in Javascript in order to set position of object in relationship with the visible rect and not on the screen size (with this appdelegate code cocos2d show you the screen size ALWAYS in design size resolution! ( CCSize designSize = CCSizeMake(480, 320); ) then width and height is always 420x320!

view this article for more information: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support

I hope this help you and others :slight_smile:
And i hope is understandable :stuck_out_tongue:

PS: with this architecture and this tecnique i’ve made a game (just in development) that run in “native” resolution on all devices (phone and tablet!) and it looks really pretty in all devices that i’ve tested (android and ios too!)

Antonio

Thanks for the tip on multi-resolution support :slight_smile:

I noticed I had issues with screen size/position when building the android version. Does it fix it ?

Depends on the code… if you use the coordinates that i’ve posted to set position of the object in theory not…
if for example you are setting position in relationship with screen.width and screen.height it’s normal have issues on position or images cutted (if you use kResolutionBorder settings).

I updated my tutorial to use kResolutionNoBorder, as you suggested.

I also noticed that the code related to screen size detection was wrong (confusions between width and height), though I basically took it from CocosBuilder documentation.

Now it works fine on Android

the tutorial is very usefull (i had searched for this before made all this modify on my own :P)
but it’s important specifying that if you operate in this way you MUST use as reference point not the screen size point (0,0 0,height width,0 etc) but the coordinate of visible rect that can easely use import javascript code that i posted few post before!
This step is really important because if you don’t use this coordinate (if you use absolute coordinate) in device that have different ratio, the object of the scene could be draw outside the screen and cutted (because kResolutionNoBorder “cut the screen”).

I hope that what i’m saying is understandable! :stuck_out_tongue:

Quoting official documentation to be more clear:

When using NoBorder mode, there are some areas of the backgroud out of scope. If you use absolute coordinates based on design resolution size(480x320),
some of your game UI will not be shown completely. To resolve this issue, you have to make the coordinates base on ‘visible rectangle’. You can get the origin point of ‘visible rectange’ by ‘CCDirector::sharedDirector()->getVisibleOrign()’.
Together with ‘CCDirector::sharedDirector()->getVisibleSize()’,you will be able to confirm 9 points on the screen. They are ‘Left’,‘Right’, ‘Top’,‘Bottom’,‘Center’,‘LeftTop’,‘RightTop’,‘LeftBottom’ and ‘RightBottom’.
Your game will be really full screen display if all the coordinates of your game is base on these nine points.
About how to calculate these points, please refer to ‘VisibleRect’ class in TestCpp project.

My javascript code is the porting of VisibleRect class.
In the tutorial i think you could add this specification and the javascript code of the visible rect (if you want report the name of author, my nickname is ‘dokkis’).

It will be very helpfull to anyone who read your turorial And in this way the tutorial is really complete! :slight_smile:

I just updated the tutorial with your helper coordinates. It’ll surely be helpful. Thanks!