rezoner / playground Goto Github PK

My app wont load because of the above problem, when running nw.js v0.12.0 and PlaygroundJS r2.

I just tested in an empty playground, in case it was an oddity with my app.

I tracked it down and it seems to be from from the status code being incorrect, as the responseText is as expected, but the Status Code is tripping this conditional in the Loader.loadData function

I looked up a bit about the status code, and ran across a Stack Overflow Discussion about it.

Despite the stack overflow discussion suggesting checking the environment, a temporary fix could be:

if (xhr.status !== 200 && xhr.status !== 0) {
  return app.loader.error(entry.url);
}

Though that works, would we want some form of environment detection to decide to use fs when the environment is nodewebkit or to use XMLHttp when in a browser, as discussed in the SO?

Is there a playground.js #slack group, if not anyone interested in joining one if created?

Would it be possible to add an option for loading assets into a hierarchy instead of the current solution?

Loading:
this.loadImages('group/a', 'group/b', 'othergroup/c');

Using the assets currently:
this.drawImage(this.images['group/a'], ..);

What I'd prefer:
this.drawImage(this.images.group.a, ..);

I'm using web pack to compile my code and I'm import a file playground.Soundcloud.js into my project

PLAYGROUND.Soundcloud = function(app) {
  this.app = app
  this.app.audio = Player
}

PLAYGROUND.Soundcloud.plugin = true

PLAYGROUND.Soundcloud.prototype = {
 
}

PLAYGROUND.Application.prototype.playTrack = function(url) {
  this.app.audio.resolve(url,
        {
          callback(track) {
            this.app.audio.audio.play()
            //clubber.listen(this.app.audio)
          },
          play: true
        })
}

PLAYGROUND.Application.prototype.loadAudio = function(audio, opts) {
  opts = opts || {}
}

The file is included but I'm not seeing the plugin

how do you load and instantiate plugins?

why did you removed the docs? it would be great to have offline docs for those who occasionally disconnect from the Internet especially for students.

EDIT: The work is done - see http://playgroundjs.com/libs

Below is a draft usage of a new sound engine I am working on.

It will most likely come as a standalone library and plugin to integrate with playground's loader flow

API and features by example:

Setup / channels

/* audio engine */

this.audio = new SoundOnDemand();

/* separate audio channels */

this.audio.channel("sound");
this.audio.channel("music");
this.audio.channel("enviro").reverb(0.5);

/* as you can see you can push your gui bleeps through a clean channel, but if a player is in a cave his footsteps could go through reverbed enviro channel */

/* set master volume */

this.audio.volume(0.5);

/* set channel volume */

this.audio.channel("music").volume(0.5);

/* enqueue sound to be played in next frame or when ready
   con: 1/60 delay
   pro: ondemand loading
*/

this.audio.channel("sound").play("explosion").rate(0.8).volume(1.0);

/* the new engine will load sounds on demand - and play them ASAP - 
    of course manual preloading is still possible */

Other features

• Dynamics compression
• Equalizer
• Automatic sound disposal (free memory if sound has not been used for certain time)
• Panning

Being lazy?

It take more time to write app.audio.channel("sound").play(...) but there is nothing to stop you from saving a channel this.sound = this.audio.channel("sound")

Variable names reasoning:

• I took app.audio because I am pretty sure you will want to use app.sound for a channel shorthand
• I took channel because it's not Amiga 500 (or AudioElement) and we don't need numeric channels anymore hence I consider this keyword free.

Technically

• It is an abstraction over WebAudioAPI - still pretty universal - bundled with sane defaults
• If you need a sound system tightly coupled with your game engine - featuring audio emitters, spatial description of these sources (velocity, position) - you should not try to write it on top of this abstraction - but instead start from scratch with WebAudioAPI.

I think this is just a documentation issue. I could not figure out how to disable the loading animation. I did figure out how to shorten it:

create: function() {
    this.transitionDuration = 0;
},

Is there a good way to disable the loading animation?

I'd love to have any easy way to set the stereo panning for a sound. Similar to playbackRate, it would be nice to have:

app.sound.setStereoPosition(sound, 0); // both
app.sound.setStereoPosition(sound, -1); // only left
app.sound.setStereoPosition(sound, 1); // only right

This is just something simple to have my 2D character's sounds come from where they are on the screen, left and right.

Maybe name it something else, but you know what I mean. Just adding it to my wish list. I know there is a panner node somewhere at work behind the scenes already, too.

