Donnerstag, 7. Januar 2016

Create games for Nintendo's New 3DS Browser (HTML5) with GameMaker

Hi Guys,
this time I deald with trying to get a game
running in the browser on the N3DS, which was written with the GameMaker.

The Nintendo New 3DS is Nintendo's current handheld, which is able to display on its upper screen 3-dimensional images without glasses and has a lower touchscreen.


I'm going to share my findings with you here so that you can get games running on the N3DS, too.

My first step:
I want to find out at runtime whether the game is currently running on a N3DS, so that the game can adapt to this situation.


 I have written a small HTML5 application with GameMaker that displays some information about the device / program / browser, on / in which it is running. I've adjusted the resolution of this application to the 3DS touch screen size. The device has a resolution of 2 × 400 × 240 px, ie 400 × 240 px for each eye.

Just open the following address on your N3DS to see the information:

badtoxic.de/deviceTest

This information shall include the following:

1. As OS iOS is detected!
2. There is exactly one gamepad identified with the description"New Nintendo 3DS Controller".
(Done with GameMaker: Studio in version 1.4.1657)


This is what my little test application displays


So I wrote a script that determines whether it is a 3DS:

1:  /// check_gamepad_for_3ds();  
2:  // This script checks if there is exactly one gamepad that is named  
3:  // "(New) Nintendo 3DS Controller", like it's the case when the game was launched in the (New) Nintendo 3DS Browser.  
4:  // This script will also support detecting the old 3DS, even while its Browser doesn't support HTML5 (yet).  
5:  // Returns true if it's any kind of Nintendo 3DS.  
6:  // by BadToxic  
7:  global.is_3ds = false; // Is any kind of 3DS  
8:  global.is_o3ds = false; // Is the old 3DS model (also 2DS)  
9:  global.is_n3ds = false; // Is the new 3DS model  
10:  if (gamepad_is_supported()) {  
11:    if (gamepad_get_device_count() == 1) {  
12:      if (gamepad_is_connected(0)) {  
13:          
14:        var gamepad_description = gamepad_get_description(0);  
15:          
16:        global.is_o3ds = gamepad_description == "Nintendo 3DS Controller";  
17:        global.is_n3ds = gamepad_description == "New Nintendo 3DS Controller";  
18:        global.is_3ds = global.is_o3ds || global.is_n3ds;  
19:      }  
20:    }  
21:  }  
22:  return global.is_3ds;  

It should be self-explanatory in this context for people being familiar with the GameMaker scripting language or general programming.
On the screenshot you can see the
result in the OS tab - it works.

IMPORTANT (for GameMaker users):
The gamepad is not available in the first step!
It's best to use an alarm [0] = 2 event, or something like that, to this test a little bit later.
And no - the
async system event is not triggered, which can tell you about a gamepad just plugged in.

Then I also experimented with a game of mine on the N3DS, which I had already written for a browser. It seemed to me as would ten small scaled sprites slow down the game too much. So I would first start with only a few unscaled sprites or even geometric shapes only, then it might work well.
In the mentioned game it didn't help to remove all unnecessary things like particles or graphics... The basic elements were already too complex.


However, I think I will program something without GameMaker natively for the 3DS in C first - I already did a little Hello World program and I was able to run it on my device. ;) Maybe I'll tell you more about this here later.

 Other important findings for the HTML5 variant:
- Only the touch screen is usable.
- You can also control with touch.
  But this
unfortunately also brings up the lower browser bar - uncool!
- By pressing "digital down" once you get a fullscreen.
- The digital pad then is freely usable according to other gamepads.
- The A button can be used in the game.
   All other buttons trigger a function in the browser.
