Preload images from URLs on the fly

cocos2d-x JavaScript
#1

Hello,

I’m new to cocos2d-html5.
Could someone kindly tell me how I can preload images from URLs (different domain) when the game loads.

Thanks!!
Max

#2

Hi, @maxii

To preload a list of resource for one scene, you can use cc.LoaderScene:

cc.LoaderScene.preload([
    'res/explode.plist',
    'res/img1.png',
    'res/img2.png'
], function () {
    cc.director.runScene(new MyScene());
}, this);

This method can ensure that your scene get started after all the resources have been loaded
If you want to load a list of resource at any other moment, you can use

cc.loader.load([
    'res/explode.plist',
    'res/img1.png',
    'res/img2.png'
], function(err){
    if(err) return console.log("load failed");
});

Full documentation of cc.loader

Huabin

#3

Thanks Huabin!
It seems that the cc.loader.load is from v3.0a. I’ll give it a try then!

#4

Hi @maxii,

The feature loading URL from different domain has been supported.

example:
{type:"serverImg", src:"https://avatars0.githubusercontent.com/u/232330?s=400"}

More details please see:

#5

Thanks Dingping!

I used the HelloHTML5World template to try this out.
when I put
{type:“serverImg”, src:“https://avatars0.githubusercontent.com/u/232330?s=400”},
into the g_resoutces
I got this exception:
uncaught exception: cocos2d:unknown filename extension: com/u/232330

I can create the sprite without preload it though, by directly write
this.sprite = cc.Sprite.create(“https://avatars0.githubusercontent.com/u/232330?s=400”);
in the myApp.js, it shows the image as expected.But, when I replacing the “https://avatars0.githubusercontent.com/u/232330?s=400”
with something like
“http://www.aghtd.com/SurveyReview/InstantWin/match_15/html5/scratchV2B_M/res/smallTile.png”
the image don’t show up.

Also, when I try to add
{type:“serverImg”, src:“http://www.aghtd.com/SurveyReview/InstantWin/match_15/html5/scratchV2B_M/res/smallTile.png”}
to “resource.js”, the game stopped at “loading… 75%”

#6

Hi @maxii,

Please let the aghtd.com server allow cross-origin.

About the error “uncaught exception: cocos2d:unknown filename extension: com/u/232330”.
Please update the latest of “develop 3.0” branch of Cocos2d-html5 from github.com

Bests
David

#7

Great! Thanks!

#8

I really like this framework! My game runs smoothly!
Have another question:
My game will live on a page witch also has many other contents on it. When on mobile device, within the game area, I can’t swipe my finger to scroll the page to see the contents down below the game. Please advice how can I enable the scroll.

Any help would be greatly appreciated!!

Thanks,
Max

#9

Any suggestions?

#10

OK, I understand that the game better runs on full screen mode, and I’m convincing my company to make the game page only contain the game itself.
But in the mean time, I’m still want give it a last try.
My game is actually pretty simple, all user have to do are just clicks, here is a demo:
http://www.aghtd.com/SurveyReview/InstantWin/match_15/html5/scratchV2B_M/index.html
I know this might sound dumb (I’m a newbie of html5): can I disable all the touches and only handle the mouse clicks for this game on a mobile device?
Again, I really like the cocos2d framework, and I really want make this work!
Please help!!

Thanks,
Max

#11

@maxii

What do you mean by disable all the touches and handle the mouse clicks on a mobile device? since there are no mouse event on a mobile device.

#12

Like the way you interacting with the usual html elements on the page: links, buttons, etc?
I don’t know if this even possible, probably not…

#13

May be you can handle only one touch all the time, assume that’s the mouse ?

#14

Thank you, I’ll try.