Thanks!

Issue in the Demo shown at Playground.js where user try to make keyboard strokes and Mouse click simultaneously, it's not working as it should. Where two Keyboard keys simultaneously working fine.

this.buttons = {};

seems to be unused in Mouse.js and Touch.js.

In Mouse.js lines like this

this[buttonName] = true;

should be changed to

this.buttons[buttonName] = true;

?

I don't see any use case in Touch.js.

jsDelivr is a free Open Source CDN
https://github.com/jsdelivr/jsdelivr

I followed your instructions, but I receive: Uncaught ReferenceError: TEMP is not defined.

main.js:

var app = new PLAYGROUND.Application({ render: TEMP.showDimensions, container: 'svg-container' });

First of all app.tween(object)

Creates a new instance of a tween. You can have multiple concurent tweens. So how to stop a tween before running another one?

Method 1

Save reference to a tween and stop it before calling another one.

var current = app.tween(turtle).to({ x: 100, y: 200 }).loop();

/* later in the code you want to call another tween */

current.stop();
app.tween(turtle).to(...);

Method 2

Use .discard() to kill all other tweens attached to the object.

app.tween(turtle).to({ x: 100, y: 200}).loop();

/* later in the code */

app.tween(turtle).discard().to({ x: 200, y: 300}).loop();

/* discard() killed all previous tweens */

NPM package with library is not updated for three years. It'd be nice to have latest version there.

Link to NPM: https://www.npmjs.com/package/playground.js

Consider a plugin for a library named playground.

Library namespace is var PLAYGROUND = { }

Plugin is represented by a constructor
PLAYGROUND.SoundOnDemand = function() { }

reasonable permutations

playground.SoundOnDemand.js
playground.soundOnDemand.js
playground.soundondemand.js
playground.sound-on-demand.js

What would you pick - and WHY?

Hi,

there seems to be some problem with reporting mouse move events (particulary I am having this problem with pointerlock but i dont think it has anything to do with it.) I suspect this is because of the usage of Utils.throttle.

If I compare the event output to a raw document event hook, playground will effectively report less movement. This causes the reported movement to feel like its a bit sloppy and lagging behind what the mouse is actually doing. This behavior can also be seen in the pointerlock example with the flying spaceship. Its reacting well when you are moving the mouse slowly, but if you move the mouse quickly, it doesnt seem to speed up as much as it should.

Any fixes or ideas around this?

Edit: i fixed this for myself for now by removing the utils.throttle call on the mousemove event in the playground source.

My specs:

• Mac OS X El Capitan - 10.11.3
• Chrome 48

When approaching larger text sizes, usually around 100px+, the text is getting clipped. I know there is some behind the scenes action going on to get more accurate bounding boxes for text alignment, and I think it might be happening due to that. This is not happening in Firefox 44.0.2.

Here is a demo link and screenshot below: http://codepen.io/jackrugile/pen/e72ce88783098194ea7a5c3de39a29e4

Both loader functions:

PLAYGROUND.Application.prototype.loadTexture

&

PLAYGROUND.Application.prototype.loadObject

include the line:

this.loader.add(name);

yet the variable 'name' is defined on line 3374 of playground.js (SoundWebAudioAPI.js) as:

if (alias) name = alias.source;

Why does the Object loader make use of this empty string?

Hi, when I'm using a mousedown or a pointerdown and I click multiple times in a short time, the console says "Uncaught ReferenceError: Utils is not defined" in playground.js:2368

with a context argument you can use .call instead of .bind. Because .bind create a second function, consuming more memory.

When I load a sound in the application object

forceAudioFallback: true,
create() {
    /* things to preload */
    this.loadImage("rejects","orientation")
    this.loadSound("UR-FullExtreme-Voice")
    this.loadData("cuepoints")
  },

then play the audio file in a state

create(){
  this.app.music.play('UR-FullExtreme-Voice', 0)
    console.log('playing');
  },

The audio does not play

it seems that https://github.com/rezoner/playground/blob/master/src/SoundAudio.js#L55

pauses the audio file

maybe you should remove the listener after use for loading.

Do I have access to any of the sound events? I need to trigger actions based on time update or play/ stop

What is the browser compatibility for playgroundJS?

Hi there, not sure if this is the best place to ask for help or not, but I like the feel of your framework, but I can't figure out how to set my own canvas where I want it in the dom and also how to remove the black overlay from the screen. I just more or less want to make a small game that fits into another site. Any suggestions?

