132 lines
6.5 KiB
HTML
132 lines
6.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<!--<link href=<script src="http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova<script src=" rel=<script src="stylesheet<script src=" type=<script src="text/css<script src=">-->
|
|
<title>pixi.js example 10 Text</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../src/pixi/Pixi.js"></script>
|
|
<script src="../../src/pixi/core/Point.js"></script>
|
|
<script src="../../src/pixi/core/Rectangle.js"></script>
|
|
<script src="../../src/pixi/core/Polygon.js"></script>
|
|
<script src="../../src/pixi/core/Circle.js"></script>
|
|
<script src="../../src/pixi/core/Ellipse.js"></script>
|
|
<script src="../../src/pixi/core/Matrix.js"></script>
|
|
<script src="../../src/pixi/display/DisplayObject.js"></script>
|
|
<script src="../../src/pixi/display/DisplayObjectContainer.js"></script>
|
|
<script src="../../src/pixi/display/Sprite.js"></script>
|
|
<script src="../../src/pixi/display/SpriteBatch.js"></script>
|
|
<script src="../../src/pixi/display/MovieClip.js"></script>
|
|
<script src="../../src/pixi/filters/FilterBlock.js"></script>
|
|
<script src="../../src/pixi/text/Text.js"></script>
|
|
<script src="../../src/pixi/text/BitmapText.js"></script>
|
|
<script src="../../src/pixi/InteractionData.js"></script>
|
|
<script src="../../src/pixi/InteractionManager.js"></script>
|
|
<script src="../../src/pixi/display/Stage.js"></script>
|
|
<script src="../../src/pixi/utils/Utils.js"></script>
|
|
<script src="../../src/pixi/utils/EventTarget.js"></script>
|
|
<script src="../../src/pixi/utils/Detector.js"></script>
|
|
<script src="../../src/pixi/utils/Polyk.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLShaderUtils.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/shaders/PixiShader.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/shaders/PixiFastShader.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/shaders/StripShader.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/shaders/PrimitiveShader.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLGraphics.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLMaskManager.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLShaderManager.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/WebGLFilterManager.js"></script>
|
|
<script src="../../src/pixi/renderers/webgl/utils/FilterTexture.js"></script>
|
|
<script src="../../src/pixi/renderers/canvas/utils/CanvasMaskManager.js"></script>
|
|
<script src="../../src/pixi/renderers/canvas/utils/CanvasTinter.js"></script>
|
|
<script src="../../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
|
|
<script src="../../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
|
|
<script src="../../src/pixi/primitives/Graphics.js"></script>
|
|
<script src="../../src/pixi/extras/Strip.js"></script>
|
|
<script src="../../src/pixi/extras/Rope.js"></script>
|
|
<script src="../../src/pixi/extras/TilingSprite.js"></script>
|
|
<script src="../../src/pixi/extras/Spine.js"></script>
|
|
<script src="../../src/pixi/textures/BaseTexture.js"></script>
|
|
<script src="../../src/pixi/textures/Texture.js"></script>
|
|
<script src="../../src/pixi/textures/RenderTexture.js"></script>
|
|
<script src="../../src/pixi/loaders/AssetLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/JsonLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/AtlasLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/SpriteSheetLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/ImageLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/BitmapFontLoader.js"></script>
|
|
<script src="../../src/pixi/loaders/SpineLoader.js"></script>
|
|
<script src="../../src/pixi/filters/AbstractFilter.js"></script>
|
|
<script src="../../src/pixi/filters/AlphaMaskFilter.js"></script>
|
|
<script src="../../src/pixi/filters/ColorMatrixFilter.js"></script>
|
|
<script src="../../src/pixi/filters/GrayFilter.js"></script>
|
|
<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
|
|
<script src="../../src/pixi/filters/PixelateFilter.js"></script>
|
|
<script src="../../src/pixi/filters/BlurXFilter.js"></script>
|
|
<script src="../../src/pixi/filters/BlurYFilter.js"></script>
|
|
<script src="../../src/pixi/filters/BlurFilter.js"></script>
|
|
<script src="../../src/pixi/filters/InvertFilter.js"></script>
|
|
<script src="../../src/pixi/filters/SepiaFilter.js"></script>
|
|
<script src="../../src/pixi/filters/TwistFilter.js"></script>
|
|
<script src="../../src/pixi/filters/ColorStepFilter.js"></script>
|
|
<script src="../../src/pixi/filters/DotScreenFilter.js"></script>
|
|
<script src="../../src/pixi/filters/CrossHatchFilter.js"></script>
|
|
<script src="../../src/pixi/filters/RGBSplitFilter.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0x66FF99);
|
|
|
|
// create a renderer instance
|
|
var renderer = PIXI.autoDetectRenderer(400, 300);
|
|
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// create a texture from an image path
|
|
var texture = PIXI.Texture.fromImage("bunny.png");
|
|
|
|
// create a new Sprite using the texture
|
|
var bunny = new PIXI.Sprite(texture);
|
|
|
|
// center the sprites anchor point
|
|
bunny.anchor.x = 0.5;
|
|
bunny.anchor.y = 0.5;
|
|
|
|
// move the sprite t the center of the screen
|
|
bunny.position.x = 200;
|
|
bunny.position.y = 150;
|
|
|
|
stage.addChild(bunny);
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// just for fun, let's rotate mr rabbit a little
|
|
bunny.rotation += 0.1;
|
|
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|