Parallelism Full Pack Theme [Dispaly + Game Menu] [CANCEL]

[kent79]

Hello everyone. Long time no see. I am playing DB FighterZ currently. This is very funny and amazing 

Well, I find a good layout sample for AM theme. What do you think so? Someone can help to make it? Thanks

Original Parallelism web demo & source code
https://html5up.net/parallelism

[zpaolo11x]

The first implementation of my Arcadeflow theme looked a bit like that, if you add a white border around the icons it looks very similar with game titles overlapping the game graphics. The main difference is that the thumbnails are square, I have to think if different sized thumbs are possible. A theme like that with one row will be very easy to do with carrier.nut.

[kent79]

Do you know how to let first box display "game system"? like as above ideal mod "MAME" text box?  Also, how to display game name in each box? Agree with one row is easy, but do you know how to make 2 rows?

Anyway, thank you first, I will try to make a mod up base on your theme later

[zpaolo11x]

Do you know how to let first box display "game system"? like as above ideal mod "MAME" text box? 

This is something I haven't done before, probably the part of the theme that requires a bit of tricking. It would be easier to have the system box at full height, then the two rows of thumbnails.

Also, how to display game name in each box? Agree with one row is easy, but do you know how to make 2 rows?

Adding the name is not difficult, I made it in a test theme that is not published, it's a simple extension of the carrier.nut module where instead of just adding a snap artwork you add also texts or wheel artwork. Two rows like in my theme is quite easy too, although the theme will be a bit less fluid than the standard one line theme. The difficult part would be to implement an "irregular" grid like the one you showed in your mockup, but if it's predetermined I think it can be done too.

It's intriguing and I like the look of the theme, but I don't have time to code right now, otherwise I'd be glad to try it

[kent79]

I think "irregular" grid is difficult to do. So, I will pass it and using fixed grid. But one thing would like to do.For AM default coding, it can be only handle fixed size of box art image. If you see Parallelism web layout, it can handle different size of image very well whether is vertical image or horizontal. Do you have any idea? 

[zpaolo11x]

If you use a fixed grid, maybe with square cells, then you have to add a transition callback and modify the texture x,y,width and height of the snap artwork. You can use this trick to "crop" the original image so that only the square center area is used. If you have thumbs with incorrect aspect ratio (pixel perfect thumbs) you can use the same tick to correct the aspect ratio to 3:4 or 4:3.

[kent79]

If you use a fixed grid, maybe with square cells, then you have to add a transition callback and modify the texture x,y,width and height of the snap artwork. You can use this trick to "crop" the original image so that only the square center area is used. If you have thumbs with incorrect aspect ratio (pixel perfect thumbs) you can use the same tick to correct the aspect ratio to 3:4 or 4:3.

Sorry, my coding skill doesn't good enough. Could you make a sample (nut file) to me based on your theme? Many Thanks.

[zpaolo11x]

I tried to put together a very stripped down version of my theme with a 2 rows flowing grid. The source has a bit of comments but if you have doubts I can explain some parts.

Oh, there's a mistake in the layout.nut: change the lines according to this:

   namez.set_bg_rgb (0,0,0)
   namez.bg_alpha = 120
   namez.charsize = height*1/12.0
   namez.word_wrap = true
   //namez.alpha = 0

otherwise it won't show the game name in text format.

During this I discovered a very strange feature: my grid is composed of surfaces. If the last updated element of the surface is a text box (like in this theme) the scrolling is much faster and smoother. If the last element updated on the surface through a rawset_index_offset is an image the scrolling is slower. I don't know why

[kent79]

Thank you zpaolo11x. It seems not easy for me. I need to study. Below is 2nd mock up

[keilmillerjr]

You could make it responsive using percentages and breaks between formats. Shuffle module could make use of the odd layout as it’s presentation independent, but no animation like carrier.

[zpaolo11x]

You could make it responsive using percentages and breaks between formats.

The theme I posted above is responsive, but I mistakenly hardcoded 1280x800 as a resolution You can edit the code and comment those two lines to check

[zpaolo11x]

The Carrier implementation (which is the base for my "stripped" theme also) assigns tiles position from the game index number (with some tricks to perform tile reflow). Simplifying a bit game index "i" is placed at a position along x that's multiple of i/rows, and a position along y that's a multiple of i%rows, so a regular grid is populated. If instead of this simple math you pass those indexes (the row and column indexes) through a lookup table you can customize the position and size of each tile in an irregular pattern. I think if you design a  2x5 irregular pattern that fits a box, then you can "repeat" it for tiles greater than 10.

I know my explanation is a bit lacking

[kent79]

SORRY ALL, The project is cancel since I am busy currently