I'm working on an Android application that requires 2D graphical view with a large set of objects. Here's what I basically need to display:
In my case, there could be hundreds of spatially distributed objects. This view is going to behave like a map, so the user is able to scroll in horizontally and vertically, zoom in and zoom out. It also requires click event handling, so the user is able to click any triangle and I then should display some extended information related with that particular triangle.
I'm mostly concerned about 3 things:
In case I re-draw all the objects per in my onDraw() handler, that would be really slow. Also, there I cases when I don't even need to draw all these objects since some of them are invisible depending on zoom level and scroll position. These requires using quad trees which I don't want to implement manually.
All these objects are defined as (x,y,rotation,type), so in case customer decides that we need a "show all" button, I'll have to implement a functionality to calculate bounding boxes.
I need to be able to handle click events and (probably) dragging for all these shapes.
Is there any library that can help me with these tasks? Just don't want to spend 3 days on stuff that I believe must already have been implemented.
All the methods in the Canvas class of the android.graphics package should suffice. The Canvas does clipping (meaning drawing commands get discarded if it's not visible) so if the image is static you could render it into a Picture and draw that on onDraw().
I think the drawing methods have methods to calculate bounds and return them. See Path's computeBounds(RectF bounds, boolean exact).
Related
I want to draw Strings in my Libgdx game but i cant use BitMap Fonts because the scale of my game is to smal to use them.
It sounds like you mean the scale of your viewport is too small to show fonts correctly. There are two solutions. The first is better for legibility while the second is quick and dirty.
One is to use a second viewport for the UI that has an appropriate scale for text. You would first call gameViewport.apply(), draw the game, and end the batch. Then use uiViewport.apply() and then draw the UI. The downside with this method would be if you want to draw text that aligns with moving objects in the game, you would have to use the two viewports to convert coordinates. Otherwise, this is the ideal method to get a crisp looking UI. Ideally you would use a ScreenViewport and select a font size at runtime based on the screen dimensions, either by shipping your game with multiple versions of the font at different scales, or by using FreeTypeFontGenerator.
The second method is to scale down all your text. First call bitmapFont.setUseIntegerPositions(false) do it won't round off positions to integers. Then call bitmapFont.setScale() with however much you want to shrink it to fit in your game viewport.
There is a gdx-freetype project:
https://www.badlogicgames.com/wordpress/?p=2300
and it uses TrueType fonts as source to generate bitmap font on the fly.
Not sure how stable this is - didn't use it.
I am making a game similar to Risk and struggling to find a way to implement the interaction with countries.
The basic idea is to create custom objects that are not rectangular and be able to change their colour by clicking them, highlight them with mouseover, or as the game progresses.
How would I go about having highlight-able countries that can be selected? The problem with sprites is their bounding boxes are rectangular, and if I define Box2D vertices and make polygons it gets really messy. Also, there are a lot of countries so a lot of the platformer style solutions don't fit.
How should I also change the colours of what is selected? Would it be best to have an individual sprite for every country and keep switching between them or is there a better way?
One way is to use polygons like you tried but I wonder why and what you mean it got messy. There are tools out there that let you draw vertices over a image and let you export that. You probably need to clean up the data a bit and import it into your app. It's also not very hard to make such an app yourself, have it import your image and start drawing and export to your favorite format. The more detailed you draw your polygons the more detail you get in your.
Perhaps an easier solution would be to use the opacity of each image of a country. Each country gets it's own image and you need to overlap the bounding rectangles to line them all up. When your mouse is hovering over one or more of these bounding boxes you check if the mouse is over a transparent pixel. If it is transparent you are obviously not hovering over the actual country. Some things to consider:
I would create the game in a pixel perfect manner so each pixel of your images is translated to a single pixel of the screen your outputting to.
To align your whole map I would create one big world map in your drawing application. Then save each country but remain the canvas size of the complete map. When packing these images with the LibGDX TexturePacker remove the whitespace (transparent pixels) and you will get an offset in your atlas. You can use this offset for each country to line them up and save precious texture space by removing all that whitespace.
Always check for a simple collision first before diving in deeper.
If you want to have "hover" functionality then don't do pixmap = texture.getTextureData().consumePixmap() each update since it's rather expensive. You might be better off creating your own 2D boolean array that represents the clickable area when you initialize the country object.
I am implementing a map as a computer game accessory; it should show the geography of the computer game with a few informative overlays. I wonder what's the best way to achieve this in JavaFX, or more precisely ScalaFX.
Right now, I have a very naive implementation:
I have tiles for the map in different zoom levels. For each zoom level, I arrange ImageViews in a Group and transform that group, so that all zoom levels use the same coordinates.
A separate group with the same coordinates is used for my overlays.
I zoom using the mouse wheel and make only one zoom level visible, depending on the current zoom.
I pack all this into a ScrollPane.
That has a few limitations:
all tiles, for all zoom levels, are loaded at startup. That's ugly, but works in my particular use case.
using a ScrollPane only works if the map has limited bounds. Again, fine here, but not for maps in general.
the UX is weird: the ScrollPane scrolls with the mouse wheel, while most maps scroll per drag and drop; most maps zoom with the mouse wheel or pinch to zoom. It's critical that zooming preserves the "anchors" (mouse/touch positions) during the gesture. (It would also be nice to be mobile-ready out of the box, but that's just dreaming right now...)
different levels of detail in the overlay, depending on the current zoom, are possible, but probably not very efficient or convenient.
Obviously, this is one of the approaches I tried. This question mentions a library by some eppleton, but it doesn't seem to be maintained, and the blog that used to describe the library doesn't exist anymore. Also, it seems to focus on providing a game engine, with a tile having meaning to the game; a tile in a map is just an image, and the overlay doesn't care where one tile begins or ends.
To finish this with a concrete question: Are there any libraries or techniques that I can use to fulfill my needs? I'm especially interested in my third bullet point (UX), but I guess that if there's a suitable approach, it would cover points 1 to 3.
UPDATED:
Few more options are on the table now:
Gluon Map
GMapsFX
One option is not to build but use existing open source project, such as openmapfx
I have gone through lots of tutorials which teach about layouts in Java Swing, but they don't seem to suffice my need. I am creating a solar system GUI using Java Swing, and i want to place the planets in the GUI according to the values i fetch from my micro controller, which are usually float point values. I cannot use the Grid Bag Layout, as to position a label i have to specify grid x and grid y, which cannot be the case since I receive float point values from the micro controller. The best resource i found is to use absolute layout where i can specify the position of the planet by giving mere X and Y Co-ordinates, which will be fetched from the micro controller. The problem I am facing now is that the absolute layout does not have auto re-size feature.
What would be the best possible option to adopt the auto re-size feature in absolute layout?
Swing tutorials were not generally meant for situations like this -- they were meant for people who want to write more normal GUI applications, using buttons, drop-down boxes, check boxes, radio buttons, menus, and have layout that follows currently accepted practices in terms of positioning those on the screens. If any of that applies to the part of your program that is not displaying planets, I encourage you to use what they have to say about it.
But you want to place things according to calculations of your own. I recommend doing that in a panel, calculating the size and position of your objects according to the size of the panel at the point of drawing. When the panel resizes, you will need to trap the event that says it is resizing and redraw. You will need to deal with your own minimums and maximums, etc.
I don't recommend the custom layout manager suggested elsewhere for a couple of reasons. Firstly, it won't save you any work at all -- you are still going to have to write the code that determines positions of things, if you just then draw your own graphic instead of attempting to position a UI element, I think it will actually be less work. And that's the second reason -- layout managers' purpose is to position UI elements within the panel, and the pieces of your solar system don't really have any need to be UI elements, just graphics on the screen.
Good luck.
I am writing a program that involves overriding a JPanel to do some graphics work. Basically this JPanel is displaying a field of hexagons and the user can interact with individual cells. This field is composed potentially of hundreds or thousands of hexagons, and most of the time when changes occur, only a tiny portion of the screen is affected. But at the same time, it uses multiple layers (there's a "main" layer that shows what the cells contain, and an overlay that shows which cells are selected and ready to be modified)
In order to avoid the cost of rendering each and every cell any time a repaint is needed, my app as it currently exists holds a BufferedImage for each layer. When paintComponent() is called, the app checks to see if any changes have been made that need to be drawn (for example, a user clicked on the screen so the overlay needs to show that some cell is selected), and if so, renders the modified layers to their bufferedimages. In either case, the the repaint just blits both of the BufferedImages to the screen.
It works just fine, but this is basically a home-spun version of double buffering, which Swing is supposed to support internally. However, for the life of me I can't seem to find where to get access to the component's backing buffer so that I can modify it... If I call "getGraphics()" on the JPanel, I get null pointer exceptions -- So that's a no-go.
I am looking for a more elegant elegant way to do this which hopefully takes advantage of the built-in double buffering offered by swing, in order to avoid blitting the entire screen just for one tiny change (and to avoid having to reinvent clipping).
Any ideas?