How To Make a Cross-Platform Game with Cocos2D Javascript Tutorial: The Platforms

[rwenderlich]

This is the official thread to discuss the following blog post: How To Make a Cross-Platform Game with Cocos2D Javascript Tutorial: The Platforms

[jim]

What a great set of tutorials... I was just investigating different HTML5 gaming APIs with the hope of using PhoneGap to accomplish cross platform release, but that was not looking to be very promising for developing anything with a decent frame rate and responsiveness.

Is it possible to access tilt input from mobile devices and keyboard input from Mac using same javascript source code (obviously with some logic to check whether tilt/keyboard input is available)? Also, are you able to use other javascript libraries and still release to all the platforms (for example, the javascript FaceBook API)?

Thanks, and I hope you add additional cocos2d-javascript tutorials in the future.

[wuhao]

yes, tilt (accelerometer) api exists, and it even works on macbook, and yes, macbook got accelerometer built in, it is compatible with Cocos2d-iPhone and Cocos2d-X

However, Javascript API designed for the web pages will not work, as DOM is not implemented in Cocos2d-iPhone and Cocos2d-X.
those kind of code you will need to rewrite to use the native sdk for native app

[supersuraccoon]

Thanks for the great tutorial

I tried to port one of my former ios game html5 and everything works fine except that when I tried to embed the game into a wordpress post (just like you do in the tutorial)

The structure of all my files:

-root (supersuraccoon-cocos2d.com/)
- GameDeploy
- all files here (js, ccbi, png ... no folders inside)

And the error occurs when loading resource:

Code: Select all

Cocos2d-html5-v2.1.1
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/AboutScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/CFSGamePlayScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/HelpScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/HighScoreScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/LevelSelectScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/MainMenuScene.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/OpenningTitle-en.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/OpenningTitle-ja.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/OpenningTitle-zh.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/OptionLayer.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/PauseLayer.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/ReadySetGo.ccbi".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/paigow.plist".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/tutorial.plist".
XHR finished loading: "http://www.supersuraccoon-cocos2d.com/GameDeploy/element.plist".

GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/splashTitle.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//splashTitle.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/about-ja.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//about-ja.png
http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/mainBg.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//mainBg.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/about-en.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//about-en.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/about-zh.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//about-zh.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tableBg1.jpg 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tableBg1.jpg
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/paigow.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//paigow.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tableBg2.jpg 404 (Not Found)
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/element.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tableBg2.jpg
cocos2d:Failed loading resource: undefined/GameDeploy//element.png
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tableBg3.jpg 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tableBg3.jpg
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tableBg4.jpg 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tableBg4.jpg
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tableBg5.jpg 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tableBg5.jpg
GET http://www.supersuraccoon-cocos2d.com/undefined/GameDeploy/tutorial.png 404 (Not Found)
cocos2d:Failed loading resource: undefined/GameDeploy//tutorial.png


And my resources-html5.js file:

Code: Select all

var dir = "/GameDeploy/";

var ccb_resources = [
    {type:'image', src:dir + "splashTitle.png"},
    {type:'image', src:dir + "about-zh.png"},
    {type:'image', src:dir + "about-en.png"},
    {type:'image', src:dir + "about-ja.png"},
   
    {type:'image', src:dir + "element.png"},
    {type:'image', src:dir + "mainBg.png"},
    {type:'image', src:dir + "paigow.png"},
    {type:'image', src:dir + "tableBg1.jpg"},
    {type:'image', src:dir + "tableBg2.jpg"},
    {type:'image', src:dir + "tableBg3.jpg"},
    {type:'image', src:dir + "tableBg4.jpg"},
    {type:'image', src:dir + "tableBg5.jpg"},
    {type:'image', src:dir + "tutorial.png"},

    {type:'ccbi', src:dir + "AboutScene.ccbi"},
    {type:'ccbi', src:dir + "CFSGamePlayScene.ccbi"},
    {type:'ccbi', src:dir + "HelpScene.ccbi"},
    {type:'ccbi', src:dir + "HighScoreScene.ccbi"},
    {type:'ccbi', src:dir + "LevelSelectScene.ccbi"},
    {type:'ccbi', src:dir + "MainMenuScene.ccbi"},
    {type:'ccbi', src:dir + "OpenningTitle-en.ccbi"},
    {type:'ccbi', src:dir + "OpenningTitle-ja.ccbi"},
    {type:'ccbi', src:dir + "OpenningTitle-zh.ccbi"},
    {type:'ccbi', src:dir + "OptionLayer.ccbi"},
    {type:'ccbi', src:dir + "PauseLayer.ccbi"},
    {type:'ccbi', src:dir + "ReadySetGo.ccbi"},

    {type:'plist', src:dir + "element.plist"},
    {type:'plist', src:dir + "paigow.plist"},
    {type:'plist', src:dir + "tutorial.plist"}
];


You see all the ccbi and plist files loads successfully but when it comes to the image files the path to load became weird (where dose that "undefined" come from ~)

Hope you can give me some advice, thanks

[JHNeves]

What about the .js files?? Would they be visible?? That way you could eassyly get your game cloned !

[WithoutThe]

For anyone interested I had a problem with ...

#include "generated/cocos2dx.hpp"

changed it to

#include "generated/jsb_cocos2dx_auto.hpp"

and it worked.

H

[blitzart]

Great tutorial. I have a question. How can you load a json file from the folder 'src' in main.js? Thanks

[alaky]

Hi,
Thanx for your great tutorial , but when I run it on Android device , it quits the app immediately with no errors.What could be the possible problem?
Thanks