Just displaying basic HTML5, CSS, & styling with fontrenderer.js

subvertio · March 23, 2016, 10:31pm

Referring to the HTML, and CSS Tutorials:
here:
http://developer.playcanvas.com/en/user-manual/assets/html/
and HERE:
http://developer.playcanvas.com/en/user-manual/assets/css/

I am just getting familiar with displaying HTML elements in playcanvas. I’m guessing Guessing the HTML just overlay’s in the front of the webGL stuff?

here is what I am trying:

I create a script called game.js and attach it to the root in scene ( I plan on just having game.js as my main game manager )

game.js:

    //START
    pc.script.create('game', function (app) {
        // Creates a new Game instance
        var Game = function (entity) {
            this.entity = entity;
        };
        //get Asset by ID CSS style.css
        // no idea if i need ',", or none of these quote things for below? it is asset id of front.html which is below in next file
        var assetHTML = app.assets.get('3851951');
        
        Game.prototype = {
            // Called once after all resources are loaded and before the first update
            initialize: function () {
            // make sure HTML asset loads
               app.assets.load(assetHTML);
            },
            // Called every frame, dt is time in seconds since last update
            update: function (dt) {
                            
            }
        };
        return Game;
    });
    //END game.js

Then the html stuff (skipping css for now):

    //begin front.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="form-main">
      <div id="form-div">
        <form class="form" id="form1">
          
          <p class="name">
            <input name="name" type="text" class="blah3" placeholder="Name" id="name" />
          </p>
          
          <p class="email">
            <input name="email" type="text" class="blah2" id="email" placeholder="Email" />
          </p>
          
          <p class="text">
            <textarea name="text" class="blah" id="comment" placeholder="Comment"></textarea>
          </p>
          
          
          <div class="submit">
            <input type="submit" value="SEND" id="button-blue"/>
            <div class="ease"></div>
          </div>
        </form>
      </div>
        
    </body>
    </html>
    //end front.html

Also how can I display needed stuff with the fontrenderer.js, I can log with it and display it now but not sure how it ties in with .css and so forth.

Thanks in advance!
-SubV

dave · March 24, 2016, 9:47am

A few things to mention here:

Asset references

The app.assets.get() function takes an integer asset id argument [docs]. So you should put quotes around it.

In fact, I would never use a raw asset id in my code. It is pretty fragile (magic numbers in code are usually bad). Instead, define a script attribute at the top of the script and add the attach the asset in the editor.

For example:

pc.script.attribute("htmlAssetId', 'asset', null, {type: 'html', max: 1});

Loading Assets

Call app.assets.load is fine, but usually you don’t need to do this. If your HTML asset is marked as preload in the editor, you are guaranteed to have the asset loaded before your initialize and update methods.

HTML Assets

You can, of course, use any HTML content in your assets you require. However, if your plan is to overlay the HTML on your PlayCanvas app. Then you don’t need the full <html>, <body> stuff. Your playcanvas app will already be inside a complete HTML page, so you only need to create fragments that you insert into your page.

e.g.

<div id="form-main">
  <div id="form-div">
    <form class="form" id="form1">
      <p class="name">
        <input name="name" type="text" class="blah3" placeholder="Name" id="name" />
      </p>
      <p class="email">
        <input name="email" type="text" class="blah2" id="email" placeholder="Email" />
      </p>
      <p class="text">
        <textarea name="text" class="blah" id="comment" placeholder="Comment"></textarea>
      </p>
      <div class="submit">
        <input type="submit" value="SEND" id="button-blue"/>
        <div class="ease"></div>
      </div>
    </div>
  </form>
</div>

Then you can insert into the existing page like this:

var div = document.createElement('div');
div.innerHTML = asset.resource || '';
document.body.appendChild(div);

Font Renderer

I assume you’re talking about our font rendering library? This is completely separate to HTML and CSS and doesn’t interact with them in anyway. The font library renders bitmap fonts into WebGL.

subvertio · March 24, 2016, 8:07pm

gotcha I think I am starting to get this now. Good explanation. Thanks!

subvertio · March 25, 2016, 1:01am

can’t get any HTML to display still…pardon me for being so dense

ok…not sure how below:

…connects to this:
(this stuff below obviously goes in initialize function)

var div = document.createElement('div');
div.innerHTML = asset.resource || '';
document.body.appendChild(div);

…in other words how do I reference ‘htmlAssetId’ OR ‘asset’ after its dragged and dropped in editor?
I’ve tried

(name of html file).resource.creatEle ...
htmlAssetId.resource.creatEle ...
asset.resource.creatEle ...

so I declared the get thing:
var asset = app.assets.get(this.html);

without above I get Uncaught ReferenceError: asset is not defined
with it nothing displays…

so no html is displaying, here is what my game.js looks like:

//start game.js
pc.script.attribute('html', 'asset', null, {type: 'html', max: 1});
pc.script.create('game', function (app) {
    // Creates a new Game instance
    var Game = function (entity) {
        this.entity = entity;

    
    };
    //get Asset by ID CSS style.css
  
 
    Game.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
      // make sure HTML asset loads
      var asset = app.assets.get(this.html);
      var div = document.createElement('div'); 
      div.innerHTML = asset.resource || '';
      document.body.appendChild(div);     
         },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
     
        }
    };
    return Game;
});
//END game.js

and the html stuff, which I dragged and dropped in editor:

//START formTest.html

    > <div id="divTest1">
    >   <div id="divTest2">
    >     <form class="form" id="form1">
    >       <p class="name">
    >         <input name="name" type="text" class="blah3" placeholder="Name" id="name" />
    >       </p>
    >       <p class="email">
    >         <input name="email" type="text" class="blah2" id="email" placeholder="Email" />
    >       </p>
    >       <p class="text">
    >         <textarea name="text" class="blah" id="comment" placeholder="Comment"></textarea>
    >       </p>
    >       <div class="submit">
    >         <input type="submit" value="SEND" id="button-blue"/>
    >         <div class="ease"></div>
    >       </div>
    >     </div>
    >   </form>
    > </div>

//END formTest.html

… do I have to add .css also in order for everything to show, or will the naked html stuff just show?

build here with no form showing:

Thanks!

dave · March 25, 2016, 3:27pm

The script attribute defines a property: htmlAssetId which is exposed in the editor. If you assign an asset to this property in the editor. In your initialize method the value of this.htmlAssetId will be the ID of that asset.

You can then use this asset id to get the asset object from the asset registry:

var asset = app.assets.get(this.htmlAssetId);

Once you have the asset (assuming it is loaded, you can just leave preload enabled in the editor). Then you can use the asset.resource field. This is the actual object that the asset has loaded. In the case of an HTML asset it is a string with all the text data from the HTML file.

so div.innerHTML = asset.resource is assigning the contents of the HTML file to into the div element.

Adding HTML into the page is not enough though as it will appear underneath the canvas. (You will be able to see the html in the Chrome Inspector though).

So you’ll need to add some CSS to make it visible.

In your case something like this should work:

#divTest1 {
  position: absolute;
  left: 10px;
  top: 10px;
};

You also need to add the CSS to the page like this:

var asset = app.assets.get(this.cssAssetId);
// create element
var style = pc.createStyle(asset.resource || '');
document.head.appendChild(style);

In this case I’ve used a similar variable this.css.AssetId to get the ID of the CSS asset that you will also need.

max · March 25, 2016, 4:39pm

Check out this project that creates element and style using assets, and has implementation of live reload when something is changed in editor:
https://playcanvas.com/project/354600/overview/htmlcss--live-updates