Description

Load a resource

Usage

Parameters

  • type {String}

    • images : Loading images.

      images: {
          {foo: "bar.png"}
      }
      

      For use :

      el.drawImage("foo"); // el is an element
      

      It is possible to define a transparent color to make the image with transparentcolor option:

      images: {
          {foo: {path: "bar.png", transparentcolor: "#ff0000"}
      }
      

      You can set the image as a scene transition :

      images: {
          {foo: {path: "bar.png", transition: true}
      }
      
    • sounds : Loading sound. Test if the browser supports the sound. If your browser does not support the format, it will take another file with the same name but with a different extension

      sounds: {
          foo: "bar.mp3"
      }
      

      On Firefox, it will automatically search bar.ogg

      For use :

      canvas.Sound.get("foo").play(); // "canvas" is namespace
      
    • videos : add videos which will be displayed in the canvas :

      videos: {
          foo: "bar.mp4"
      }
      

      To use :

      el.drawImage("foo"); // el is an element
      

      To use video API :

      var video = canvas.Materials.get("foo", "video");
      video.play();
      

      To use the webcam :

      videos: {
          foo: {webcam: {audio: false, video: true}}
      }
      

      To display and manipulate is the same as the single video

    • fonts

      For Internet Explorer, it will take a file with the same name but with the extension .eot

      fonts: {
          foo: "bar.ttf"
      }
      

      For use are in the text:

      el.font = 'normal 40pt foo'; // "el" is an element
      

      For fonts, you can use Web Font Loader

      fonts: {
          google: { families: ["test"] },
          foo: "bar.ttf"
      }
      

      For use are in the text:

      el.font = 'normal 40pt test';
      

      You can find fonts from Google Fonts and other modules (see Web Font Loader Github)

    • data : Loading a JSON file

      data: {
          foo: "bar.json"
      }
      

  • path {Array|Object}

    Paths to resources. * If array : Elements are composed of objects where the key is the identifier and value is the path

        [
            {img1: "path/to/img1.png"},
            {img2: "path/to/im2.png"}
        ]
    
    • If object, the key is the identifier and value is the path :

      {img1: "path/to/img1.png", img2: "path/to/im2.png"}
      

      The value can be an object to give several parameters :

      {img1: {path: "path/to/img1.png", transparentcolor: "#ff0000"}, img2: "path/to/im2.png"}
      

      path is the path and "transparentcolor" the color that will be transparent image

      By default, the order is done alphabetically. But since version 1.3.2, you can choosethe order of loading. Here, the img2 image forced to load first

       {img2: {path: "path/to/img1.png", index: 0}, img1: "path/to/im2.png", index: 1}
      

      So use index to define an order. The smaller will be loaded first. The index starts at 0 (order of an array)

  • onLoad {Function} optional

    (optional) Callback when a resource is loaded

    Two parameters are returned :

    1. {Image|Sound|Video|Font|JSON} The element loaded
    2. {Object} : The information of the resource (path, index, etc.)

  • onFinish {Function} optional

    (optional) Callback when all resources are loaded

Discussion