
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
376 lines
13 KiB
HTML
376 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/loaders/BitmapFontLoader.js - pixi.js</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
|
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.4.3</em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
|
|
|
|
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
|
|
|
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
|
|
|
|
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
|
|
|
|
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
|
|
|
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
|
|
|
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
|
|
|
|
<li><a href="../classes/Spine.html">Spine</a></li>
|
|
|
|
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
|
|
|
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
|
|
|
<li><a href="../classes/Stage.html">Stage</a></li>
|
|
|
|
<li><a href="../classes/Text.html">Text</a></li>
|
|
|
|
<li><a href="../classes/Texture.html">Texture</a></li>
|
|
|
|
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
|
|
|
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/pixi/loaders/BitmapFontLoader.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
*/
|
|
|
|
/**
|
|
* The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
|
|
* To generate the data you can use http://www.angelcode.com/products/bmfont/
|
|
* This loader will also load the image file as the data.
|
|
* When loaded this class will dispatch a 'loaded' event
|
|
*
|
|
* @class BitmapFontLoader
|
|
* @uses EventTarget
|
|
* @constructor
|
|
* @param url {String} The url of the sprite sheet JSON file
|
|
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
|
*/
|
|
PIXI.BitmapFontLoader = function(url, crossorigin)
|
|
{
|
|
/*
|
|
* i use texture packer to load the assets..
|
|
* http://www.codeandweb.com/texturepacker
|
|
* make sure to set the format as 'JSON'
|
|
*/
|
|
PIXI.EventTarget.call(this);
|
|
|
|
/**
|
|
* The url of the bitmap font data
|
|
*
|
|
* @property url
|
|
* @type String
|
|
*/
|
|
this.url = url;
|
|
|
|
/**
|
|
* Whether the requests should be treated as cross origin
|
|
*
|
|
* @property crossorigin
|
|
* @type Boolean
|
|
*/
|
|
this.crossorigin = crossorigin;
|
|
|
|
/**
|
|
* [read-only] The base url of the bitmap font data
|
|
*
|
|
* @property baseUrl
|
|
* @type String
|
|
* @readOnly
|
|
*/
|
|
this.baseUrl = url.replace(/[^\/]*$/, '');
|
|
|
|
/**
|
|
* [read-only] The texture of the bitmap font
|
|
*
|
|
* @property baseUrl
|
|
* @type String
|
|
*/
|
|
this.texture = null;
|
|
};
|
|
|
|
// constructor
|
|
PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader;
|
|
|
|
/**
|
|
* Loads the XML font data
|
|
*
|
|
* @method load
|
|
*/
|
|
PIXI.BitmapFontLoader.prototype.load = function()
|
|
{
|
|
this.ajaxRequest = new XMLHttpRequest();
|
|
var scope = this;
|
|
this.ajaxRequest.onreadystatechange = function()
|
|
{
|
|
scope.onXMLLoaded();
|
|
};
|
|
|
|
this.ajaxRequest.open('GET', this.url, true);
|
|
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml');
|
|
this.ajaxRequest.send(null);
|
|
};
|
|
|
|
/**
|
|
* Invoked when XML file is loaded, parses the data
|
|
*
|
|
* @method onXMLLoaded
|
|
* @private
|
|
*/
|
|
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
|
{
|
|
if (this.ajaxRequest.readyState === 4)
|
|
{
|
|
if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1)
|
|
{
|
|
var responseXML = this.ajaxRequest.responseXML;
|
|
if(!responseXML || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS) {
|
|
if(typeof(window.DOMParser) === 'function') {
|
|
var domparser = new DOMParser();
|
|
responseXML = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');
|
|
} else {
|
|
var div = document.createElement('div');
|
|
div.innerHTML = this.ajaxRequest.responseText;
|
|
responseXML = div;
|
|
}
|
|
}
|
|
|
|
var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file');
|
|
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
|
this.texture = image.texture.baseTexture;
|
|
|
|
var data = {};
|
|
var info = responseXML.getElementsByTagName('info')[0];
|
|
var common = responseXML.getElementsByTagName('common')[0];
|
|
data.font = info.getAttribute('face');
|
|
data.size = parseInt(info.getAttribute('size'), 10);
|
|
data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
|
|
data.chars = {};
|
|
|
|
//parse letters
|
|
var letters = responseXML.getElementsByTagName('char');
|
|
|
|
for (var i = 0; i < letters.length; i++)
|
|
{
|
|
var charCode = parseInt(letters[i].getAttribute('id'), 10);
|
|
|
|
var textureRect = new PIXI.Rectangle(
|
|
parseInt(letters[i].getAttribute('x'), 10),
|
|
parseInt(letters[i].getAttribute('y'), 10),
|
|
parseInt(letters[i].getAttribute('width'), 10),
|
|
parseInt(letters[i].getAttribute('height'), 10)
|
|
);
|
|
|
|
data.chars[charCode] = {
|
|
xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
|
|
yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
|
|
xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
|
|
kerning: {},
|
|
texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
|
|
|
|
};
|
|
}
|
|
|
|
//parse kernings
|
|
var kernings = responseXML.getElementsByTagName('kerning');
|
|
for (i = 0; i < kernings.length; i++)
|
|
{
|
|
var first = parseInt(kernings[i].getAttribute('first'), 10);
|
|
var second = parseInt(kernings[i].getAttribute('second'), 10);
|
|
var amount = parseInt(kernings[i].getAttribute('amount'), 10);
|
|
|
|
data.chars[second].kerning[first] = amount;
|
|
|
|
}
|
|
|
|
PIXI.BitmapText.fonts[data.font] = data;
|
|
|
|
var scope = this;
|
|
image.addEventListener('loaded', function() {
|
|
scope.onLoaded();
|
|
});
|
|
image.load();
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Invoked when all files are loaded (xml/fnt and texture)
|
|
*
|
|
* @method onLoaded
|
|
* @private
|
|
*/
|
|
PIXI.BitmapFontLoader.prototype.onLoaded = function()
|
|
{
|
|
this.dispatchEvent({type: 'loaded', content: this});
|
|
};
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|