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


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

I finished the board painting for Lucky Star. And write the vertex of the 5-star shape by hand.
This idea comes from https://ludii.games/details.php?keyword=Uxrijn%20Ever

But if there is a problem, the size of the circuit board will change according to the relevant vertices.
Below .lud, please check what is the problem?
(modify from https://ludii.games/details.php?keyword=Nao%20Gutiya%20Baithaneka)


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

Hi,

Sorry I'm not sure exactly what the problem is. Could you try rephrasing your issue or provide a picture that shows it?

Is your issue that the image is too large? Or that the graph vertices don't align with the image?

Cheers,
Matthew


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

(03-02-2021, 10:58 AM)MatthewStephenson Wrote: Hi,

Sorry I'm not sure exactly what the problem is. Could you try rephrasing your issue or provide a picture that shows it?

Is your issue that the image is too large? Or that the graph vertices don't align with the image?

Cheers,
Matthew


How to align with image?

I have a plan to developing the image tools for the LUDII svg images by opensource. 
but we need detail about the grammar of  ludii script.

https://github.com/Ludeme/LudiiTutorials/issues/  ?


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

Hi,

The positions of the graph vertices are determined by the following code:
vertices:{
                {1.3 0} {4.05 1.9}
                {2.4 2.96} {6.6 0.3}
                {5.45 2.78}
                {0.3 4.2} {2.96 4.2}
                {3.75 6} {4.82 4.18}
                {7.5 4.2}
                }
You can update these to change the graph shape.

You can also use metadata to change the placement of the board within the view, for example:
(board Placement scale:0.5 offsetX:0.5 offsetY:0.5)
Will scale the board down to 50% its original size, and shift it to the bottom right.

With these two things together, you should be able to align the graph with your image.

Cheers,
Matthew


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

(03-02-2021, 11:25 AM)MatthewStephenson Wrote: Hi,

The positions of the graph vertices are determined by the following code:
vertices:{
                {1.3 0} {4.05 1.9}
                {2.4 2.96} {6.6 0.3}
                {5.45 2.78}
                {0.3 4.2} {2.96 4.2}
                {3.75 6} {4.82 4.18}
                {7.5 4.2}
                }
You can update these to change the graph shape.

You can also use metadata to change the placement of the board within the view, for example:
(board Placement scale:0.5 offsetX:0.5 offsetY:0.5)
Will scale the board down to 50% its original size, and shift it to the bottom right.

With these two things together, you should be able to align the graph with your image.

Cheers,
Matthew

Thx, Matthew, I send gift to you. 
https://ludii.games/forums/showthread.php?tid=480&pid=2225#pid2225

I'll try to update my project.


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

Cheers, Matthew. 

I finished the LuckyStar painting jobs.

1st. the size of the main board paint by ludii will filled full screen automatic.

[Image: attachment.php?aid=434]


2nd. the rate of the height and width is 1:1 size. but the scale is relatived. 
If we using {3.14 5.66} {2, 3} {1.5, 3.5} draw a triangle, will same as {314 566} {200,300} {150 350}

[Image: attachment.php?aid=433]

vertices:{
                {89 0} {397 212}
                {210 328} {685 32}
                {551 308}
                {0 468} {274 468}
                {369 671} {482 468}
                {710 434}
                }
                edges:{
                {0 1} {0 2} {1 2}
                {3 1} {3 4} {1 4}
                {5 6} {5 2} {6 2}
                {7 8} {7 6} {8 6}
                {9 8} {9 4} {4 8}
                }

3rd. we use the photoshop to got the pixels abs position by dots to as the xy of the svg shape.

[Image: attachment.php?aid=432]

the final we change the .svg file manually to move offset of the star and resize the star to suit the ludii rander result. to got the final release.
That's really really exciting. the kid volunteer was happy so much to see the demo gif.


https://ludii.games/details.php?keyword=Uxrijn%20Ever
https://ludii.games/lud/games/Uxrijn%20Ever.lud

                vertices:{
                {0 0} {5 0}
                {0.17 1} {4.65 1}
                {0.3 2} {4.3 2}
                {0.38 3} {3.9 3}
                {0.25 4} {3.5 4}
                {-0.13 5} {2.97 5}
                {-0.75 6} {2.2 6}
                {-1.47 7} {0.95 7}
                {-2.22 8}
                {-3 9}
                }
                edges:{
                {0 1} {0 2} {2 4}
                {4 6} {6 8} {8 10}
                {10 12} {12 14} {14 16}
                {16 17} {1 3} {3 5}
                {5 7} {7 9} {9 11}
                {11 13} {13 15} {1 2}
                {2 3} {3 4} {4 5}
                {5 6} {6 7} {7 8}
                {8 9} {9 10} {10 11}
                {11 12} {12 13} {13 14}
                {14 15} {15 16} {15 17}
                }


https://ludii.games/details.php?keyword=Kaooa
https://ludii.games/lud/games/Gurvan%20Xudag.lud

I using those game's lud to study how to build my own good painting game board.

(board Placement scale:0.5 offsetX:0.5 offsetY:0.5)
I'm sorry that the offsetX and offsetY in metadata was not working. 
but only scale worked same as below to effect all elments.
(board Background image:"luckstar-14.svg" fillColour:(colour 59 35 48) edgeColour:(colour 59 35 48) scale:1.66)

Final release for LUCKYSTAR:

1, LuckyStar3.3.lud was modified from Nao Gutiya Baithaneka.lud
2, luckstar.svg.zip (54.07 KB) include 15 svgs convert form jpg.
    ( using online tools https://image.online-convert.com/convert-to-svg,  only 5 files to be converted one time. )
3, I using version number Ludii-LuckStar3.3.jar to remember today. 
   

the svg files saved at subdir of ludii package, we using the zip files rezipped from Ludii-1.1.14.jar.

PS: There is a traditional festival on March 3 in Guangxi Zhuang Autonomous Region, China, same as the version 3.3. 
And there is a game variant from this region.


[Image: RECTpaper44.png]


RE: How to adding self rending UI to the LUDII GAMES. - cambolbro - 03-08-2021

Hi Juan,

Thanks for submitting those images, but they don't really suit our style for presenting games. We have a minimalist abstract style that shows the basic game board with the simplest piece images, so the player can focus on how the game plays rather than how it looks. And it's important that the games in our collection follow the same visual style as we'll be doing comparative analyses between all games and need to focus on differences in the rules and play rather than difference in the visuals.

We'd love to add the games you've recently introduced us to in our official collection, but will need to present them in a simplified style consistent with all our other games.

If you want to develop your own personal versions of the .lud with more interesting images/graphics that's fine, we're happy to help. You can distribute them to your students and they can load them as external .lud files. But the official versions in our database will need to be the plainer versions sorry.

Regards,
Cameron


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

(03-08-2021, 11:06 AM)cambolbro Wrote: We'd love to add the games you've recently introduced us to in our official collection, but will need to present them in a simplified style consistent with all our other games.

No problem, that's the perfect solution. 
The real play video already send before at 1st mail. 
the graphic version is encouragement for community volunteer.
A best cooperation is starting.


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

(03-10-2021, 03:56 PM)yuandj Wrote:
(03-08-2021, 11:06 AM)cambolbro Wrote: We'd love to add the games you've recently introduced us to in our official collection, but will need to present them in a simplified style consistent with all our other games.

The perfect solution.  &
A best cooperation is starting.



Mr. camblbro.

I record a gif animation using ludii UI.
If your team could writing the .lud logic, It'll be the best encouragement to our chinese team. As soon as posible we'll work hard to finish chinese ancient database building and hope the world database be finished at future no longer time.

best regards.
Dejun yuan.



[Image: attachment.php?aid=461]


-----


Game Name: LuckyStar

Author: Elsa, beijing, china

Speech: 
Today, we play a new game. Its name is Lucky Star. This is how the board game is played.
Let's first draw a five pointed star on the paper.
Now, we need to put ten stones on the intersection and vertex of the stars.
Follow your heart, remove a stone, and a free place will appear on the chessboard.
Next, jump one stone over another, drop it in the empty space, and remove the stone that has just been jumped from the chessboard.
At the end of the game, only one stone on the board is victory, which means good luck, and anything you pray for will be come true. Note that stones can only jump, and can only jump one piece at a time, and cannot move to adjacent positions.
Now, let’s look at the short video to see how to play (it).

Background:
the ancient board game was found at many area of china, not only western china, but also beijing and hebei province, It be played in chinese community by any eage person, such as borned at 1970. the play method always teached from elder kids to younger kids. The game history maybe has servral hundred years. No one know its original name, just call it star. Our volunteer pray best wishes for neiborhoods using the game , named LuckyStar for it, and drawing colorful game board for chinese spring holiday.

Age of the game:
from 2021.1.1


----
Any else infomation LUDII database needed about the luckystar, pls let me know. 
I and my chinese team will try our best to research it. 
That's the good method, let our team to grow up faster for this global cooperation.


RE: How to adding self rending UI to the LUDII GAMES. - Eric Piette - 03-12-2021

Hi,

I have added LuckyStar to our dev version, it will be in the next release of Ludii.
https://ludii.games/details.php?keyword=LuckyStar

Regards,
Eric