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 section – pixi论坛

Scene, textures, sprites, other augmentations

pixi-richtext – SDF text plugin.

pixi-display – allows to change rendering order of pixi-v4 containers without changing the stage, z-index for the win.

pixi-picture – top-quality render for sprites, removes any artifacts that are present in basic sprite.

pixi-tilemap – tilemaps with ease.

pixi-tiled – import tile maps from Tiled Editor.

pixi-sdf-text – most efficient text rendering approach for webgl now in pixi.

pixi-multistyle-text – adds a MultiStyleText object inside pixi.js to easily create text using different styles.

pixicam – 2d camera for pixi.

pixi-super-atlas – create image atlas in your runtime, mipmaps supported.

pixi-heaven – runtime atlas, double tint for sprites, fastest glsl-calculated sprite masks.

pixi-viewport – a highly configurable viewport/2D camera designed to work with pixi.js.

canvas-latex – render latex formulas in pixi.js.

Essential

ee3-timer – addition to ee3 and works with PIXI >4.

pixi-timer – manage event timers easily.

Debug

pixi-inspector – awesome plugin for chrome, visually inspect and modify nodes in your scene graph.

fconsole – very powerful debugging tools, requires a custom setup in your project.

Animate

pixi-spine – port of official spine-ts runtime to pixi.

pixi-action – animations in Cocos2d-x style.

pixi-live2d – plugin for japanese animation tool live2d.

pixi-dragonbones – plugin for royalty-free animation tool dragonbones.

pixi-tween – tweens!

pixi-animate – plugin for Pixi.js which provides a runtime for content export using PixiAnimate Extension.

gsap-pixi – plugin for popular gsap animation library.

Filters, shaders, vfx

PixiGlitch – various glitch effects .

pixi-filters – some official filters.

pixi-extra-filters – even more official filters, some of these can be outdated.

GUI and interaction

EZGUI – bunch of crafted UI elements to use in your app.

gown.js – UI system for pixi.js inspired by feathers-ui.

pixi-keyboard – powerful keyboard handling for pixi.

text-input – text input add-on.

dat.gui – DOM-based GUI can be used as dev tools on top of pixi.

Audio

pixi-sound – official WebAudio API playback without any Flash shims or HTML Audio fallback.

pixi-audio – another great audio plugin with native pixi structure.

sound.js – a micro-library to load, play and generate sound effects and music for games and interactive applications.

PIXI.draggable – "easiest way to get drag & drop done in PIXI.js!"

Particles

pixi-particles – official particles plugin.

pixi-particles-editor – see online demo.

Game Engines

chocolatier – ClojureScript game/engine using Pixi.js for rendering.

qiciengine(abandoned) – rich unity-like game creation tool.

hexi – minimalistic game engine with pixi rendering.

pixi-engine - Provides a minimal engine-like structure for developing games with PixiJS

Integrations

pixi-haxe – externs for haxe compiler.

react-pixi – integration for facebook‘s framework.

pixi.scala.js – externs for scala.js compiler.

robotlegs-pixi – RobotlegsJS framework integration with PixiJS.

react-pixi-fiber – integration with react.js framework.

Books & Learning

The Book of Shaders – ? comprehensive book about glsl with examples in javascript and online sandbox.

WebGL How it Works – ? if you have zero computer graphics knowledge, the set of articles helps to get your hands on webgl api and fundamentals.

kittenattack – check that person github repositories, most of them are incredibly suited for learning.

learningPixi – definitive guide to game development with pixi.

Forks

gameofbombs – custom pixi 3.0 with static transforms, 2d camera and 2.5d transforms. Used in production on gameofbombs.com.

Tools

TexturePacker – sprite sheet packer for PixiJS with graphical user interface and command line. Optimizes sprite sheets for best render quality and low memory usage.

spritesheet.js – is command-line spritesheet (a.k.a. Texture Atlas) generator written in node.js. Support export to pixi.js

SpriteIlluminator – normal map generator for sprites. Allows creating awesome dynamic light effects.

Games

polyball – fast, multiplayer, physics-driven tennis in two dimensions..

bemuse – web-based online rhythm action game. Based on HTML5 technologies, React, Redux and Pixi.js.

breakout – breakout game made in JavaScript and Pixi.js.

duckhunt – DuckHunt ported to JS and HTML5.

doom-lgs – a multiplayer Node.js light gun shooter inspired on Doom.

rockvomit – ragdoll rhythm game.

railways – railways game.

tetris – just a tetris.

wbwwb-ko

LegendOfMountainSea – 4X sandbox game with legend of Mountain and Sea Classics.

原文地址:https://www.cnblogs.com/honghong87/p/9781193.html

时间: 2024-10-18 15:02:57

pixi.js tools的相关文章

利用pixi.js制作精灵动画

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

NTVS Node.js Tools for Visual Studio 安装各种奇葩问题汇总。

首先是正确的安装方式.以vs 2012为例子,操作系统windows server 2012 R2,建议用虚拟机搞起. 1.安装vs 2012 2.升级2012 到 update 4 注意:一定要升级,不然安装1.0 Alpha后,在创建项目的时候会提示“未将对象引用到实例”.安装1.0 Beta后F5无法debug调试.总之升级就是了不要废话. 3.安装node.msi 也就是node windows 安装包 http://nodejs.org/download/ 选择对应的操作系统下载,安装

Node.js tools for visual studio 在vs中使用Node.js

简单介绍 PTVS开发团队又开发出一款可以在VS里编写Node.js应用程序的插件——NTVS(Node.js Tools for Visual Studio),开发者可以在VS里轻松开发Node.js应用. NTVS是一款开源工具,遵循Apache开源许可,由微软和社区维护.适用于Node.js 0.10.20版或更高的版本上.NTVS具有可编辑.智能提示.分析.NPM.调式(本地和远程)等功能,并且还可以发布在Azure网站和Cloud服务上. Node.js 可在32位和64位架构上运行,

Node.js Tools 1.2 for Visual Studio 2015 released

https://blogs.msdn.microsoft.com/visualstudio/2016/07/28/node-js-tools-1-2-visual-studio-2015/ What time is it?! Time to announce that our next stable release of Node.js Tools 1.2 for Visual Studio (NTVS) is available for download! NTVS 1.2 supports

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

Ionic 整合 pixi.js

最近做了个app,上线google play不大顺利,说是有假冒行为,然后改了下icon和名字以及描述,但是没啥信息去上,于是暂时放下搞点别的. 因为近期看到个比较有趣的绘图创意, 于是想通过ionic整合pixi来实现, 整合途径来自这里: Integrate pixijs - typescript in Ionic 2 with npm 为啥是pixi呢?因为pixi目前来讲是地球上效率最好的js 2d渲染框架. 基于pixi的游戏框架phaser更是霸气十足. 以下是在ionic中使用pi

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

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