Comments (20)
Just last thing: Graphics wasn't that good in v4, it had a shader switch between Graphics and Sprite and it didnt have texturing inside. If you see my old posts that Graphics is horrible - ignore them.
from tilemap.
pixi-tilemap works with v5 :)
from tilemap.
Thankfully, no :) That thing has slow fragment shader, its adaptation of old tojicode's demo to pixi. The demo i already mentioned. TilingSprite also uses mod
operation but only for one tile, that's why I dont recommend to use it unless you know what are you doing.
pixi-tilemap builds static geometry buffer. Graphics does that too. pixi-tilemap doesn't store any objects for tiles, graphics spams them, but its not as heavy as PIXI.Sprite
.
from tilemap.
thanx, I'll experiment with solution based on Graphics
from tilemap.
Here: https://github.com/pixijs/pixi-tilemap/tree/v5
from tilemap.
I had the same issue using it with webpack.
In order to solve it:
- follow pixijs 5 migration guide (the part for 3rd parties plugin with webpack)
- use the branch v5, with npm you could declare the dependency as follow: "pixi-tilemap": "git+https://github.com/pixijs/pixi-tilemap#v5"
- add import statement to the file where you'll use tilemap: import 'pixi-tilemap'
I'm using pixi.js v5.1.2 with pixi-tilemap v1.2.6.. @ivanpopelyshev could you upload it (1.2.6) on npm? could help with new projects dependencies setup..
by the way, the 'exception' was thrown by PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);
this piece doesn't work even now but in v5 branch (b3f1288) a check against its availability was added
from tilemap.
No, i didnt convert it for v5 yet.
v5 has better Graphics implementation, you can just use beginTextureFill and drawRect to get it working with tiles. Its still has lower performance than this plugin but its much better than collection of sprites.
This plugin is basically highly optimized version of Graphics for tiles :)
from tilemap.
As for using it as npm with v4, PIXI has to be global or pixi-tilemap cant hack it. Or pixi-tilemap
has to be included after pixi. I dont use webpack. Its true for all my pixi-plugins.
from tilemap.
also I tried to hack this problem like this
import * as PIXI from 'pixi.js'
(window as any).PIXI = PIXI
but then the problem is
Uncaught TypeError: Cannot read property 'registerPlugin' of undefined
at pixi_tilemap (index.js:41881)
at Object.101 (index.js:41882)
at o (index.js:1)
at index.js:1
at Object.43.../components (index.js:1848)
at o (index.js:1)
at index.js:1
at Object.33.../../systems (index.js:1103)
at o (index.js:1)
at index.js:1
in same line of code PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);
how it should be registered in v5? or this would not work any way?
from tilemap.
you can just use beginTextureFill and drawRect to get it working with tiles
so TilingSprite
is not the best way to go with tile-maps?
from tilemap.
Its shader is half-way to the shader tojicode published for tilemaps, but no, adding "mod" in fragment shader is a bad idea.
Use TilingSprite if you know how it works and you are sure it fits for your background. You cant change tiles inside TilingSprite, it has only one tile.
from tilemap.
found also this https://codepen.io/goodboydigital/pen/vdvEmE. Is this approach similar to what is used in this library?
from tilemap.
The idea is, if you understand that paragraph, you can build tilemap on ANYTHING: Graphics, pixi-tilemap, even sprites.
Maintain a window around the camera, like 2x of it. If camera hits the side, move the window and refill the tilemap.
If you dont understand, do anything, try anything, after several fails you'll get enough experience to understand the algo. I dont provide code of that algo to people because im lazy. ITs just pair of IF's and two FOR's , honestly!
from tilemap.
use the branch v5,
its already in master. I thought i uploaded it as npm 2.0.0.. well, i forgot, gonna upload both v4 and v5.
Done : v4 1.2.6, v5 is 2.0.0
I forgot to upload it before ;) It was ready for weeks
from tilemap.
Great!
My sample works just fine with v2.0.0 from npm, still I need to follow the 3 steps above
from tilemap.
For now, there's a universal way to add any of my plugins in pixijs:
import * as PIXI from 'pixi.js'
window.PIXI = PIXI
import 'pixi-tilemap'; //or require('pixi.js')
And that has to be in one of first files in your imports.
I dont know what to do with it all, because from certain point of view word "import" guarantees for user that everything will be OK, but for lib developer its a huge pain to cover all corner cases. Initialization order problems wont go away just because someone smart declared that "oh, lets just use imports, that word is magic"
from tilemap.
Unfortunately you're right..
I prefer using webpack itself for PIXI import since it allows me to skip the PIXI import part, can see it here (https://github.com/andreabertin/pixijs-v5-examples) its still a work in progress so not so clean yet.
Currently I am playing with pixijs (and plugins) to see how well it comes with my needs, I'll let you know for any issue/bug that will arise
from tilemap.
Hi,
First at all, thank you very much for your work in this project @ivanpopelyshev. It is a great plugin and you've done an amazing work so far.
I'd like to ask if there are plans to migrate this plugin to PIXI v5 any time soon.
If not, would you recommend us to use beginTextureFill
and a couple of for loops in the meanwhile? I'm afraid about performance in low end devices...
Thank you very much in advance!
from tilemap.
Hi @ivanpopelyshev ,
Thank you very much for you quick answer.
I'm having the problems described in this issue trying to integrate pixi-tilemap in my webpack project:
Uncaught ReferenceError: PIXI is not defined
. window.PIXI = PIXI
doesn't seem to do the trick.
I'm using create-react-app (https://github.com/facebook/create-react-app) as a boilerplate and PIXI in some bits of my web. I guess it is probably a problem with my webpack configuration...
from tilemap.
I did not put it in this plugin however this soilution exists in all plugins:
you have to ensure that pixi-tilemap is loaded after PIXI is in window.
import * as PIXI from "pixi.js";
window.PIXI = PIXI;
require("pixi-tilemap")
Alternative: make special webpack config that provides pixi as global thing. I lost the example.
from tilemap.
Related Issues (20)
- index.d.ts is not bundled with pixi-tilemap 2.1.0 HOT 13
- Import `PIXI` instead of requiring it to exist globally. HOT 11
- Missing textures crash the renderer HOT 6
- pixi-tilemap assigns wrong width and height to the object when there are empty tiles HOT 8
- LDtk Json support HOT 4
- Feature request: Applying tint HOT 2
- id for tile HOT 7
- CanvasRenderer using incorrect asset from spritesheet HOT 11
- newest pixi-tilemap fails with renderer.plugins.tilemap undefined HOT 16
- CompositeTilemap has no `add` method, despite the example HOT 1
- tileAnim does not work for negative offsets HOT 1
- Tiles are reset to original, after x amount of changes HOT 2
- collision
- Update to newer PIXI version HOT 1
- Not working with new `cullable` property from `PIXI 6.3.0`. HOT 4
- Not working since PIXI 6.4.0 HOT 2
- Not compatible with Pixi 7 HOT 9
- Importing pixi tilemap does not work HOT 3
- Missing dependencies
- Texture ID is only set when composite parent is true.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tilemap.