Detecting Device or Screen Size
Watcher55
12 Aug 2016, 07:20In order to make the game look better on a large screen I have a fairly large bottom margin, but I've noticed that when playing on an iPhone this causes an infinite dance up and down when the on-screen keyboard is visible, making it nearly unplayable.
I figure I can fix that if I remove the bottom margin if the game knows it is being played on a phone. Any of you experts know if this is possible?
The Pixie
12 Aug 2016, 14:04The simple way would be to add a command that lets the play toggle between the two.
The difficult way would be though JavaScript. Have a string attribute that a JavaScript function. Output the string in game.start, then invoke the function. The JavaScript function could (I think) get the screen size, and change the display accordingly. How confident are you in JavaScript?
tvisarl
12 Aug 2016, 17:41How can you play a Quest game on an iPhone?
Thierry
Watcher55
12 Aug 2016, 22:08Thanks Pixie, I am very confident in Javascript when I copy and paste the code and it works first time ;-)
In this case unless it's a general problem more than one other person cares about (probably only a problem for format-obsessed people who want big bottom margins...), and given how many people probably try to play on a phone, I might stick to the "ask the user" method!
Thierry, playing online seems to work on phones the same as anywhere else, though personally I've only tried an Android phone.
Watcher55
13 Aug 2016, 02:31Hmmm, I thought setting game.setcustompadding = False would work, however no combination of these has any effect on the user interface -- whatever it is set to in game: interface seems immune to changing in the game script. Unless I'm doing something dense.
game.setcustompadding = False
game.custompaddingbottom = 20
InitUserInterface
tvisarl
13 Aug 2016, 06:17Does that mean that you just connect to textadventures.co.uk via the Internet ?
Thierry
Watcher55
13 Aug 2016, 11:23Yes, and play online. Doesn't seem to work too well for long games though, because they slow down a lot as you progress (I think the ever-growing map is the cause).
The Pixie
15 Aug 2016, 06:59InitUserInterface
is a blank function that you can override (if editing offline) to do all your custom formating. Calling InitInterface
should work - that is where the width is set. Alternatively:
JS.setGameWidth (game.customwidth)
Watcher55
15 Aug 2016, 07:19Now that's plain weird.
If I set the design interface to use custom padding with a bottom margin of 200 and do this:
if (isphone>0) {
// Set small screen
mysex = Left(mysex, isphone-1)
game.setcustompadding = False
game.custompaddingbottom = 20
InitInterface
}
Then it has no effect on the format, which stays "big bottom margin" no matter what. But if in the design interface I set it to not use custom padding and do it the other way round:
if (isphone>0) {
mysex = Left(mysex, isphone-1)
}
else {
game.setcustompadding = True
game.custompaddingbottom = 200
InitInterface
}
Then it works as desired, with no big bottom margin only if the user specifies small screen.
Of course doing that exact test with InitInterface instead of InitUserInterface is the only thing I didn't try before!
Pertex
15 Aug 2016, 13:55Quest uses two tempates, one for "normal" browsers and one for mobile devices. Which one do you see in your iphone? Is there a + next to the command bar?
Watcher55
16 Aug 2016, 07:14Yes (shows how observant I am).
That implies Quest knows... so do you know how we can extract that knowledge?
Pertex
16 Aug 2016, 08:33Alex told me how this works, but I forgot, sorry. But you can check with Javascript if the element tabButton exists. Then it is mobile
Watcher55
17 Aug 2016, 00:25OK I give up. I found this useful discussion:
http://textadventures.co.uk/forum/quest/topic/4995/is-there-a-way-for-the-game-to-check-whether-its-being-played-online-or-not
which has this relevant piece of javascript:
var elem = document.getElementById('tabButton');
if (elem!=null){
mobile=true;
}
Looks good, except I can't for the life of me find how to return the value of "mobile" from the javascript to my Quest script itself. All the examples I've found in the forum on request (RunScript, ...), the script just does stuff, never returns a value.
Pertex
17 Aug 2016, 05:30This JS-function calls the Quest function checkMobile after checking mobile devices
function testMobile() {
var check = false;
var elem = document.getElementById('tabButton');
if (elem!=null){
check=true;
}
ASLEvent("checkMobile", check);
return false;
}
<function name="checkMobile" parameters="answer">
...
The Pixie
17 Aug 2016, 07:34Looks good, except I can't for the life of me find how to return the value of "mobile" from the javascript to my Quest script itself. All the examples I've found in the forum on request (RunScript, ...), the script just does stuff, never returns a value.
It is not trivial...
http://docs.textadventures.co.uk/quest/guides/javascript.html
Watcher55
18 Aug 2016, 08:23Thanks for all your help.
Not trivial, indeed. I'd seen that page and not understood the solution...
Having implemented the phone-detector, however, it doesn't actually make much difference. Playing on a phone, at least one with a small screen, is difficult. So much for my OCD.
Anyway, for anyone who cares here is the solution I used, so something analogous will work:
- To your Javascripts (under the Advanced tab) add this javascript:
function detectDevice() {
var elem = document.getElementById('tabButton');
if (elem!=null){
ASLEvent("DeviceCallback", "Phone");
} else {
ASLEvent("DeviceCallback", "PC");
}
}
- To your functions in your Quest game add this function (note this assumes setcustompadding is not true in your Game: Interface setup):
<function name="DeviceCallback" parameters="devicekind">
if (devicekind="PC") {
game.setcustompadding = True
game.custompaddingbottom = 200
JS.setGamePadding (game.custompaddingtop, game.custompaddingbottom, game.custompaddingleft, game.custompaddingright)
}
else {
game.isOnPhone = true
}
</function>
You can then use the game.isOnPhone (defined as a boolean attribute) in your game to tell what the user is on, e.g. if you want to change the way you do things on different device types.
- Finally, to InitUserInterface add this fragment:
request (RunScript, "detectDevice")
(Note: if InitUserInterface exists in Core.aslx, either edit it there, or delete from there before adding to your own functions in Quest: it won't allow both).