I want to evaluate Libgdx for my app. I want the following things to be possible with Libgdx:
The dynamic loading of images. (✔ Texture)
Cutting images. (✔ TextureRegion)
Support of the multiple screens. (✔ Screen)
Recognizing swinging to the right, left, up and down in a defined area. (✔ GestureDetector)
Nice to have:
Styling of buttons. (?)
Standard elements like lists, ScrollViews etc.(?)
SVG graphics rendering (?)
I am thinking about the three problems. I read that GestureDetector should be very slow (500ms) and that SVG graphics are not natively supported and rendered with extensions very slow.
My third concern is that I can't just style buttons the way I want them to, for example: enter image description here
I would like to know if my requirements can be solved with the LibGDX functions and if they are good and easy to use.
Thanks for your advice!
LibGDX comes with a sublibrary called Scene2D UI, which defines a bunch of standard UI widgets which can be styled with JSON. It comes with different Button classes and ScrollPane which are your ScrollView substitute.
Docs you might want for Scene2D UI:
https://github.com/libgdx/libgdx/wiki/Scene2d.ui For the widgets
https://github.com/libgdx/libgdx/wiki/Skin For styling the widgets
In regards to SVG rendering, best option is to render them to PNG files if you want to use LibGDX alone.
Also, you may want to look into TextureAtlas for managing all of your TextureRegions, as well as AssetManager for managing all the external resources in your app https://github.com/libgdx/libgdx/wiki/Managing-your-assets.
It's a good idea to compile all of your texture files into a single texture, so that not many textures have to be bound and unbound in OpenGL, so have a look at this https://github.com/crashinvaders/gdx-texture-packer-gui this will help you produce a TextureAtlas automatically.
Related
I am trying to make a copy of the popular browser game Travian.com. I am currently working on the maps and I was able to get the farms overview image as a png.
What I am trying to accomplish with that map is:
Each element (farm) should be clickable) and redirect to that specific farm page.
As you could see on the map, farms are not just simple squares.
Once I had the farms.png picture, I used on online tool to convert a png into a .svg file. Using a free software, I was able to draw circles around each map to build my svg.
This is the result:
I recently read about canvas and I was wondering if canvas would be a better option in my case rather using svg?
You need to try it yourself and see if it gets redrawn quickly enough that the game is sufficiently responsive for you. If the map is very detailed, the redraw may be too slow and make your game feel slow. You really need to try it and see. If it's too slow for you, then you may need to either:
use bitmap images, or
keep the maps as SVGs, but render them to a Canvas on first load. This way they'll be sharp at whatever resolution screen the user has.
I need to style nodes with SVG images but cannot make it work. I am using ImageNodeStyle and passing an SVG image to the constructor. However, applying this style to nodes has no effect. I tried using bitmap images and they work fine.
How do I enable SVG image support for node styling?
yFiles for JavaFX uses JavaFX as the rendering engine and JavaFX unfortunately does not directly support SVG images. You need to convert the SVG image into an image that JavaFX understands and then you will be able to use it with ImageNodeStyle.
Using WebViews would be another option, however this is a very heavyweight solution that does not scale very well for many SVGs. You can surely use for rendering a background SVG, but I would not use hundreds of instances to show simple SVG graphics for the visualization of nodes.
Take a look at this answer to a related SVG/JavaFX question: it proposes a solution to the generic problem, which should also work for this specific issue.
I am looking for a tool to draw the SVG diagram and I want to display the same in a webpage.
There are lot of tools to create SVG diagram, but I am looking for the one to add some extra fields to each shape.
OK first I will explain my requirement clear. When we create a rectangle using any SVG tool, it will create a SVG element with rect element, in my case I would like to differentiate two devices "device type-1" and "device type-2" (using CSS in my web application) but their shape is rectangle.
So, I have to add some additional information for each rectangle in the drawing tool, so that using Javascript I could understand the type of device, based on the device type I could apply different CSS for each rectangle.
How to do this? Any drawing tools support this kind of feature?
You could use http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html and define IDs that you reference later on in JavaScript
One approach would be to us Adobe Illustrator to design you elements and Raphael JS to display and animate said elements. There are some differences in the way illustrator draws vector graphics and the way SVG does so the general consensus is to keep you graphics relatively simple. There are several guides out there, but this one looks particuallry good:
http://snugug.com/musings/illustrator-raphael-js-guide
I am playing with generating dot files and then turned them into SVG graphs with a lot of nodes.
My question is that are there event listeners to detect mouse clicks on dot/SVG graph nodes?
For example, right click on a node in the SVG graph, I do something(maybe get the related information from the node and then do something),
Then how to generate dot file or SVG file to achieve this?
There are several ways to create an interactive SVG graph:
Use SMIL, an extension to svg (Example tutorial http://apike.ca/prog_svg_smil.html)
Javascript (the Raphael library is excellent)
CSS animations
In any case, you'll have to display the svg graphs in a client which supports any of those technologies (browser), and you will have to code it in addition to the svg output graphviz creates.
Just another thought on this (realizing the question is old, but maybe it helps someone coming across).
Depending on what you want to do, it may be easiest to decouple the event handling from the drawing. I mean, you can find out where graphviz positions the nodes (as well as edges, labels etc.), see, for example, this post on how to do it in python. Then you can paint the graph in the background of whatever GUI you're using, and use its native event handling to react on on_click by placing invisible clickable objects over the nodes.
If you want interactive graphs then graphviz might not be the best choice.
I'd recommend having a look at D3.js. Perhaps you could construct the graph data in json and load them with D3?
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.