Ionic 整合 pixi.js

最近做了个app,上线google play不大顺利,说是有假冒行为,然后改了下icon和名字以及描述,但是没啥信息去上,于是暂时放下搞点别的。

因为近期看到个比较有趣的绘图创意,

于是想通过ionic整合pixi来实现,

整合途径来自这里:

Integrate pixijs - typescript in Ionic 2 with npm

为啥是pixi呢?因为pixi目前来讲是地球上效率最好的js 2d渲染框架。

基于pixi的游戏框架phaser更是霸气十足。

以下是在ionic中使用pixi的步骤:

1. 新建ionic项目

2. 进入项目运行npm install --save pixi.js:添加pixi包

3. 运行npm install --save @types/pixi.js:添加typescript包

就这样pixi就在你的项目中可以使用了。

到任意一个page里面,加入一些代码以确保pixi是否可以正常运行,ts文件中:

import { Component,ViewChild,ElementRef } from ‘@angular/core‘;
import { NavController } from ‘ionic-angular‘;
import * as PIXI from ‘pixi.js‘;

@Component({
  selector: ‘page-home‘,
  templateUrl: ‘home.html‘
})
export class HomePage {
  @ViewChild(‘content‘) content:ElementRef;
  constructor(public navCtrl: NavController) {
    console.log(window.innerWidth,window.innerHeight);
  }

  ionViewDidLoad(){
    var type = "WEBGL";
    if(!PIXI.utils.isWebGLSupported){
      type = "canvas";
    }
    PIXI.utils.sayHello(type);

    var app = new PIXI.Application(window.innerWidth, window.innerHeight,{backgroundColor:0x1099bb});
    this.content.nativeElement.appendChild(app.view);

    let bg = new PIXI.Graphics();
    bg.beginFill(0xcccccc,0.6);
    bg.drawRect(0,0,window.innerWidth, window.innerHeight);
    bg.endFill();

    bg.interactive = true;
    app.stage.addChild(bg);
    bg.on(‘pointerdown‘,onClick);
    bg.on(‘pointermove‘,onMove);
    function onClick(evt){
      console.log(‘on touched...‘,evt);
    }
    function onMove(evt){
      var pos = evt.data.getLocalPosition(this.parent);
      bg.beginFill(Math.random()*0xffffff,1);
      bg.drawCircle(pos.x, pos.y,5);
      bg.endFill();
      console.log(‘on move...‘);
    }
  }
}

模板文件.html中修改为如下:

<ion-content>
  <div #content style="width:100%" ></div>
</ion-content>

#content 可以让它在ts中以ViewChild方式找到。

这里是一个简单的拖动绘制随机颜色圆的demo。

效果图如下:

时间: 2024-10-29 00:25:18

Ionic 整合 pixi.js的相关文章

利用pixi.js制作精灵动画

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊. 关于实现精灵动画的方式有很多种,我自己实践过的主要有三种: 1: 把动作分解成一系列连续的编号的图片,如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定时器不断的去更换图片地址. 2: 把动作按照一定的间距排列在一张图片上,利用css3的动画帧,做出动画

HTML5游戏开发引擎Pixi.js新手入门讲解

在线演示 本地下载 ?这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) <scripttype="text/javascript"src="http://cdn.gbtags.com/pixi.js/1.6.1/pixi.js"></script> 引擎使用: .... .... 阅读原文:HTML5游戏开发引擎P

变态版大鱼吃小鱼-基于pixi.js 2D游戏引擎

之前用CSS3画了一条??,那还是一年前的事情了,这次我用一天的时间去研究了一下pixi.js,一个基于webgl的2D游戏引擎,然后用它做了一个demo出来,变态版大鱼吃小鱼. 试玩地址:变态版大鱼吃小鱼 这是一个h5游戏排名,我最看好pixi,刚开始也试过create.js,不过它不支持webgl,这是一个硬伤,然后又了解了一下Phaser,基于pixi开发的,功能肯定比pixi强大,不过我觉得它太重了,好像是500多K,不适合做小游戏,而pixi只有90K,并且支持webgl,所以就选它了

【Pixi.js从零开始】开始使用Pixi游戏引擎

本示例简单演示如何创建一个Pixi项目,以及制作一个滚动场景. 首先下载源码:https://github.com/GoodBoyDigital/pixi.js 1.配置canvas: <head lang="en"> <meta charset="UTF-8"> <title>MyPixi</title> <style> body { background-color: #000000; } canvas

让hammer完美支持Pixi.js - 2D webG库

由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事件的绑定由第三方控制即可 hammer是负责接收事件消息即可. 传递一个pixi引用,即每个canvas内部的精灵对象的引用,因为要给每一个对象绑定事件 hammer内部: hammer的addEventListeners事件绑定由第三方绑定替换 替换 注意一个的问题就是: hammer给的ev是经

pixi.js tools

Awesome pixi.js tools A list of useful libs/resources/tools for renowned html5 rendering framework Websites and forums github organization. -pixi相关的git github main repository - pixi git pixijs.com – 官网. docs – 官方文档 examples – 官方例子 html5gamedev forum

pixi.js 总结

1:pixi.js的优点 代码简单,性能高效,扩展性强. PixiJS的优势在于速度. 在2D渲染方面,PixiJS是最快的.(官网上说的) PixiJS有着"简单"的代码, 友好的API, 让PixiJS能够在您专注于创造令人难以置信的多平台体验 PixiJS易扩展.通过装一些插件,可以更方便的实现一些功能. 2 核心 Sprite Sprite对象是渲染到屏幕的所有纹理对象的基础 原文地址:https://www.cnblogs.com/honghong87/p/9942768.h

如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?

如何在PIXI.js里面使用json文件来管理瓦片集(tileset)? PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json文件)对该瓦片集进行管理.我认为这主要是出于对网络传输速度的考量,因为加载一张图片肯定比加载多张图片效率更高. 那么怎么将素材汇总成tileset呢?通常我们使用的是texturepacker,一个高级功能收费的软件.所谓的高级功能反正我是用不上. 这个软件帮我们将素材拼接,然后输出一张tilese

ssm 整合中js,css 文件无法引入

问题:ssm 整合中第三方 js,css 文件无法引入 检查:ssm 整合配置完好 无拦截器拦截 spring mvc  静态资源已配置 编译时可以直接跳转到js  css 问题发现 js  css 文件放在WEB-INF 下,导致无法引入 解决 js  css 文件放在webapp 下,可以引入 原文地址:https://www.cnblogs.com/jsbk/p/9461374.html