Just getting started and I'm running into errors. This is my code:

var app = new PLAYGROUND.Application(
{
    paths : 
    {
        images : 'media/images/'
    },

    create : function()
    {
        this.loadImage('cake-6');
    },

    render : function()
    {
        this.layer.clear('#000');
    }
});

This is the error:

Uncaught (in promise) TypeError: this.getAssetEntry is not a function {stack: (...), message: "this.getAssetEntry is not a function"}message: "this.getAssetEntry is not a function"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }proto: Errorpromise @ playground.js:1412PLAYGROUND.Application.loadOneImage @ playground.js:1436PLAYGROUND.Application.loadImages @ playground.js:1391PLAYGROUND.Application.loadImage @ playground.js:1371PLAYGROUND.Application.create @ main.js:10PLAYGROUND.Application.emitLocalEvent @ playground.js:1175(anonymous function) @ playground.js:1081

Should't this line

      if (this.listeners[event][i]._remove) {
        this.listeners[event].splice(i--, 1);
        len--;
      }

be more like

      if (this.listeners[event][i].callback === callback) {
        this.listeners[event].splice(i--, 1);
        len--;
      }

?

Hi,
I just noticed that there is no resize function in states and I think it could be usefull.
Please add it if you find it revelant and if you have enought time, thank you!

I created a Howler Plugin

PLAYGROUND.Howl = function(app) {
  app.loadAudio = function(audio, opts) {
    this.loader.add();
    let url = this.getPath("sounds").concat(audio,".", this.preferedAudioFormat || '.mp3' )
    this.audio = new Howl({
      src: [ url ],
      format: [ this.preferedAudioFormat || "mp3" ],
      autoplay: false,
      loop: false,
      preload: true
    })

    this.audio.once('load', () => {
      window.console.re.log('loaded')
      this.loader.success.call(this.loader)
    } )
    this.audio.load()
  }
}

PLAYGROUND.Howl.plugin = true

but when I try to run the plugin using

