Adabru Markup compatibility - adabru/GitTraining GitHub Wiki

[TOC]

2D-Spiel

Cocos2D JS

Cocos2D JS™ ist eine 2D Game-Engine für Windows, Android, … . Ein Beispiel dafür ist MoonWarriors.

MoonWarriors Screenshot

Scene, Node, Sprite, Menu

Der Kern von Cocos2D JS™ Spielen besteht aus den Komponenten @Scene, @Node, @Sprite und @Menu.

Menü Hi Nikita!

Menü Hi Tim Top! :)

Menü

Ein Spiel ist in mehrere @Scene aufgeteilt, die nacheinander durchlaufen werden.

scenes

Das Beispiel-Bild zeigt, dass es eine @Scene am Anfang gibt (die Intro-@Scene). Dann wird das Menu gezeigt, wo man Level 1 auswählen kann. Wenn man Level 1 gewinnt, kommt man in die Übergangs-@Scene Cutscene 1, wo zum Beispiel "Level 1 bestanden!" steht. Danach kommt man nach Level 2. Wenn man ein Level verliert, kommt man in die Losing cutscene.

In der @Scene befinden sich die sichtbaren Spielobjekte. Wenn sich ein Spielobjekt bewegen kann (so wie die kleinen Figuren oben im Bild), dann ist es ein @Sprite. Wenn es sich nicht bewegen kann (so wie der Punktestand im Bild), dann ist es ein @Node.

// Objekte zu einer Scene hinzufügen

var scene = new cc.Scene()

scene.addChild(title_node)
scene.addChild(highscore_node)
scene.addChild(enemy_sprite)

Ein @Sprite hat folgende Eigenschaften:

`@anchor`

sprite anchor

// links
sprite.anchorX = 0
sprite.anchorY = 0

// mitte
sprite.anchorX = 0.5
sprite.anchorY = 0.5

// rechts
sprite.anchorX = 1
sprite.anchorY = 1

`@color`

sprite color

// links
sprite.color = cc.color(255, 0, 0)

// mitte
sprite.color = cc.color(0, 255, 255)

// rechts
sprite.color = cc.color(123, 123, 123)

`@opacity`

sprite opacity

// ganz sichtbar
sprite.opacity = 1.0

// halb sichtbar
sprite.opacity = 0.5

// durchsichtig
sprite.opacity = 0

`@rotation`

sprite rotation

// links
sprite.rotation = 0

// mitte
sprite.rotation = 90

// rechts
sprite.rotation = 240

`@scale`

sprite scale

sprite.scaleX = 2
sprite.scaleY = 0.5

`@skew`

sprite skew

sprite.skewX = 45

`@position`

sprite position

// links
sprite.x = 0
sprite.y = 0

// rechts
sprite.x = 50
sprite.y = 100

`@zIndex`

sprite zindex

// links
sprite.zIndex = 2

// mitte
sprite.zIndex = 7

// rechts
sprite.zIndex = 42

Einen @Sprite erzeugen und in die @Scene setzen, kann so aussehen:

var mysprite = cc.Sprite.create("irgend_ein_bild.jpg")

// Nach oben links schieben:
mysprite.setPosition(0, scene.height)
// Größer machen:
mysprite.setScale(2.5)
// Drehen:
mysprite.setRotation(60)

scene.addChild(mysprite)

Installation

Um den Code eines Spieles zu schreiben, ist ein Programm zum Schreiben nötig. Ein modernes Programm erleichtert die Arbeit. Eine gute Wahl ist Atom™.

`Atom™` installieren

Zuhause kann man von https://atom.io herunterladen
In der Schule kann man die portable Version von github
Danach den Download-Ordner öffnen

`zip`-Datei entpacken

unzip

`Atom™` starten

start atom

Verknüpfung erstellen

desktop

Zunächst das erste kleine Programm:

Projektordner erstellen ⇖
Cocos2D JS™ Download, Full Version, v3.10 ⇖
cocos2d-js-v3.10.js↑ und HelloWorld.png↑ in den Projektordner kopieren ⇖
Atom™ starten
Folgenden Code hineinkopieren:

```↑ ./downloads/examples/beispiel_sprite.html nocomments

Hier noch die Erklärungen:

```html
```↑ ./downloads/examples/beispiel_sprite.html

- Datei im Projektordner als `MeinSpiel.html↑` speichern
- `MeinSpiel.html↑` im Browser öffnen [⇖]((./images/cocos_tobrowser.gif))



### Action

Um ein `@Sprite` zu beleben, verwendet man `@Action`. Es gibt viele verschiedene `@Action`.

|Action
`@moveBy` | Bewegen
`@blink` | Blinken
`@fadeTo` | Ein- und Ausblenden
`@rotateBy` | Drehen
`@scaleTo` | Vergrößern oder Verkleinern
…|…

![Action](./images/action.gif)

```js
// In 0.5 Sekunden einmal rundherumdrehen:
var drehen = cc.rotateBy(0.5, 360)
// Danach in 0.2 Sekunden 20 Pixel nach oben bewegen:
var nachoben = cc.moveBy(0.2, 0, 20)
// In 0.5 Sekunden um 10% Vergrößern
var groesser = cc.scaleBy(0.5, 1.1, 1.1)

