Playgroundjs games

[charlesboury]

Hello !

I'm using Playground.js, and I'm looking for a place to share knowledge and games made with it.

I'm making a little Zelda1 clone, but with nicer graphics. It will look like that :

I use JS objects to store data about animations. Basically it's a list of values for each property, through time.

I wanted to put this data in an external .json file, and use this.loadData("myFile"). But I get error messages :

• Firefox 49 says the json is "not well-formed" each time I call the function, but it works after, just pollute the console.
• Chrome 54 is more angry, says "XMLHttpRequest cannot load" and the game never starts.

 

I don't know if I am doing something wrong, or if others have the same problem as me.

 

Anyway, I'm having a lot of fun with Javascript and Playground.js, now hoping to find friends to that play with it also !

Cheers,

[mattstyles]

Sounds like your json is borked, try running it through a json validator to see what that throws up, those errors are generic (i.e. not tied to playground or any other code) although I'm not clear when exactly you get the error. The browser will only report borked json when its made a request to a remote source and is expecting json back but does not get it, surely you're not firing off a request each time you want to access your animation data?

Throw the payload into a gist or on jsfiddle/bin so we can see it, although even better would be to expose the route you're using to gather the data. The problem is either your json is crap or your server isn't returning the it correctly (there is possibly also an issue with your loading function/s in the browser, you could test that by hitting something like https://api.github.com/organizations that will deffo return you valid json with the correct headers etc etc).

[charlesboury]

Thanks for your answer.

I found a partial solution. My json was valid (by http://jsonlint.com/) so I tried to make a jsfiddle, and it worked ! https://jsfiddle.net/charlesboury/ucez4ge8/15/. The only difference with what I was doing is that the json file isn't found locally anymore, but hosted on a server (in that case on dropbox).

***BUT***

Now I have a very strange bug, as you can see in the jsfiddle: some css doesn't work (namely : background-color of body). It comes from the line 7 (the css comes back if I remove it) :

playground({paths:{data:"https://dl.dropboxusercontent.com/u/6253419/"}})

I found this in the playgroundjs doc : http://playgroundjs.com/playground-paths

[Rezoner]

1) Playground is setting its container background. You can override it (see fiddle below). I don't even know what was my reasoning to do that

2) Each call of playground() creates a new application - you have two applications now. I have modified your fiddle - that's how you set paths.

https://jsfiddle.net/hgwqjyua/

* Fiddle doesn't work on chrome because you are linking playground.js directly from github and it doesn't want to execute it because github is sending it with MIME type text/plain.

[charlesboury]

Ok yeah, it's much more logical to set paths this way Thanks !

And to get local .json files ?

[Rezoner]

> And to get local .json files ?

Do you mean you want to have some of the files stored locally and some globally?

You can use this undocumented notation

/* This way you can explicitly tell playground what to load and where to store it. */

this.loadData("<any/path/to/file.json> name");

/* examples: */

// this will look for some json file in google domain and store it as this.data.apple
this.loadData("<http://google.com/some.json> apple");

// let's assume you are in http://localhost/something/index.html 

// this will look for http://localhost/something/common/heroes.json and store it as this.data.heroes

this.loadData("<common/heroes.json> heroes");

// this will look for http://localhost/common/heroes.json and store it as this.data.heroes

this.loadData("</common/heroes.json> heroes");

Let me know if you need more assistance.
 

It also works for sounds and images.