new PLAYGROUND.Application({
  smoothing: true,
  loaded: false,
  preferedAudioFormat: "mp3",
  create() {
    /* things to preload */
    this.loadImage("rejects","orientation")
    this.loadAudio("UR-FullExtreme-Voice") // Audio file
    this.loadData("cuepoints")
  },

then on a State....

create: function() {
    ....

    this.soundId = this.app.audio.play()
  ...

it works on the following IE10 Mobile, iOS7, macOS Safari & Opera

But does not play( well it says its playing but I hear no volume) on Android 5.1 browser

I thought maybe I needed to do a click event so I on the state

create: function(){
....
 var a = document.body;
    a.addEventListener('touchstart', () => {
    //  window.alert('ok')
      window.console.re.log('clicked');
      try {
        this.soundId = this.app.audio.play()
      } catch (e) {
        console.re.log(e)
      } finally {
        console.re.log(this.app.audio.playing(this.soundId));
      }
    })

Which I tried triggering the click event both programmatically and manually

But no go. Can you give me some advice here on how to workaround this Android 5.1 bug....?

Just noticed that the website is down. Getting no response from a ping.

I have the following playground app

var app = new PLAYGROUND.Application({

 ....
  ready() {
    /* after preloading route events to the game state */
    this.setState(ENGINE.Game)
    this.loaded = true
  },
  enterstate(){
    console.log('enter state', arguments[0].state.name);
  },
  leavestate(){
    console.log('leave state', arguments[0].state.name);
  },
  resize() {
    if(!this.loaded) return
    else if((this.width < 1024) && (this.height > this.width)) {
      if(this.states.current.pause != undefined) this.states.current.pause = true

      this.setState(ENGINE.Orientation)
    } else if(this.states.current.name && this.states.current.name == 'Orientation'){
      if(!ENGINE.currentState) ENGINE.currentState = ENGINE.states[0]

      this.setState(ENGINE[ENGINE.currentState])
    }
  }
})

when the device orientation has changed to portrait mode a state defined as "orientation" is set. When the orientation changes back the state is changed back to another state.

The problem I am having is that the "orientation" state does not seem to "leave"( visually) even though the other state that was set has been entered into and rendering

I've solved this by changing the resize function to:

` resize: function() {

	/* update renderer size on window resize */

	this.renderer.setSize(this.width, this.height);
	if( ENGINE.Game.camera) {
		ENGINE.Game.camera.aspect = this.width / this.height;
		ENGINE.Game.camera.updateProjectionMatrix();
	}

},`

-but this is more of a workaround.

I was minifying playground.js with the closure compiler (thanks for suggesting this on Ludum Dare, BTW) and it turned up this bug... It should be == of course...

gamepads[n].sticks[n] values remain undefined at runtime with stick activity, buttons are working fine.

Here's my little test app:

playground({

  //container: exampleContainer,

  gamepaddown: function(data) {

    this.button = data.button;
    this.gamepad = data.gamepad;

  },

  render: function() {

    this.layer.clear("#0af");

    var text = 
      "last pressed button is " + this.button + 
      " on gamepad " + this.gamepad;

    this.layer
      .font("24px 'arial'")
      .fillStyle("#fff")
      .fillText(text, 16, 32)
      .fillText(this.gamepads[0].sticks[1].x + " " + this.gamepads[0].sticks[0].y, 16, 96);

  }

});

I'm on Windows 7, with a Microsoft wireless dongle, xbox 360 gamepad, Latest Chrome browser.

Letting you know that I need multi language dictionary for my next game so I am working on one.

Leaving this open for discussion in case you expect some features.

Things so far:

Basic usage

/* dictionary.json */

{ 
  "reportDamage": "Your health is {health}"
}

/* app.js */

app.dictionary("reportDamage", { health: 70 });

> Your health is 70

Tree

{
  "items": {
    "weapon": "bron",
    "shield": "tarcza",
    "armor": "zbroja"
  }
}

app.dictionary("items/shield");

> tarcza

Access object properties

{
  "weaponDescription": "Deals {weapon.damage} damage each {weapon.cooldown} seconds"
}

app.dictionary("weaponDescription", {
  weapon: { damage: 4, cooldown: 6 }
});

> Deals 4 damage each 6 seconds

Self lookup and {nested{tags}}

{tags} are resolved in order from inside to outside

If tag is a slash separated path ex. "{path/to/something}" the tag will be replaced by dictionary entry
If tag is a dot separated path ex. "{path.to.something}" the tag will be replaced by replace entry

Hence it is possible to create quite flexible dictionary entries

{
  "descriptions": {
    "weapon": "That is a weapon.",
    "shield": "It is some shield.",
    "armor": "That must be an armor."
  },

  "details": {
    "weapon": "Damage: {damage}"
  }, 

  "look": "Your are looking at the object. {descriptions/{type}} - {details/{type}}"
}

app.dictionary("look", { type: "weapon", "damage": 4 });

> You are looking at the object. That is a weapon. Damage: 4

Pulling random element from dictionary group

If the {tag} path ends with slash it will pull random entry from a group

{

  "insluts": [
    "you rebel scum",
    "you filthy hamster",
    "you worthless bum"
  ],

  "deathWish": "Die, {insults/}"

}

app.dictionary("deathWish");

> Die, you filthy hamster

At the top of the intro to states, the following message appears:

Warning: file_exists(): open_basedir restriction in effect. File(documents/intro/states/meta.json) is not within the allowed path(s): (/tmp/:/home/rezovsky/) in /home/rezovsky/public_html/playgroundjs.com/index.php on line 46

If you move the mouse before the loading screen is shown an undefined Error is thrown:

TypeError: this.elementOffset is undefined
 -> this.x = this.mousemoveEvent.x = (e.pageX - this.elementOffset.x - this.app.offs...

playground.js (Row 1749, Column 4)

Nothing critical but it's not that nice.

I posted on the website about a symbol for any keypress, as I believe it may be useful to have access to. Possibly something like app.keyboard.any

I want to use this framework for a project where we'll be creating multiple games (within the same "page load") and will need to "destroy" instances on the fly. I can't seem to find a way to do that. Halp?

Hi,

I saw playground does not implement an ability to unload sounds. The ability to unload music files especially in terms of big music files on mobile devices to save RAM.

Is there a reason why something like playgroundApp.unloadSound(soundId) does not exists yet? If it's possible to add this ability into the main branch then I could provide a patch ( I need to create the ability anyway for my game :) ).

I just downloaded the template with the canvas based renderer but instead, I got the threejs based renderer.

Is the threejs based renderer also using webgl?

I was also wondering what the background color was of the playground preloader.

And why is the text here not in the middle of the screen? : http://pastebin.com/RmxJcztc

Hi, I don't know if it's the right place to ask but is it possible to add a loader for local fonts ?