Ludii Forum
How to adding self rending UI to the LUDII GAMES. - Printable Version

+- Ludii Forum (https://ludii.games/forums)
+-- Forum: Suggestions (https://ludii.games/forums/forumdisplay.php?fid=10)
+--- Forum: Suggest Concept (https://ludii.games/forums/forumdisplay.php?fid=25)
+--- Thread: How to adding self rending UI to the LUDII GAMES. (/showthread.php?tid=446)

Pages: 1 2


How to adding self rending UI to the LUDII GAMES. - yuandj - 02-21-2021

I downloaded NICE LUDII today. SULA is the first demo AI game used by my students. There is also a college student AI competition in China, every summer, this year is the 15th. SULA is one of the competitions.

[Image: attachment.php?aid=377]

My suggestion is whether it is possible to replace the board style, including chess pieces, into a user-defined UI interface. I know that many ancient board games have their specific cultural symbols, so that when playing games, they can better show the charm of culture, rather than just a demonstration of gameplay. I led my students to collect a lot of game samples, most of them are from western China, and many of them are very exotic. It can be seen that they come from different countries. This is also the result of cultural integration. Therefore, I suggest that it can support user-defined interfaces. Or I don’t know LUDII yet, it’s so exciting, I can’t wait to learn more about it. Thanks again for the work of the LUDII team.

Good luck, everything goes well.

Regarding the LUDII AI competition, I think I will be a staunch supporter. There is a similar plan in China for the ancient board games and AI research project running. The purpose is to inherit intangible cultural heritage. Quite a few game samples overlap than LUDII database. On the game map, there are not many markers from China. I think my students can contribute more with that .

good luck. Dejun Yuan from beijing , china.


RE: How to adding self rending UI to the LUDII GAMES. - Walter.Crist - 02-22-2021

Dear Dejun,

Thank you for your message about the plan for ancient board games and AI in China. I'm the archaeologist working on gathering all of the relevant historical data on games for our project, so I am particularly interested in learning more about Chinese games through history, as there is some information accessible to us, but much more is needed.

Would you be interested in collaborating with us with regard to research on Chinese (or East Asian more broadly) games? Please email me at walter.crist@maastrichtuniversity.nl if you'd like to discuss the possibilities!

As for the technical aspects of your question, I will allow our technical experts to answer those questions. From the perspective of the cultural research, because we are dealing with so many games worldwide, it is difficult to be able to include these kind of cultural symbols, artistic styles, etc, which require a bit more research than we have time for. But, it is a good opportunity for future improvements.

Thanks again, and I look forward to discussing more about games!

Best wishes,
Walter


RE: How to adding self rending UI to the LUDII GAMES. - MatthewStephenson - 02-22-2021

Hi,

We have the functionality to use .svg graphics files for the game board and pieces. However, we have several restrictions listed below.

The best way to check if an SVG will display correctly in Ludii, is using the "View -> Load SVG" menu option.

The current restrictions on SVGs in Ludii are:
- Colour is not used (we fill the figure with player colour then draw black border).
- Figure border must be defined by a path fill (not a stroke).
- Can use multiple paths, but no other primitive shapes (no lines, not rectangles, no circles, ...)
- Can't use transforms (which is why your example image from yesterday is reflected).
- Groups are not respected (though do not necessarily draw badly).


RE: How to adding self rending UI to the LUDII GAMES. - yuandj - 02-25-2021

I'll study the funciton to load .svg. thanks your team efforts.  Heart

[Image: attachment.php?aid=395]

VIEW THE .SVG ALL ARE THE PIECES. i'LL TRY DRAW BOARD.

svg.jpg i attached was a colorful svg of twitter logo. rander as black.

https://ludii.games/details.php?keyword=Tule%20Paid

https://ludii.games/lud/games/Tule%20Paid.lud

the .lud file which part was define the board shape ? how to replace the .svg to change the board look like?

thanks...

https://ludiitutorials.readthedocs.io/en/latest/tutorial_amazons.html#step-2-defining-the-players-and-the-board

the mention isn't find the board svg file define, only paint board by engine.

or fork the game loading files.
https://github.com/Ludeme/LudiiTutorials/blob/master/src/ludii_tutorials/GameLoading.java

adding .svg board loading code after 

// This will load Chess:

final Game chess = GameLoader.loadGameFromName("/Chess.lud");


RE: How to adding self rending UI to the LUDII GAMES. - MatthewStephenson - 02-26-2021

Hi,

You can add a background or foreground image to the game board by adding the following line to the game's metadata:

(board Background image:"disc.svg" fillColour:(colour 223 178 110) edgeColour:(colour 223 178 110) scale:0.035)

substituting the image, scale and colours to be something that you like.

I recommend taking a look at Len Doat to get an idea of how to add this in.

You can also reference an external .svg file, by placing it in the same location as the Ludii .jar file.

Cheers,
Matthew


RE: How to adding self rending UI to the LUDII GAMES. - yuandj - 02-27-2021

thanks.

https://ludii.games/details.php?keyword=Len%20Doat

    (graphics {
        (board Background image:"rectangle.svg" fillColour:(colour 153 76 0) edgeColour:(colour 153 76 0) scale:1.05)
        (board Background image:"disc.svg" fillColour:(colour 153 76 0) edgeColour:(colour Black) scale:0.1)
        (board Background image:"disc.svg" fillColour:(colour 153 76 0) edgeColour:(colour Black) scale:0.08)
        (board Background image:"disc.svg" fillColour:(colour 153 76 0) edgeColour:(colour Black) scale:0.03)
        (board Background image:"disc.svg" fillColour:(colour Black) edgeColour:(colour Black) scale:0.005)
        (board Colour Phase0 (colour 223 178 110))
        (board Colour InnerEdges (colour Black))
        (board Colour OuterEdges (colour Black))
    })

[Image: attachment.php?aid=407]

Using the two svg files to draw the board above, Is it?

[Image: attachment.php?aid=411]


RE: How to adding self rending UI to the LUDII GAMES. - MatthewStephenson - 02-27-2021

Hi,

Yes that is correct.

Cheers,
Matthew


RE: How to adding self rending UI to the LUDII GAMES. - yuandj - 03-01-2021

(02-27-2021, 07:37 AM)MatthewStephenson Wrote: Hi,

Yes that is correct.

Cheers,
Matthew

But how to using .svg file out of the ludii database.

How to input file path for my owned designed .svg file to my modified .lud file.


(board Background image:"01.svg" fillColour:(colour 153 76 0) edgeColour:(colour 153 76 0) scale:1.05)

attachment is 01.svg as a paper of background.


RE: How to adding self rending UI to the LUDII GAMES. - MatthewStephenson - 03-01-2021

Hi,

Your example metadata code is correct, but there is a bug in the current version of ludii where the wrong image is shown if you include the ".svg" in the image name.
From the next release your example metadata will work correctly, but for now you can use image:"01" instead.

You also need to make sure that the 01.svg file is in the same place as the Ludii .jar

I've attached a .lud file, where I have set your picture as a foreground image for Tic-Tac-Toe. Hopefully this will give you a better idea of how it can be used Smile

Cheers,
Matthew


RE: How to adding self rending UI to the LUDII GAMES. - yuandj - 03-02-2021

(03-01-2021, 04:56 PM)MatthewStephenson Wrote:  image:"01" 

that is the src of images. That's the key.

At same time, I testing a mathod to adding .svg to .jar files. pls see attachment, it's the solution. also a good release method of it.

- 1. unzip all jar to files
- 2. adding luckystar.svg into svg/
- 3. zip all jar files to one package named ludii-luckystar.jar (using zip format not rar format.)
- 4. loading from lud file. :D