前端游戏引擎之PIXIJS小demo

前言

Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。 Pixi渲染器可以使开发者享受到硬件加速，但并不需要了解WebGL。

准备工作

1. 创建一个vue项目，这里就不做过多讲述，如果不了解请参考https://www.cnblogs.com/xuchangqi1/p/9561206.html

2. 编辑App.vue文件，代码如下

<template>
  <div id="app">
    <div id="pixi" style="z-index:-1;">  </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'

export default {
  name: 'App',
  data(){
    return{
        v_appWi:0,
        v_appHi: 0
    };
  },
  components: {
  },
  methods: {
    init_pixi() {
      let app = new PIXI.Application(this.v_appWi, this.v_appWi, {
        backgroundColor: 0x1099bb
      });
      document.getElementById("pixi").appendChild(app.view);
      // create a new Sprite from an image path
      var bunny = PIXI.Sprite.fromImage(logo);

      // center the sprite's anchor point
      bunny.anchor.set(0.5);

      // move the sprite to the center of the screen
      bunny.x = app.screen.width / 2;
      bunny.y = app.screen.height / 2;

      app.stage.addChild(bunny);

      // Listen for animate update
      app.ticker.add(function(delta) {
        // just for fun, let's rotate mr rabbit a little
        // delta is 1 if running at 100% performance
        // creates frame-independent transformation
        bunny.rotation += 0.1 * delta;
      }); 
    }
  },
  mounted: function() {
   
    if (browser.versions.mobile && !browser.versions.iPad) {
      this.v_appWi = document.getElementById("pixi").offsetWidth;
    } else {
      this.v_appWi = Math.min(600, document.getElementById("pixi").offsetWidth);
    }
    this.init_pixi();
  },
}
</script>

3.编辑index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="//cdn.bootcss.com/pixi.js/4.8.0/pixi.min.js"></script>
    <title>games</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript">

var browser = {
            versions: function() {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {     //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            } (),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

      let type = "WebGL"
      if(!PIXI.utils.isWebGLSupported()){
        type = "canvas"
      }
  
      PIXI.utils.sayHello(type)
    </script>
  </body>
</html>

最后启动项目,会发现图片会一直转动

最后附上一个链接，里面有更多的demo，有兴趣可以去看一下https://pixijs.io/examples/#/spine/pixie.js

8月ECS限量抢，全场ECS 2折起，数量有限，先到先得，抢完为止。https://www.aliyun.com/