Das erste kleine Spiel

Das Tutorial entstand ursprünglich nicht als Tutorial, sonder vielmehr als kleines Experiment. Ich wollte herausfinden, was sich in 10 Minuten mit DX Studio anstellen lässt und habe das ganze aufgenommen. Nun habe ich daraus ein Tutorial gemacht. Zu Orientierung empfielt es sich, das Video vorher einmal anzusehen (es gibt auch eine Version in vierfacher Geschwindigkeit). Hier geht es zum Video.

Für dieses Tutorial sind minimale Vorkenntnisse in DX Studio erforderlich, sollte aber auch ohne zu bewältigen sein. Dieses kleine Minispiel orientiert sich an meinem „Happy new Year“-Spiel.

Als erstes erstellen wir eine 3D-Szene und in dieser 3D-Szene erstellen wir einen Zylinder mit Hilfe des -in DX Studio integrierten- „Mesh-Generators“ dafür.

Nun müssen wir dafür sorgen, dass der Zylinder automatisch nach oben fliegt, sobald er erzeugt wird. Denn später im Spiel wird dieser automatisch erzeugt. Daher klicken wir mit der rechten Maustaste nun im „Meshes“-Tab auf unseren soeben erzeugten Zylinder und wählen „Edit Default-Script“. Jetzt sollte sich der Script-Editor öffnen.

In der ersten Zeile deklarieren und definieren wir eine Variable, die die Geschwindigkeit angibt. Das ist hilfreich, wenn wir später die Geschwindigkeit dynamisch verändern möchten:

var speed;

Darunter folgt nun dieser Code:

function onInit()
{	
	object.posVelocity.y = speed;
}

onInit() ist ein Eventhandler, in dem wir definieren können, was passieren soll, sobald das Objekt initialisiert wird. In diesem Fall definieren wir object.posVelocity.y = speed. „object“ sollte klar sein, das ist das momentan Objekt, posVelocity gibt die Geschwindigkeit an, in der sich das Objekt in einer bestimmten Richtung bewegen soll. Deshalb das .y . Das Objekt bewegt sich also mit einer konstanten Geschwindigkeit von 1 auf der Y-Achse. Wenn es sich stattdessen nach unten bewegen soll, müssten wir einfach nur -1 verwenden. Brauchen wir aber hier nicht.

Das Schöne an posVelocity ist, dass sich das Objekt damit unabhängig von onUpdate() bewegt. Man sollte soweit es geht auf onUpdate() verzichten, denn umso mehr hier stattfindet umso schlechter fällt die Performance aus.

Ok, unter den onInit() Block folgt nun ein onClick()-Block:

function onClick()
{
	scene.object.Remove(object.id);
}

onClick() wird bei jedem Klick auf das Objekt ausgeführt. Hier entfernen wir das Objekt, sobald darauf geklickt wurde. Später werden wir den Teil noch erweitern.

Soweit ist dieses Script nun erstmal fertig. Gehen wir nun zum Script der Szene mit einem Klick auf scene_1.dxscene. Jetzt sollte sich ein neuer Tab im Code-Editor öffnen.

In der ersten Zeile definieren und deklarieren wir die Variable Points:

var Points = 0;

Darauf folgt ein onInit()-Block in dem wir einen Timer erzeugen:

function onInit()
{
	scene.setTimer("spawn", 1);
}

Man kann Timer entweder für die Szene erzeugen (scene.setTimer()) oder aber auch für ein einzelnes Objekt. Letzteres werden wir später noch machen. Man muss dann allerdings darauf achten, dass entsprechende Timer dann auch entweder nur in der Szene oder im Objekt abgefragt werden können. Der erste Parameter von setTimer() stellt den Namen des Timers dar, damit wir diesen später abfragen können. Der Zweite Parameter ist die Zeit in Sekunden, wann der Timer ausgeführt werden soll. Es sind auch Fließkommazahlen möglich.

Wofür dieser Timer ist und wie wir ihn abfragen schauen wir uns jetzt an:

