I have this less than mediocre tool I made to help me design maps for a game I am working on. You can see the code here.
I used CSS grids to build a tile editor for my tile based game map. When you run the app (with init button) as is and start to edit the tiles, it is pretty responsive. But when I scale the map size (using multX and multY fields), the click and drag input and css grid response seems to drag. Note: if you scale the above fields to 10 or so, it will take ~30s to initialize the grid. This lag becomes pretty hindering when trying to design a bigger map.
Does anyone have any ideas on how to make CSS grid more responsive with a large number of rows/columns?
Any more appropriate approaches for making a tile editor grid instead of native css grid?
Thanks!
Related
I am wanting to allow users to click on a specific part of a photograph in a tablet/phone (via a web browser or software) and it will record their choice.
Essentially I have some aerial photographs and I want to place a regular grid (say 100m x 100m over the top). This grid would be semi-transparent, and each grid cell would be clear if not clicked ('off') and change to blue when clicked ('on'). Each grid cell would store a value if it is 'on' or 'off'.
This would preferably done using a spatially referenced geotiff image, but is not essential.
I have lots experience in GIS related software, but I am looking for a simple solution.
Is this possible?
What tools, web languages (html, java etc), or software is recomended.
Responsive image maps kind of seem relevant here but I am not sure?
Tracking user interaction over an image is possible. You can overlay a grid of clickable div, and simply listen for clicks on each div.
Here is an approach where I place a 10x10 grid of div on top of an image:
https://jsfiddle.net/o31p99wh/
The key is to know the size / scale of the image, and make sure that the tiles are mapped to that. E.g. each 35 x 35px square maps to 350 x 350m.
I am in the process of setting up a website via Enjin's web hosting for a game server I run. I have an HTML module that will display a map of the island our game server takes place on, with a grid overlay already.
What I am trying to do (if possible), is to create a dynamic grid with css and html (javascript if needed) that overlays the grid of the image and highlights each cell as a user hovers over it, with a small pop-up with details on a specific coordinate (such as any bases, or other special information about a specific area)
I have tried looking around via google, but all searches come up with creating a grid out of multiple images (which is not what I am after), or using the area tag without much explanation on how to turn it into a fullout grid.
I am unfamiliar with how to approach this problem, and would like any input or advice if possible. Thanks!
NOTE: For those wishing to see the map in question I am using, to better help understand my question and assist me, please see here.
I'm creating a game using WebGL. I'm currently working on menu design, and it occured to me that one of the great advantages I have in using web technologies is that I can use HTML for the GUI.
The game uses pixel art, so in keeping with that art style I want the menu to have pixelated buttons and text as well. I'm wondering if using CSS filters or something similar I'm able to pixelate my rendering of DOM elements, or if I'll need to create full button images beforehand (much less appealing).
Thanks!
I'm developing a visualization for certain parts of a Warehouse with Flex 3. In this visualization there are lot of blocks where 1 to x pallets can be placed where x is between 9 and 15. I need to represent each pallet with a black square, each place which is already assigned to a pallet but not physically taken with a grey square and each free place with a white square. I first thought to just use a canvas for each place on a block and change their color if the state changes. But the hundreds of canvases which are there as a result of this approach are not updated quickly enough for my purposes (screen freezes for a few seconds).
I don't want to use embedded images because of the great amount of images I had to embed in the application (those Images appear in 4 orientations).
My idea was to create background images which reflect the state of the whole block only when needed for that certain state and cache them, so that the computation time is spread over the whole runtime.
My problem now is I don't know how to create them in a way that I can use them as "backgroundImages". As far as I understand I would need them as a class object but I don't know how to achieve that, when not embedding the images.
I'm of course open to better approaches to solve my problem. Thanks for your support.
I would suggest using Graphics property of a Sprite for example. It provides basic drawing API, like drawing lines, circles and rectangles.
Besides, you can draw bitmap images on the Graphics to produce more advances results.
I'm fairly new to web development (but not programming) and needed some advice:
I am working on a mobile app using HTML5, CSS, and Javascript (and Cordova for device functionality).
The app will be similar to flashcards (those things you used to use as a kid to memorize things). There will be some animation (flipping the card over), etc. but for the most part, the design of the flashcard will be static (borders with the main content in the center).
What would be the best way to proceed with that (drawing on a canvas or using an image for each flashcard? I am interested in performance and visual considerations of the two.
It really depends on the type of animation the cards will be doing, if they are flipping on the x/y axis you could simply have the image and manipulate its size/flip it etc with JS.
In my experience these kind of calculations/animations are quicker (if you want it to be compatible across multiple devices) however any more complicated animations should use the canvas - I have noticed when creating adverts for smartphones the canvas can really slow some animations down.