16

I'm planing to create tablet app. I would ask for some guidance.

I have pictures in SVG format like this one.

With SVG it is easy, You just change fill parameter to different color but as I understand, there is no easy/stable svg processing to use with libgdx. I still want to use svg files to create/store images for my app.

  • What processing path would You recommend?
  • Is there an easy way to convert svg paths/shapes for com.badlogic.gdx.math.bezier or polygon objects and then draw them on screen/get user input (tap) inside this shapes?
  • Or should I use different objects/path?

Shapes could be grouped together for example I want two windows in a house to change color at once.

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
tester.one
  • 369
  • 2
  • 6
  • 23
  • I am not sure what you are trying to accomplish, but there are a lot of ways to convert path data to other data structures. But in principle all I can say is that the svg path data structure is quiet simple to parse and easy to understand. have a look here: http://www.w3.org/TR/SVG/paths.html#PathData writing a parser for this is really not difficult and with it you can stuff into every framework... – philipp Mar 05 '13 at 10:28
  • I'm just trying to draw a picture and then color it by tapping inside shapes. I know how to parse SVG but I'm not sure what libgdx objects I should use as a result for this kind of application. thanks! – tester.one Mar 05 '13 at 10:37

2 Answers2

9

The way LibGDX is written is it gives you a lower level way to do this type of rendering, but doesn't offer out of box ways to render SVG. It really depends on if you are looking for something with performance or just simply want it to draw basic shapes.

To simply render shapes you could use something like ShapeRenderer. Which gives you a very close interface to the Java2D way to draw things. Maybe to quickly draw some basic stuff this might be handy.

If you are wanting to do some more robust version of rendering you will probably want to look into using a Mesh and working with shaders for OpenGL ES. You can find examples of these in the LibGDX tests as well as searching online for examples/tutorials.

If you want to turn the SVG into a texture you will want to look at Pixmap and then you can create a Texture with it and render with a Spritebatch. You will need to write the pixels you want to color and such with the Pixmap. However, doing it this way will generate an unmanaged texture (i.e. you will have to rebuild it when a user comes back to the app after pressing back or putting the device to sleep).

Community
  • 1
  • 1
Jyro117
  • 4,519
  • 24
  • 29
  • 2
    Thanks. I don't think I need much speed - but if I understand correctly ShapeRenderer do not allow to draw bezier curves? Also it is important to easily fill this shapes with different colors - so pixmaps are probably not that useful? Now I only need to know if it is possible with meshes :) – tester.one Mar 16 '13 at 19:17
  • Mesh is just a high level abstraction of OpenGL VBOs. If you are comfortable with VBOs then it should be fairly straight forward. The real challenge is having to code the algorithms to generate triangles for your shapes/lines/etc. – Jyro117 Mar 16 '13 at 23:00
  • Ok, so I made some tests and it looks I can import meshes from blender (import SVG into blender, convert into mesh, export to g3dt, move to app, create stillModel from file). Problem is I cant grasp the way to show it on screen. Sometimes it fills all the view, sometimes it is just a small line (I change its the color to view it). If I try to use the camera - everything vanishes... What are the rules to position imported mesh to the camera? Or should I somehow do it in blender BEFORE export? – tester.one Apr 03 '13 at 19:43
  • Well there is a number of things which could be causing issues. I'm not sure what sort of position information blender would be setting for the vertices of the mesh. A camera allows you to change the view port of the screen. By default, opengl draws everything between -1 and 1 for both X and Y. The camera class simply changes it so you can draw things between different values, i.e pixels, perspective viewing, etc. This libgdx test may help you understand how to work with 'models' https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/ObjTest.java – Jyro117 Apr 06 '13 at 00:06
0

I only work with android platform and my solution was to convert svg to bitmap and then to texture and use texture.

More details on how to do this are described in this article: https://veldan1202.medium.com/libgdx-svg-android-602323369175

starball
  • 20,030
  • 7
  • 43
  • 238
Владислав Шестернин
  • 1,125
  • 8
  • 14