Home > Developer > Web Develop
This example simply demonstrates how to create a Pixi project and make a scrolling scene.
First download Source: https://github.com/GoodBoyDigital/pixi.js
1. Configure the canvas:
Body {background-color: #000000;} Canvas {background-color: #222222;} </style> <script type= "Text/javascript" src= "Lib/pixi.js-master/bin/pixi.dev.js" ></script>2. Include Pixi.js in the code:
<script src= "Pixi.js-master/bin/pixi.dev.js" ></script>3. Create an initialization method:
<body onload= "Init ();" >4. Initialization method:
<body onload= "init ()" > <div align= "center" > <canvas id= "Game-canvas" width= "Up" height= "384" > </canvas> </div> <script>functioninit () {Console.log ("Init () successfully called."); //first define a stage This. Stage =NewPIXI. Stage (0x66ff99); //create a render to render the stage to the browser This. Renderer =Pixi.autodetectrenderer (512, 384, {view:document.getElementById ("Game-canvas")} ); //Create a vision material varFartexture = PIXI. Texture.fromimage ("Resources/bg-far.png"); //Seamless cycle scrolling, requires the use of Tilingsprite, where the wide height has been written dead, can also be used through fartexture.basetexture.width,fartexture.basetexture.height to obtain dynamic wide This. Far =NewPIXI. Tilingsprite (fartexture,512,256); This. far.tileposition.x = 0; This. FAR.TILEPOSITION.Y = 0; This. Stage.addchild ( This. Far); //Close-up material varMidtexture = PIXI. Texture.fromimage ("Resources/bg-mid.png"); //Close -up sprite, same This. mid =NewPIXI. Tilingsprite (midtexture,512,256); This. mid.position.x = 0; This. MID.POSITION.Y = 128; This. Stage.addchild ( This. mid); //Render Browser Screen This. Renderer.render ( This. Stage); //Animationrequestanimframe (update); } functionUpdate () { This. far.tileposition.x-= 0.128; This. mid.tileposition.x-= 0.64; Renderer.render (stage); //Cyclic scrollingrequestanimframe (update); } </script></body>Project Download: Http://files.cnblogs.com/files/theodore/scrollpixi.rar
"Pixi.js start from scratch" using the Pixi game engine
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
