Pano2VR 5 and Responsive Skin design
Posted: Sat Dec 19, 2015 8:43 pm
I thought I would start this thread as there are some different approaches to responsive design and how to do it.
With the logic block Pano2VR 5 can detect screen width, height and now Is Mobile.
The Logic Block, the same as Multi resolution looks at logical screen sizes, example and iPad 2 and Air both have a logical screen size of 1024 x 768px even though the iPad Air screen resolution is much higher.
This said lets look at How to do it.
Images, do you scale them of change them?
Hears the deal, a 100px square image scaled down to X:0.5 and Y:0.5 will still have 100px but now they will be compressed.
If X and Y are scaled to 1.5 then it will look pixelated as the square now does not have enough pixels for the new size.
So in this case you can produce different sized images all looking sharp at their size. Then use the logic block to show and hide them.
Here's a quick intro to the comparisons.
Equal To: =
More Than: >
Less Than: <
Then there are combinations such as: <=, less than or equal to.
So if you wanted to show element A until the screen width went below 1024px then show element B. Then when below 960px show element C.
The visible logic block for each element would look like this.
Element A
This will be set to visible by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation:
Visible: false
Element B
This will be set to hidden by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Visible: true
Element C
This will be set to hidden as default
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Visible: true
Looking at the above, Element B will only be visible between screen width 960px to 1024px
This is great for large images, but if the image is not changing size that much then you can use scale, in fact testing the skin editor the scaling works quite well. This has the advantage of having only one element/image.
So lets look at the above but this time look at scaling.
The element with its default scale set to X: 1.00 & Y: 1.00
First Expression
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Scale: X: 0.8 and Y: 0.8
Second Expression, this is added by clicking the green + button, Add Expression.
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Scale: X: 0.5 and Y: 0.5
In summery I would probably only swop out images if there is a large difference in size, otherwise scaling works well.
The Is Mobile is looking for Android and iOS and is a good way to hide and show element such as unwanted buttons, example navigation and fullscreen. So under the visible logic block of the fullscreen button you would simply add:
Trigger: Is Mobile / Comparison: = / Value true / Operation:
Visible: false.
Testing, the skin editors live preview also gives the size of the window as you resize it so you can easily test elements resizing and hiding just by dragging it, however you wont be able to test Is Mobile until displayed on your mobile device. The good news it Pano2VR has its built in web server so you can just open your browser and login. If your not sure how to do this please have a kook at this link.
Regards,
Hopki
With the logic block Pano2VR 5 can detect screen width, height and now Is Mobile.
The Logic Block, the same as Multi resolution looks at logical screen sizes, example and iPad 2 and Air both have a logical screen size of 1024 x 768px even though the iPad Air screen resolution is much higher.
This said lets look at How to do it.
Images, do you scale them of change them?
Hears the deal, a 100px square image scaled down to X:0.5 and Y:0.5 will still have 100px but now they will be compressed.
If X and Y are scaled to 1.5 then it will look pixelated as the square now does not have enough pixels for the new size.
So in this case you can produce different sized images all looking sharp at their size. Then use the logic block to show and hide them.
Here's a quick intro to the comparisons.
Equal To: =
More Than: >
Less Than: <
Then there are combinations such as: <=, less than or equal to.
So if you wanted to show element A until the screen width went below 1024px then show element B. Then when below 960px show element C.
The visible logic block for each element would look like this.
Element A
This will be set to visible by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation:
Visible: false
Element B
This will be set to hidden by default
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Visible: true
Element C
This will be set to hidden as default
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Visible: true
Looking at the above, Element B will only be visible between screen width 960px to 1024px
This is great for large images, but if the image is not changing size that much then you can use scale, in fact testing the skin editor the scaling works quite well. This has the advantage of having only one element/image.
So lets look at the above but this time look at scaling.
The element with its default scale set to X: 1.00 & Y: 1.00
First Expression
Trigger: Player Width / Comparison: <= / Value 1024 / Operation: And
Trigger: Player Width / Comparison: > / Value 960 / Operation:
Scale: X: 0.8 and Y: 0.8
Second Expression, this is added by clicking the green + button, Add Expression.
Trigger: Player Width / Comparison: <= / Value 960 / Operation:
Scale: X: 0.5 and Y: 0.5
In summery I would probably only swop out images if there is a large difference in size, otherwise scaling works well.
The Is Mobile is looking for Android and iOS and is a good way to hide and show element such as unwanted buttons, example navigation and fullscreen. So under the visible logic block of the fullscreen button you would simply add:
Trigger: Is Mobile / Comparison: = / Value true / Operation:
Visible: false.
Testing, the skin editors live preview also gives the size of the window as you resize it so you can easily test elements resizing and hiding just by dragging it, however you wont be able to test Is Mobile until displayed on your mobile device. The good news it Pano2VR has its built in web server so you can just open your browser and login. If your not sure how to do this please have a kook at this link.
Regards,
Hopki