// Aktion anwenden:
mysprite.runAction(drehen)
mysprite.runAction(nachoben)
mysprite.runAction(groesser)

Um mehrere @Action nacheinander auszuführen, sollte man sie in in eine @Sequence packen.

var nacheinander = cc.sequence(drehen, nachoben, groesser)

mysprite.runAction(nacheinander)

Um mehrere @Action gleichzeitig auszuführen, sollte man sie in in eine @Spawn packen.

var gleichzeitig = cc.spawn(drehen, nachoben, groesser)

mysprite.runAction(gleichzeitig)

Um eine @Action ohne Ende zu wiederholen, verwendet man repeatForever.

mysprite.runAction(gleichzeitig.repeatForever())

Zum Ausprobieren:

Das Bild als spitze.jpg↑ in den Projektordner speichern ⇖
Folgenden Code als MeinSpiel.html↑ speichern:

```↑ ./downloads/examples/beispiel_action.html nocomments

Erklärungen:

```html
```↑ ./downloads/examples/beispiel_action.html

- Im Browser die Taste F5 zum Neuladen drücken

### Events

Es fehlt die Steuerung. Auf einem PC verwendet man Maus und Tastatur, vielleicht auch einen Joystick oder ein Gamepad. Auf einem Smartphone verwendet man den Finger, schütteln und kippen.

Die Steuerung in `Cocos2D JS™` läuft so ab.

- → Man klickt auf eine Stelle
- → Die Game-Engine merkt das
- → Die Game-Engine führt eine Funktion aus, die wir ihr gegeben haben
- → Unsere Funktion bewegt die Objekte, dreht sie, …

Das gleiche gilt auch für Tastatur.

```js
// Auf Mausklick achten:
var listener = {}


// Typ der Steuerung:
listener.event = cc.EventListener.MOUSE


// Wenn eine Maustaste nach unten gedrückt wird:
listener.onMouseDown = function () {

  // Sprite nach rechts bewegen:
  sprite.runAction( cc.moveBy(0.5, 10, 0) )
}


// Wenn eine Maustaste losgelassen wird:
listener.onMouseUp = function () {

  // Sprite nach oben bewegen:
  sprite.runAction( cc.moveBy(0.5, 0, 10) )
}


// Die Steuerung anwenden:
cc.eventManager.addListener(listener, 1)

Das lässt sich auch kürzer schreiben

cc.eventManager.addListener({

  event: cc.EventListener.MOUSE,

  onMouseDown:  function () {
    sprite.runAction( cc.moveBy(0.5, 10, 0) )
  },

  onMouseUp: function () {
    sprite.runAction( cc.moveBy(0.5, 0, 10) )    
  }

}, 1)

Für Tastatur sieht das so aus:

cc.eventManager.addListener({

  event: cc.EventListener.KEYBOARD,

  onKeyPressed:  function () {
    sprite.runAction( cc.moveBy(0.1, 5, 0) )
  },

  onKeyReleased:  function () {
    sprite.runAction( cc.moveBy(0.1, 0, 5) )
  },

}, 1)

Wenn man einzelne Tasten unterscheiden möchte:

cc.eventManager.addListener({

  event: cc.EventListener.KEYBOARD,

  onKeyPressed:  function (keyCode) {
    sprite.runAction( cc.moveBy(0.1, 5, 0) )
  },

}, 1)

Der keyCode ist von der gedrückten Taste abhängig.

⎡./markup/embed/keycode.html

cc.eventManager.addListener({

  event: cc.EventListener.KEYBOARD,

  onKeyPressed:  function (keyCode) {
    switch(keyCode) {
      case 87/*W*/:
        sprite.runAction( cc.moveBy(0.1, 0, 10) )
        break
      case 65/*A*/:
        sprite.runAction( cc.moveBy(0.1, -10, 0) )
        break
      case 83/*S*/:
        sprite.runAction( cc.moveBy(0.1, 0, -10) )
        break
      case 68/*D*/:
        sprite.runAction( cc.moveBy(0.1, 10, 0) )
        break
    }
  },

}, 1)

So ähnlich kann man auch die Position eines Mausklicks verwenden:

cc.eventManager.addListener({

  event: cc.EventListener.MOUSE,

  onMouseDown: function (event) {
    var position = event.getLocation()
    sprite.runAction( cc.moveTo(0.5, position) )
  }

}, 1)

Hier ist nochmal ein komplettes Beispiel zum selber probieren:

↑js ↑ ./downloads/examples/beispiel_event.html

Nachschlagen

Das original Handbuch.
Alle Elemente, die man zum Programmieren verwenden kann (die sogenannte @API).
Mehr als 100 kleine Beispiele (der Beispielcode ist im Kontext von director._runningScene._children[0]).
Videos von Sonar Systems. In den Videos wird allerdings eine andere Version von Cocos2D™ verwendet.
Game of Life Tutorial

Cocos2D JS™ download.

Erste Beispiele sind folgende:

Hallo-Beispiel
Sprite-Beispiel
Action-Beispiel
Mausklick-Beispiel

Adabru Markup compatibility - adabru/GitTraining GitHub Wiki

2D-Spiel

Cocos2D JS

Scene, Node, Sprite, Menu

@anchor

@color

@opacity

@rotation

@scale

@skew

@position

@zIndex