Post #1 · Posted at 2018-09-15 02:23:17am 5.6 years ago
Well to make it simple I just want to make the wheel to work as this image that I made in Photoshop:
EDIT: I just need the choice zoom in when selected, everything else is already done. been trying but have problems with movement, spacing and the game crashing when trying to change the sort.
I know this should be and small issue for most of the people making themes here, but for me it's a problem(still learning a lot of these codes) so I've tried looking some other themes codes but cannot find a proper way to adapt it to my own theme correctly. If any of you can help me with this it would be very appreciated
EDIT: I just need the choice zoom in when selected, everything else is already done. been trying but have problems with movement, spacing and the game crashing when trying to change the sort.
I know this should be and small issue for most of the people making themes here, but for me it's a problem(still learning a lot of these codes) so I've tried looking some other themes codes but cannot find a proper way to adapt it to my own theme correctly. If any of you can help me with this it would be very appreciated
Post #2 · Posted at 2018-09-15 03:57:48pm 5.6 years ago
ZTS | |
---|---|
Member | |
139 Posts | |
Not Set | |
Reg. 2015-01-13 | |
"But enough talk! Have at you!" |
Please be more specific
- Is this a custom lua music wheel or a regular one?
- What is your transform command?
- What does the crash message say?
- Is this a custom lua music wheel or a regular one?
- What is your transform command?
- What does the crash message say?
Post #3 · Posted at 2018-09-15 07:43:20pm 5.6 years ago
It's a regular one using metrics, I modified the wheel from the DDR 2014 theme si it's working that way.
Code from DDR 2014 theme with no zoom implemented, just adjusting size and spacing:
I tried looking the code using in waiei theme but it's not working propertly
Code from waiei trying to make the zoom work:
The zoom actually works but there's a weird animation when you change the song, the jacket zoom in and out, and there is not spacing between the selected item and the rest of the wheel, just like this:
And the crash is not happening again, don't know why but the sort now works fine.
Code from DDR 2014 theme with no zoom implemented, just adjusting size and spacing:
Quote
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
self:x( offsetFromCenter*204 ); \
self:zoom( 0.78 ); \
end;
self:x( offsetFromCenter*204 ); \
self:zoom( 0.78 ); \
end;
I tried looking the code using in waiei theme but it's not working propertly
Code from waiei trying to make the zoom work:
Quote
[ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178); \
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178); \
else \
self:zoom(0.75+(0.3-(math.abs(offsetFromCenter)*0.75))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178); \
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178); \
else \
self:zoom(0.75+(0.3-(math.abs(offsetFromCenter)*0.75))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
The zoom actually works but there's a weird animation when you change the song, the jacket zoom in and out, and there is not spacing between the selected item and the rest of the wheel, just like this:
And the crash is not happening again, don't know why but the sort now works fine.
Post #4 · Posted at 2018-09-15 08:03:49pm 5.6 years ago
MadkaT | |
---|---|
Member | |
820 Posts | |
Not Set | |
Reg. 2009-11-24 | |
For the selected item you need to use
offsetFromCenter == 0
and for the horizontal spacing self:x(offsetFromCenter*178);
and replace 178 for the width fo your jackets + the gap between them if you wanna add some spacePost #5 · Posted at 2018-09-15 09:16:54pm 5.6 years ago
Thanks for the help, adding the gap spacing worked , the only problem is that the next or previous item from selected zooms in and out as you move the wheel, like this:
This is my new code:
I'm not sure where to put the " offsetFromCenter == 0 " line, everything I tried just made the game crash or altering the zooming animation.
This is my new code:
Quote
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
else \
self:zoom(0.55+(0.5-(math.abs(offsetFromCenter)*0.55))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
else \
self:zoom(0.55+(0.5-(math.abs(offsetFromCenter)*0.55))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
I'm not sure where to put the " offsetFromCenter == 0 " line, everything I tried just made the game crash or altering the zooming animation.
Post #6 · Posted at 2018-09-15 11:01:20pm 5.6 years ago
ZTS | |
---|---|
Member | |
139 Posts | |
Not Set | |
Reg. 2015-01-13 | |
"But enough talk! Have at you!" |
Last updated: 2018-09-15 11:14pm
Something like this, if you want your zoom to be animated.
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter)< 1 then \
self:zoom(0.55+math.cos(offsetFromCenter*math.pi/2)); \
else \
self:zoom(0.55); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
Explanation: ItemTransformFunction updates every frame (or something like that), so cos(offsetFromCenter)*math.pi/2 will approach 1 as offsetFromCenter approaches 0. But it has to be < 1 because giving cos()*math.pi/2 an x value greater than 1 will cause cos to return a negative y value, making it start to zoom out even more.
Some knowledge of trig required. You can also see this for yourself by using https://www.desmos.com/calculator and typing in cos(x)*pi/2
Otherwise...
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter) < .5 then \
self:zoom(1); \
else \
self:zoom(0.55); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter)< 1 then \
self:zoom(0.55+math.cos(offsetFromCenter*math.pi/2)); \
else \
self:zoom(0.55); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
Explanation: ItemTransformFunction updates every frame (or something like that), so cos(offsetFromCenter)*math.pi/2 will approach 1 as offsetFromCenter approaches 0. But it has to be < 1 because giving cos()*math.pi/2 an x value greater than 1 will cause cos to return a negative y value, making it start to zoom out even more.
Some knowledge of trig required. You can also see this for yourself by using https://www.desmos.com/calculator and typing in cos(x)*pi/2
Otherwise...
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter) < .5 then \
self:zoom(1); \
else \
self:zoom(0.55); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
Post #7 · Posted at 2018-09-15 11:06:20pm 5.6 years ago
Is another way to code the wheel the offsetFromCenter is the side of the wheel, the offset 0 is the center, on this case the negative values are items to the left and the positive items are value to the right.
Check the code in details:
This section applies to the items at the left side:
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
This one to the items at the right side:
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
And this one to the center
self:zoom(0.55+(0.5-(math.abs(offsetFromCenter)*0.55))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
Check this code that I've wrote to see if it fits your needs:
Now you have more codes to study
Check the code in details:
This section applies to the items at the left side:
Quote
if offsetFromCenter<=-1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
This one to the items at the right side:
Quote
elseif offsetFromCenter>=1 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
And this one to the center
Quote
self:zoom(0.55+(0.5-(math.abs(offsetFromCenter)*0.55))); \
self:x(1.0*offsetFromCenter*178); \
end;\
end;
Check this code that I've wrote to see if it fits your needs:
Quote
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if offsetFromCenter<0 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
elseif offsetFromCenter>0 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
else \
self:zoom(1)); \
self:x(0); \
end;\
end;
if offsetFromCenter<0 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178-33); \
elseif offsetFromCenter>0 then \
self:zoom(0.75); \
self:x(1.0*offsetFromCenter*178+33); \
else \
self:zoom(1)); \
self:x(0); \
end;\
end;
Now you have more codes to study
Post #8 · Posted at 2018-09-16 07:44:36pm 5.6 years ago
SaikioM | |
---|---|
Member | |
30 Posts | |
Not Set | |
Reg. 2015-04-20 | |
Thank you for the help again, after a lot of tries with those codes finally got rid of the annoying zoom in and out effect when you change the song, using the 2nd code from ZTS. But now I need the spacing from the center item.
This is the actual code:
The wheel now look like this:
The zooming effect when you change the songs is exactly what I'm looking for, but cannot find a way to get the spacing to work.
This is the actual code:
Quote
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter) < .5 then \
self:zoom(0.10+math.cos(offsetFromCenter*math.pi/2)); \
else \
self:zoom(0.75); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
if math.abs(offsetFromCenter) < .5 then \
self:zoom(0.10+math.cos(offsetFromCenter*math.pi/2)); \
else \
self:zoom(0.75); \
end;\
self:x(1.0*offsetFromCenter*178); \
end;
The wheel now look like this:
The zooming effect when you change the songs is exactly what I'm looking for, but cannot find a way to get the spacing to work.
Post #9 · Posted at 2018-09-16 11:09:35pm 5.6 years ago
ZTS | |
---|---|
Member | |
139 Posts | |
Not Set | |
Reg. 2015-01-13 | |
"But enough talk! Have at you!" |
Last updated: 2018-09-16 11:21pm
Here's a super unoptimized version.
1. I noticed you were using math.abs(offsetFromCenter) < .5 instead of math.abs(offsetFromCenter) < 1, so I changed math.pi/2 to math.pi so the cosine starts and ends at .5.
2. You are adding .10 to the formula, the way the cosine formula works is that it should add to your existing zoom. If you want it to zoom in less you can divide the result of math.cos() by some number instead. For example, .75+(math.cos(offsetFromCenter*math.pi)/4
3. the self:x(offsetFromCenter*374) line is based on the offset of the left and right unzoomed jackets. To be honest, I don't really get why it's 378 myself, but it's something along the lines of spacing (currently 178) plus offset (Currently +100 and -100) multiplied by 2 for reasons I don't know... It has something to do with the (-.5 < x <.5) restriction, because it was at 278 when the restriction was (-1 < x <1)
In simple terms, if you change the offset to -150 and +150, make sure you change the value in the self:x() under the zoom formula to separation + offset*2. For Example, self:x(offsetFromCenter*178+150) on the bottom conditional means the top has to be self:x(offsetFromCenter*478) becuase 178+150*2 = 478.
Anyway, here's the code.
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter) < .5 then \
self:zoom(.75+math.cos(offsetFromCenter*math.pi)); \
self:x(offsetFromCenter*378); \
else \
if offsetFromCenter >= .5 then \
self:x(offsetFromCenter*178+100); \
elseif offsetFromCenter <= -.5 then \
self:x(offsetFromCenter*178-100); \
end; \
self:zoom(.75); \
end;\
end;
1. I noticed you were using math.abs(offsetFromCenter) < .5 instead of math.abs(offsetFromCenter) < 1, so I changed math.pi/2 to math.pi so the cosine starts and ends at .5.
2. You are adding .10 to the formula, the way the cosine formula works is that it should add to your existing zoom. If you want it to zoom in less you can divide the result of math.cos() by some number instead. For example, .75+(math.cos(offsetFromCenter*math.pi)/4
3. the self:x(offsetFromCenter*374) line is based on the offset of the left and right unzoomed jackets. To be honest, I don't really get why it's 378 myself, but it's something along the lines of spacing (currently 178) plus offset (Currently +100 and -100) multiplied by 2 for reasons I don't know... It has something to do with the (-.5 < x <.5) restriction, because it was at 278 when the restriction was (-1 < x <1)
In simple terms, if you change the offset to -150 and +150, make sure you change the value in the self:x() under the zoom formula to separation + offset*2. For Example, self:x(offsetFromCenter*178+150) on the bottom conditional means the top has to be self:x(offsetFromCenter*478) becuase 178+150*2 = 478.
Anyway, here's the code.
Quote
ItemTransformFunction=function(self,offsetFromCenter,itemIndex,numItems) \
if math.abs(offsetFromCenter) < .5 then \
self:zoom(.75+math.cos(offsetFromCenter*math.pi)); \
self:x(offsetFromCenter*378); \
else \
if offsetFromCenter >= .5 then \
self:x(offsetFromCenter*178+100); \
elseif offsetFromCenter <= -.5 then \
self:x(offsetFromCenter*178-100); \
end; \
self:zoom(.75); \
end;\
end;
Post #10 · Posted at 2018-09-16 11:58:45pm 5.6 years ago
SaikioM | |
---|---|
Member | |
30 Posts | |
Not Set | |
Reg. 2015-04-20 | |
I'm urdestanding this a lot better now, thank you adjusted zoom and distance and seems to work fine, I'll keep experimenting with this a little bit more.
Post #11 · Posted at 2018-09-17 06:18:51am 5.6 years ago
razorblade | |
---|---|
Member | |
1,099 Posts | |
Not Set | |
Reg. 2011-03-01 | |
Here is a blank theme for you to see the music wheel design of your choice based from your mock-up pic.
Get it here
Get it here
Post #12 · Posted at 2018-09-19 02:10:17am 5.6 years ago
SaikioM | |
---|---|
Member | |
30 Posts | |
Not Set | |
Reg. 2015-04-20 | |
Many thanks I'll check that out and try to make some new things, actually I made another music select screen before this, using previews videos in the same way that some Pump themes does but decided to scrap it because the preview videos get off sync with the music so easily.