GithubHelp home page GithubHelp logo

englercj / gl-tiled Goto Github PK

View Code? Open in Web Editor NEW
87.0 87.0 18.0 2.8 MB

A WebGL renderer for Tiled (http://www.mapeditor.org/) maps. Demo: https://englercj.github.io/gl-tiled/_demo/basic/

Home Page: https://englercj.github.io/gl-tiled/

License: MIT License

JavaScript 11.46% TypeScript 80.05% GLSL 6.11% HTML 2.38%

gl-tiled's People

Contributors

bazumo avatar dependabot[bot] avatar englercj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

gl-tiled's Issues

Cause of artifacts at certain zoom levels

When I zoom the tileset, I see artifacts at various points, little lines at what I think are the edges of the tiles:
Screenshot 2023-03-30 at 8 47 17 PM

I'm guessing this has to do with rounding errors when the scale is set to particular floats?

How would one go about fixing this?

Possible Optimizations

  • Only update animations that are within the active viewport
  • Only upload the viewport rect of the tilelayer on animation updates (texSubImage2D)
  • Disable mipmaps on the tile lookup texture (not an optimization just something I think I forgot to do)

Support for only drawing one layer at a time?

As with many other games, my player and other monster sprites are in the middle of the map layers. That is, the game rendering logic is something like this:

renderMap() {
  drawMapLayer(0);
  drawMapLayer(1);
  drawMapLayer(2);

  drawSprites();

  drawMapLayer(3);
  drawMapLayer(4);
  drawMapLayer(5);
}

Is it possible to do something like this with your library? So that I can have parts of the map drawn over the player and other monsters.

How to rotate tilemap?

Thank you for huge work. I saw, there are couple of methods setAxisAngle and rotationTo, but I have not clue how to use them. Please, can you help with that. Thank you!

Only works with map sizes that are a power of 2?

This took me hours and hours to figure out, but it seems to be the case that this project only works with map sizes that are a power of two. That is, if your tiled map is 40x40, it just won't render anything. The map would have to be either 32x32 or 64x64.

I took a look through the demos available and sure enough, all of their map sizes are indeed a power of 2 (such as 256x256 or 512x512).

I assume this is a bug because the original algorithm from which this library was based did not have this restriction. Do you have any idea what may be causing this? None of my map sizes are of a power of two unfortunately, so they all currently render blank.

If this is not a bug but is indeed just a restriction of the library, I believe it should be noted somewhere, as this took me 6 hours to figure out.

Publish to NPM?

I'd like to use this project in my own. Can it be published to NPM?

Demo doesn't seem to work?

On Chrome 66 and Firefox 59 (on OSX Sierra)... all latest versions... I get this:

image

Nothing obviously wrong in the Network or Console tabs though?

This is the data layer:
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.