(
I have not yet explored as what button the A button is recognized, but I guess it's the start button.)

Do you now want to try it yourself?
Have fun and good luck!

See also:

Informationen zum Browser des Nintendo 3DS
Spezifikation von Nintendos altem 3DS Internetbrowser

Spiele mit dem GameMaker für Nintendos New 3DS Browser erstellen (HTML5)

Hallo Leute,
diesmal habe ich mich damit beschäftigt, wie man ein Spiel im Browser auf dem N3DS zum Laufen bekommt, welches mit dem GameMaker geschrieben wurde.

Der Nintendos New 3DS ist Nintendos aktueller Handheld, welcher in der Lage ist auf seinem oberen Bildschirm 3-dimensionale Bilder ohne Brille anzuzeigen und einen unteren Touchscreen besitzt.

Ich werde meine Erkenntnisse hier mit euch teilen, damit ihr selbst Spiele auf dem N3DS zum Laufen bekommen könnt.

Mein erster Schritt:
Ich möchte zur Laufzeit herausfinden, ob das Spiel aktuell auf einem N3DS ausgeführt wird, damit sich das Spiel an diese Situation anpassen kann.

Ich habe mit dem GameMaker eine kleine HTML5 Anwendung geschrieben, die etliche Informationen über das Gerät / Programm / Browser anzeigt, auf / in dem sie ausgeführt wird. Die Auflösung habe ich fest auf die 3DS TouchScreen Größe eingestellt. Das Gerät besitzt eine Auflösung von 2 × 400 × 240 px, d. h. 400 × 240 px für jedes Auge.

Öffnet einfach folgende Adresse auf eurem N3DS um die Infos auszulesen:

badtoxic.de/deviceTest

Daraus gehen folgende Informationen hervor:

1. Als OS wird iOS erkannt!
2. Es wird genau ein Gamepad erkannt mit der Bezeichnung "New Nintendo 3DS Controller".
(Verwendet wurde GameMaker: Studio in der Version 1.4.1657)

Dies zeigt mein kleines Test-Programm an


Ich habe also ein Skript geschrieben, welches feststellt, ob es sich um einen 3DS handelt:

1:  /// check_gamepad_for_3ds();  
2:  // This script checks if there is exactly one gamepad that is named  
3:  // "(New) Nintendo 3DS Controller", like it's the case when the game was launched in the (New) Nintendo 3DS Browser.  
4:  // This script will also support detecting the old 3DS, even while its Browser doesn't support HTML5 (yet).  
5:  // Returns true if it's any kind of Nintendo 3DS.  
6:  // by BadToxic  
7:  global.is_3ds = false; // Is any kind of 3DS  
8:  global.is_o3ds = false; // Is the old 3DS model (also 2DS)  
9:  global.is_n3ds = false; // Is the new 3DS model  
10:  if (gamepad_is_supported()) {  
11:    if (gamepad_get_device_count() == 1) {  
12:      if (gamepad_is_connected(0)) {  
13:          
14:        var gamepad_description = gamepad_get_description(0);  
15:          
16:        global.is_o3ds = gamepad_description == "Nintendo 3DS Controller";  
17:        global.is_n3ds = gamepad_description == "New Nintendo 3DS Controller";  
18:        global.is_3ds = global.is_o3ds || global.is_n3ds;  
19:      }  
20:    }  
21:  }  
22:  return global.is_3ds;  

Es sollte selbsterklärend sein in diesem Kontext, wenn man sich mit etwas GameMaker Skriptsprache bzw. Programmierung allgemein auskennt, auch wenn man die englischen Kommentare nicht lesen kann.
Auf dem Screenshot seht ihr im OS-Tab auch das Ergebnis - es funktioniert.

WICHTIG (für GameMaker-Kenner):
Das Gamepad ist nicht bereits im ersten Step verfügbar!
Am besten ihr nutzt ein alarm[0] = 2 - Event, oder dergleichen, um diesen Test etwas heraus zu zögern.

Und nein - der System-Async-Event wird nicht getriggert, über den man normal das Anschließen eines Gamepads wahrnehmen kann.

Ich habe dann auch mit einem Spiel von mit experimentiert auf dem N3DS, welches ich bereits für einen Browser geschrieben hatte. Mir schien es so, als würden bereits zehn kleine skalierte Sprites das Spiel zu stark einbrechen lassen. Also würde ich zunächst nur mit wenigen unskalierten Sprites oder gar nur geometrischen Formen beginnen, dann klappt das auch.
Bei genanntem Spiel hat es jedenfalls nicht mehr geholfen alles unnötige zu streichen, wie Partikel oder Grafiken die nur der Verschönerung dienen... Die grundlegenden Elemente waren einfach bereits zu komplex.

Allerdings werde ich glaub erstmal ohne GameMaker nativ etwas für den 3DS in C programmieren - ein Hello World konnte ich bereits auf meinem Gerät ausführen. ;) Dazu hier vielleicht später mehr.

Sonstige wichtige Erkenntnisse für die HTML5 Variante:
- Nur Touchscreen nutzbar.
- Dafür kann man auch mit Touch steuern.
  Dieser bringt aber leider auch die untere Browser Leiste zum Vorschein - uncool!
- Drückt man einmal "Digital Unten" bekommt man ein Vollbild.
- Das digitale Steuerkreuz ist dann im Spiel frei Nutzbar entsprechend anderer Gamepads.
- Der A-Button kann im Spiel genutzt werden.
  Alle anderen Buttons lösen eine Funktion im Browser aus.
(Als was der A-Button erkannt wird, habe ich noch nicht erforscht, aber ich befürchte als Start-Button.)

Bekommt ihr jetzt Lust es selbst auch mal zu probieren?
Viel Spaß und viel Erfolg!

Siehe auch:
Informationen zum Browser des Nintendo 3DS (Englisch)
Spezifikation von Nintendos altem 3DS Internetbrowser (Englisch)