How to use the ol-ext/util/ext function in ol-ext

this.media = options.media;

  if (options.loop) this.setLoop(options.loop);

  // Dispatch media event as ol3 event
  this.media.addEventListener( 'canplaythrough', function() {
    self.dispatchEvent({ type:'ready' });
  }, false);
  for (var event in { load:1, play:1, pause:1, ended:1 }) {
    this.media.addEventListener( event, function(e){
      self.dispatchEvent({ type:e.type });
    }), false;
  }
};
ol_ext_inherits (ol_media_Media, ol_Object);

/** Play a media
*	@param {number|undefined} start start time (in seconds) of the audio playback, default start where it has paused.
*/
ol_media_Media.prototype.play = function(start) {
  if (start !== undefined) {
    this.media.pause();
    this.media.currentTime = start;
  }
  var playPromise = this.media.play();
  // If supported check if the sound play automatically or not
  if (playPromise !== undefined) {
    playPromise.then(function() {
      // Automatic playback started!
    }).catch(function() {
      // Automatic playback failed.

// loadTilesWhileAnimating: true,
    pixelRatio: pratio,
    controls: [],
    interactions: [],
    layers: options.layers
  });
  this.offmap.set("pixelRatio", pratio);
  this.setMap(options.map);

  // Canvas
  this.image = this.offmap.getViewport().children[0];
  
  this.canvas = document.createElement('canvas');

};
ol_ext_inherits (ol_Backscreen, ol_Object);

/**	Set the game map
*/
ol_Backscreen.prototype.setMap = function(map) {
  if (this.map) {
    this.map.getTargetElement().removeChild(this.element);
    this.offmap.setView (null);
  }
  if (this._listener) ol_Observable.unByKey(this._listener);
  this._listener = null;

  this.map = map;
  if (this.map) {
    this.map.getTargetElement().appendChild(this.element);
    if (!this.map.getViewport().style["z-index"]) this.map.getViewport().style["z-index"] = 1;
    this._listener = this.map.on("change:size", this.changeSize_.bind(this));

*/
var ol_Collision = function (options) {	
  ol_Object.call(this);

  this.game = options.game;
  this.resample = options.resample || 1;
  
  // Collision canvas
  this.canvas = document.createElement('canvas');
  this.canvas.width = this.canvas.height = 32;

  // 
  this.sprites = options.sprites || [];
  this.targets = options.targets || [];
};
ol_ext_inherits (ol_Collision, ol_Object);

/** Get image used to test the collision
*/
ol_Collision.prototype.getImage = function () {
  return this.canvas;
};

/** Test if a sprite goes out of the current extent
* @param {ol.Sprite} s1 the sprite to test
* @return {N|S|E|W|false} the direction it goes out or false if inside the current extent
*/
ol_Collision.prototype.overflow = function (s1) {
  if (!this.game.frameState) return false;
  var e = this.game.frameState.extent;
  var es = s1.getBBox(this.game.frameState.viewState.resolution);
  if (e[0]>es[0]) return "E";

* @require jQuery
 * @fires ready, load, play, pause, ended
 * 
 * @param {*} options
 *  @param {string} options.source the source file
 *  @param {boolean} options.lop the sound loops
 */
var ol_media_Audio = function (options) {
  options = options || {};

  var a = new Audio(options.source);
  a.load();
  // Create HTML5 audio
  ol_media_Media.call(this, { media: a, loop: options.loop });
};
ol_ext_inherits (ol_media_Audio, ol_media_Media);

/** Use audio context
* /
ol_media_Audio.prototype.getSource = function(b) {
  var AudioCtx = window.AudioContext || window.webkitAudioContext;
  var context = new AudioCtx;
  var source = context.createMediaElementSource(this.media.get(0));
  source.connect(context.destination);
  return source;
};
*/

export default ol_media_Audio

else {
    img = this.img_ = new Image();
    img.crossOrigin = options.crossOrigin || "anonymous";
    img.src = options.src;
  }

  if (options.states) this.states = options.states;

  if (img.width) this.drawImage_();
  else img.onload = function() {
    self.drawImage_();
    // Force change
    //if (self.onload_) self.onload_();
  };
};
ol_ext_inherits (ol_style_Sprite, ol_style_Icon);

ol_style_Sprite.prototype.drawImage_ = function() {
  var ctx = this.getImage().getContext("2d");
  ctx.clearRect(0,0,this.size, this.size);
  ctx.drawImage(this.img_, this.offset[0], this.offset[1], this.size, this.size, 0, 0, this.size, this.size);
};

/** Universal LPC Spritesheet Character
* http://lpc.opengameart.org/
* https://github.com/jrconway3/Universal-LPC-spritesheet
* https://github.com/Gaurav0/Universal-LPC-Spritesheet-Character-Generator
*/
ol_style_Sprite.prototype.states = {
  idle: { line: 2, length: 1 },
  encant_N: { line: 0, length: 7 },
  encant_W: { line: 1, length: 7 },

// loadTilesWhileAnimating: true,
    pixelRatio: pratio,
    controls: [],
    interactions: [],
    layers: options.layers
  });
  this.offmap.set("pixelRatio", pratio);
  this.setMap(options.map);

  // Resample to test collision
  this.resample = options.resample || 1;

  this.canvas = document.createElement('canvas');
  this.canvas.width = this.canvas.height = 32;
};
ol_ext_inherits (ol_Offscreen, ol_Object);

/**	Set the game map
*/
ol_Offscreen.prototype.setMap = function(map) {
  if (this.map) {
    this.map.getViewport().removeChild(this.element);
    this.offmap.setView (null);
  }
  if (this._listener) ol_Observable.unByKey(this._listener);
  this._listener = null;

  this.map = map;
  if (this.map) {
    this.map.getViewport().appendChild(this.element);
    this._listener = this.map.on("change:size", this.changeSize_.bind(this));
    this.offmap.setSize (this.map.getSize());

* @constructor ol.Graph
 * @extends {ol.Object}
 * @param {*} options
 *  @param {ol.source.Vector} options.source the vector source must be configured with useSpatialIndex set to true.
 */
var ol_graph_Vector = function (options){
  options = options || {};
  
  ol_Object.call (this, options);

  this.edges = options.source || new ol_source_Vector({ useSpatialIndex: true });
  this.edges.on('changefeature', this.changeEdge.bind(this));
  this.edges.on('addfeature', this.addEdge.bind(this));
  this.edges.on('removefeature', this.removeEdge.bind(this));
}
ol_ext_inherits (ol_graph_Vector, ol_Object);

/** Get the source of the graph
 * @return {ol.source.Vector}
 */
ol_graph_Vector.prototype.getSource = function() {
  return this.edges;
};

/** Triggered when a feature is updated.
*/
ol_graph_Vector.prototype.changeEdge = function(/*e*/) {
};

/** Triggered when a feature is added.
*/
ol_graph_Vector.prototype.addEdge = function(/*e*/) {

var dispersion = options.dispersion||(this.radius/2);
  this.particules = [{ tmin:0, dt:1, radius:this.radius, x:0, y:0 }];
  var length = options.length || 12;

  for (var i=0; i

* @extends {ol.source.ImageCanvas}
* @param {*} options 
* @todo 
*/
var ol_source_HexMap = function(options){
  options = options || {};

  this.canvas = document.createElement('canvas');
  this.context = this.canvas.getContext('2d');
  
  this.grid = options.hexGrid;
  this.grid.on('change', this.changed.bind(this));

  ol_source_ImageCanvas.call (this, { canvasFunction: this.drawHex });	
};
ol_ext_inherits (ol_source_HexMap, ol_source_ImageCanvas);

/** draw an hexagon
* @param {Canvas context2D} ctx
* @param {ol.pixel} 
* @param {Number} size (in pixel)
* @param {bool} fill to fill the polygon
* @param {Number} min, default 0
* @param {Number} max, default 6
* @param {Number} dl offset, default 0
*/
ol_source_HexMap.prototype.drawHexagon = function (ctx, p, size, fill, min, max, dl) {
  var p0;
  ctx.beginPath();
  min = min || 0;
  max = max || 6;
  dl = dl || 0;

offsetY: -(options.size||64)/2*options.scale,
      textBaseline: 'alphabetic',
      stroke: new ol_style_Stroke({ color: [255,255,255,0.5], width:5 }),
      fill: new ol_style_Fill({ color: "#333" })
    })
  });
  this.setStyle([ this.style ]);
  this.image = this.style.getImage();

  this.frate = options.frameRate || 100;
  this.currentState = "idle";
  this.startState = 0;
  this.speed = 0;
  this.dir = [0,0];
};
ol_ext_inherits (ol_Sprite, ol_Feature);

/** Set the name of the sprite (to be display on top of his head)
* @param {string} name
*/
ol_Sprite.prototype.setName = function (name) {
  this.style.getText().setText(name);
  this.changed()
};

/** Move the sprite to the coordinates
* @param {ol.coordinate} c coordinate of the sprite
*/
ol_Sprite.prototype.setCoordinate = function (c) {
  this.coord.setCoordinates(c);
};