LÖVELINESS a LÖVE Chrome Extension

[Nixola]

Slight bug: lg.supported 'npot' returns false but LÖVELINESS can display npot images.

[bartbes]

Yes, 0.8.0 can display NPOT images regardless of hardware support.

[slime]

Canvases (the love.graphics kind) aren't auto-padded when NPOT textures aren't supported, even though images are, so that's mostly what love.graphics.isSupported("npot") is useful for.

[Nixola]

Oh, right, I forgot about that and I forgot to test canvases too.
The problem is that now I've tested a canvas (200x200) and it works too

[Plu]

This is probably going to be a "no", but is there any way to run something like LÖVELINESS inside of a webpage instead of as a full browser tab?
I mean like opening it in a html-element and running it there.

[binji]

This is probably going to be a "no", but is there any way to run something like LÖVELINESS inside of a webpage instead of as a full browser tab?
I mean like opening it in a html-element and running it there.

Actually, yes! I was going to add a demo of this, but haven't gotten around to it. To do it, add something like this to your HTML:

Code: Select all

  <div id="listener">
    <script>
      document.getElementById('listener').addEventListener('load',
          function() { document.embeds[0].postMessage('run'); }, true);
    </script>
    <embed type="application/x-love-game" love_src="url/of/your/game.love" width="800" height="600">
  </div>

One big caveat: this does not support persistent storage. You can make that work too, but it is a lot more JavaScript.

A little explanation of the JavaScript: it is necessary to notify the plugin when it should run. It unfortunately does not run automatically. Instead, the code waits for the module to load, then posts the message "run" to it.

If the user does not have LÖVELINESS installed, they'll just get the missing plugin image. If you want to detect whether they have LÖVELINESS installed, you can do something like this:

Code: Select all

  if (navigator.mimeTypes['application/x-love-game']) {
   // the user has LÖVELINESS installed
  } else {
   // the user doesn't have loveliness installed, display an error, remove the embed, etc.
  }

[Robin]

Why is that source attribute named love_src instead of src?

[Plu]

This is probably going to be a "no", but is there any way to run something like LÖVELINESS inside of a webpage instead of as a full browser tab?
I mean like opening it in a html-element and running it there.

Actually, yes! I was going to add a demo of this, but haven't gotten around to it. To do it, add something like this to your HTML:

Awesome! Thanks, it works great. (As long as the .love file is on the same domain as the .html page, I'm guessing? It didn't work when I opened the file from my local machine with the .love on the web)

[Plu]

A little explanation of the JavaScript: it is necessary to notify the plugin when it should run. It unfortunately does not run automatically. Instead, the code waits for the module to load, then posts the message "run" to it.

Hm, this makes me wonder. Can the plugin send messages that the game generates back to javascript? So that the love application can communicate with the rest of the website? And can javascript send additional messages to the plugin that end up in the game?

I realise it'd make a pretty tight coupling and is probably not of much interest to you, but the webdeveloper in me wants to know

[binji]

Why is that source attribute named love_src instead of src?

Good question. Basically, LÖVELINESS can be loaded three ways:

Code: Select all

1. <embed type="application/x-nacl" src="love_release.nmf" love_src="...">
2. <embed type="application/x-love-game" src="...">
3. <embed type="application/x-love-game" love_src="...">

The first way is the normal way to load a NaCl plugin. I use love_src here because src is already used to specify the NaCl plugin to load. The second way is the way LÖVELINESS is loaded when you click a .love file. It loads the plugin as its own document, and calls a special function on the NaCl plugin to tell it when the document is loaded, giving it a URLLoader that can read the contents of the "src" attribute. The third way is the way I've suggested to embed in your page. You have to use love_src here because the second way expects to get an extra function call that never happens.

Awesome! Thanks, it works great. (As long as the .love file is on the same domain as the .html page, I'm guessing? It didn't work when I opened the file from my local machine with the .love on the web)

Yeah, AFAIK that won't ever work on Chrome. You can't reference file:// resources from a normal web page, and you can't reference file:// resources from other file:// resources.

As for cross-origin support: I could read the .love file using CORS, allowing you to specify a .love file on a different origin than the page. You'd have to set up the .love file server to use CORS, naturally. Would anyone use this functionality?

Can the plugin send messages that the game generates back to javascript? So that the love application can communicate with the rest of the website? And can javascript send additional messages to the plugin that end up in the game?

Yes, it's possible. There would need to be a new function in lua to do it, obviously, and I'm not too keen on extending the LÖVE API. BTW, there are some messages that the plugin already sends to the page that may be useful. You can listen for them like this:

Code: Select all

  document.getElementById('listener').addEventListener('message', function(event) {
    // event.data is a string:
    // setWindow:<width>,<height> -> the plugin is asking to change the size of the embed
    // download:<downloaded>,<max> -> the plugin is telling how much of the .love file is downloaded, in bytes
    // OK -> the plugin has finished downloading the .love file
    // bye -> the .love game has ended, remove the embed element or reload it, etc.
    // requestFileSystem -> the .love game is trying to write to persistent storage, but needs JavaScript to OK it.
  }, true);