function onTimer(timerID)
{
	if(timerID == "spawn")
	{
		var rndID = Math.random(0,999);
		scene.objectAdd("Cylinder_"+rndID, "Cylinder");
		scene.setTimer("spawn", 1);
	}
}

Das Event onTimer() wird immer dann ausgeführt, sobald irgendein Timer ausgelöst wurde. Deshalb müssen wir überprüfen, um welchen Timer es sich dabei handelt (if(timerID == „spawn“)). Danach wird eine Zufallszahl erzeugt, die wir für das Objekt als ID benutzen. Würden wir diese nicht verwenden, hätte jedes Objekt die gleiche ID und das würde später zu Problemen beim Löschen der Objekte führen. In der nächsten Zeile fügen wir das Objekt der Szene hinzu. Der erste Parameter gibt die ID des Objektes an und zweite den Typ des Objektes. Der Typ ist, vereinfacht gesagt, die ID des Meshes, und die ID des Meshes ist normalerweise einfach der Dateiname nur ohne Dateiendung ;). Nachdem wir das Objekt hinzugefügt haben, erzeugen wir wieder einen neuen Timer.

Gut, jetzt haben wir quasi schon die erste Hälfte geschafft. Starte das Ganze einfach mal mit F12 und Du wirst sehen, dass nun ein großer Zylinder nach oben fliegt und ein weiterer erzeugt wird. Mit einem Klick auf diesen verschwindet er auch wieder.

Als nächstes brauchen wir ein paar Spawnpunkte für die einzelnen Zylinder, damit wir diese zufällige an 10 festen Positionen erzeugen lassen können. Dafür erzeugen wir mit dem entsprechenden Mesh-Generator einen Würfel und nennen dieses „spawnpoint“. In der Objektliste sollte nun „spawnpoint_1“ erscheinen. Wir erzeugen und nun 9 weitere indem wir mit der rechten Maustaste auf das Objekt klicken und „Duplicate“. Daraufhin sollte „spawnpoint_2“ erscheinen und immer so weiter.

Ist das erledigt, können wir sie platzieren wir möchten. Ich habe sie einfach nebeneinander platziert. Danach wählen wir einfach das „camera_1“-Objekt aus, platzieren die Kamera so wie wir sie gern hätten und klicken oben im Menü auf das Kamerasymbol und wählen „Copy Viewport to Selected Camera“, was die momentane Spielkamera dort platziert, wo sich die Kamera des 3D Editors befindet.

Im „scene_1“-Script fügen wir nun noch etwas Code hinzu. Der folgende Code komm in den if()-Block des onTimer()-Events.

var rndSpawnID = UtilMath.randomIntRange(1, 10)
var spawnpoint = scene.objects['spawnpoint_'+rndSpawnID];
 
scene.objectAdd("Cylinder_"+rndID, "Cylinder", spawnpoint.pos);

rndSpawnID ist im Prinzip nur eine Zufallszahl zwischen 1 und 10 ist aber in der nächsten Zeile unabdingbar. Denn hier wird ein zufälliger Spawnpoint mithilfe dieser Zahl ausgewählt und gespeichert. Danach kommt auch schon objectAdd(), wo wir den Zylinder der Szene hinzufügen. Mit dem Unterschied, dass hier nun noch ein dritter Parameter angegeben ist spawnpoint.pos. Wie sich erahnen lässt, ist das die Position an dem der Zylinder erzeugt werden soll.

Das ganze onTimer()-Event sollte nun so aussehen:

function onTimer(timerID)
{
	if(timerID == "spawn")
	{
		var rndID = Math.random(0,999999);
		var rndSpawnID = UtilMath.randomIntRange(1, 10)
		var spawnpoint = scene.objects['spawnpoint_'+rndSpawnID];
 
		scene.objectAdd("Cylinder_"+rndID, "Cylinder", spawnpoint.pos);
		scene.setTimer("spawn", 1);
	}
}

Beim Ausführen sollten nun die Zylinder jede Sekunde an einem anderen Würfel erzeugt werden.