examples/BitmapText.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>BitmapText - Hilo Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
    <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
</head>
<body onload="init();">
    <div id="header">
        <h1>BitmapText</h1>
        <p>BitmapText类提供使用位图文本的功能。当前仅支持单行文本。</p>
    </div>
    <div id="game-container"></div>
    <script type="text/javascript" src="js/demo.js"></script>
    <script type="text/javascript">
        function init(){
            var BitmapText = Hilo.BitmapText;
            var Stage = Hilo.Stage;
            var Container = Hilo.Container;
            var Ticker = Hilo.Ticker;

            //init stage
            var stage = new Stage({
                renderType:renderType,
                container: gameContainer,
                width: stageWidth,
                height: stageHeight
            });

            //start stage ticker
            var ticker = new Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            var container = new Container({
                x:winWidth * .5,
                y:0,
                background:"#aaa",
                width:400,
                height:400
            }).addTo(stage);

            var textImage = new Image();
            textImage.onload = function(){
                var bmp = new BitmapText({
                    glyphs:BitmapText.createGlyphs("0123456789 ", textImage),
                    y:0,
                    x:0,
                    textAlign:"center",
                    letterSpacing:10
                }).setText("967542 2").addTo(container);
            };
            textImage.src = "./images/num.png";

        }
    </script>
</body>
</html>