Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Werbeanzeige

1

03.03.2015, 18:05

HTML5, JS, Game-Frameworks - Anfang?

Guten Tag alle zusammen,
wie ihr vielleicht seht bin ich ein Frischling hier im Forum :-).

Ich bin sehr interessiert in der Spieleprogrammierung (ich studiere Angewandte Informatik und bin im 2. Semester). Speziell interessiere ich mich seit kurzem für die Entwicklung mit HTML5, JavaScript und CSS3. Ich weiß auch gar nicht mehr genau, wie ich darauf gekommen bin, aber die Plattformunabhängigkeit und die Möglichkeit ein paar kleinere Spiele zu entwickeln und diese eben gleich im Browser oder auf dem Smartphone zu spielen, reizt mich doch schon sehr! Also habe ich mich belesen, mich nochmal kurz mit HTML & CSS befasst und dann nach aktuellen Tutorials für JavaScript gesucht. Bei letzterem wurde ich leider nicht wirklich fündig, da würde ich mich freuen, wenn ihr mir da ein wenig unter die Arme greifen könnt (wobei, oben bei Links sollte sowas glaube ich auch zu finden sein, aber die Seite hat mich vorhin ziemlich erschlagen und ich guckte mir lieber erst das Forum an).

Naja auf jeden Fall will ich nichts kompliziertes machen, vielleicht erst ein kleines Snake-Spiel, ein kurzer 2D Plattformer usw.
Da soll es prinzipiell auch bleiben, ich mag mich mit Pixel Art beschäftigen und demnach sollen die Spiele in einem Retro/8-Bit Stil sein.

Mein Ziel ist ein STALKER-like 2D Spiel mit asynchronem Multiplayer... oooder ein Browsergame...

Die Unreal Engine 4 ist ja nun kostenlos, ist sowas damit auch möglich? Wenn ja, gibt es gute Tutorials? Weil außer diesem Flappy Bird Spiel hab ich da nichts wirklich gefunden, was meinen Wünschen entspricht. Mit Unity soll das ebenfalls möglich sein, dieses Programm ist ja nun schon länger auch kostenlos verfügbar, also erhoffe ich mir davon mehr Tutorials (vielleicht auch mal in der Muttersprache, Deutsch...).

Sonst gibt es ja diverse HTML5 Game Frameworks, davon habe ich mir nun 3 angeschaut. MelonJS, pixiJS und Phaser. Phaser gefällt mir von diesen noch am besten, weil es auf deren Seite am übersichtlichsten ist und das Forum ebenfalls einige Informationen bietet und es viele Tutorials dafür gibt. An MelonJS hat mir schon das Tutorial nicht gefallen, welches in meinen Augen nicht für einen Anfänger geschrieben ist, sondern für jemanden, der schon viel Ahnung davon hat. Somit habe ich es nicht geschafft, dieses Framework zum laufen zu kriegen. PixiJS hat mir da wieder besser gefallen, da haben die Examples usw. auch funktioniert...

Naja, was sagt ihr denn? Habt ihr Tipps, Links, kennt ihr Programme, Frameworks, Engines, ...?

Mit freundlichen Grüßen,
PaRaLLaX.

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

2

03.03.2015, 18:46

Um JS zu lernen hat es mir geholfen sich anzugucken wie z.B. Googles V8 Engine implementiert ist.
Das ist wichtig um zu verstehen wie die Objekte in JS eigentlich funktionieren (z.B. das prototyping).
Ansonsten besteht JS nur aus wenigen Schlüsselwörtern, was die Sprache sehr übersichtlich macht. Den Rest lernt man übers ausprobieren oder in dem man sich Code ansieht.

Nimm als Framework ruhig Phaser. Alternativ lautet das Schlüsselwort Canvas, plus bei Bedarf WebGL.
Ich habe eine eigene Implementierung die auf reinem WebGL aufbaut, das hat verschiedene Gründe die teilweise einfach Geschmackssache waren. Z.B. finde ich es merkwürdig dass bei Phaser gleich zig Member an die Standardobjekte geklebt sind, sowas wie "health" kann man sich auch selbst dran pappen. Machts irgendwie unsauber finde ich...
Falls du meine Implementierung mal sehen willst: GitHubu
Und hier wäre noch ein schon recht komplexe (unfertiges) Spiel mit Multiplayer über WebSockets/nodejs: ebenfalls GitHub

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

3

04.03.2015, 09:27

Um JS zu lernen hat es mir geholfen sich anzugucken wie z.B. Googles V8 Engine implementiert ist.
Das ist wichtig um zu verstehen wie die Objekte in JS eigentlich funktionieren (z.B. das prototyping).
Zum Lernen einer Sprache sich den entsprechenden Compiler/Interpreter anzuschauen ist, zumindest meiner Meinung nach, etwas übertrieben, mal abgesehen davon, dass man dafür ausreichend Kenntnisse in der Sprache benötigt, die für den Compiler/Interpreter verwendet wurde. _Wichtig_ ist es keines Falls, das zu machen.

Ansonsten besteht JS nur aus wenigen Schlüsselwörtern, was die Sprache sehr übersichtlich macht. Den Rest lernt man übers ausprobieren oder in dem man sich Code ansieht.
Aber leider sind die Schlüsselworte selbst nicht alles, was man von JavaScript (bzw. Programmiersprachen allgemein) wissen muss. Gerade in JavaScript gibt es viele Methoden unterhalb von Object (defineProperty/defineProperties, freeze, create, ...), Funktionen zur Interaktion mit dem DOM (classList, children vs. childNodes, Document.createElement, ...), automatische Typumwandlungen (gerade bei Bedingungen, welche Werte in false und welche in true umgewandelt werden), Methoden unterhalb von Funktionen (call, apply, bind, ...), implizite Variablen (arguments in Funktionen), Closures, die Prototype-Chain etc.
Weiterhin gibt es im Featureumfang der unterschiedlichen Browser gewisse Unterschiede, auf die bei der Programmierung mit JavaScript eingegangen werden muss (wozu diese bekannt sein müssen). Für einige der Unterschiede gibt es entsprechende Frameworks, die bspw. den Umgang mit dem DOM abstrahieren und Features ggf. emulieren (JQuery, Prototype, ...), man trifft oft genug aber auf Features, die dadurch nicht unbedingt abgedeckt, die aber dennoch in unterschiedlichen Browsern unterschiedlich implementiert sind, vor allem wenn es keine Features vom Anbeginn von JavaScript sind -> "vendor prefixes" (Pointer Lock, setCapture, Vollbild, ...).
Man muss nicht mit ausnahmslos allen Einzelheiten vertraut sein, um mit JavaScript Anwendungen (oder Spiele) umsetzen zu können, allerdings bringen einem einige der Features in bestimmten Situationen elegantere Lösungen.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

4

04.03.2015, 09:40

Um JS zu lernen hat es mir geholfen sich anzugucken wie z.B. Googles V8 Engine implementiert ist.
Das ist wichtig um zu verstehen wie die Objekte in JS eigentlich funktionieren (z.B. das prototyping).
Zum Lernen einer Sprache sich den entsprechenden Compiler/Interpreter anzuschauen ist, zumindest meiner Meinung nach, etwas übertrieben, mal abgesehen davon, dass man dafür ausreichend Kenntnisse in der Sprache benötigt, die für den Compiler/Interpreter verwendet wurde. _Wichtig_ ist es keines Falls, das zu machen.

Sorry ich meinte eher sich das Konzept anzusehen. Hilfreich ist das vor allem wenn man schon eine andere Sprache kann.
Wenn nicht kann es aber denke ich trotzdem hilfreich sein. Ich hatte damals eine schöne Grafik wie die V8 Objekte behandelt... finde ich gerade leider nicht mehr.

Ansonsten besteht JS nur aus wenigen Schlüsselwörtern, was die Sprache sehr übersichtlich macht. Den Rest lernt man übers ausprobieren oder in dem man sich Code ansieht.
Aber leider sind die Schlüsselworte selbst nicht alles, was man von JavaScript (bzw. Programmiersprachen allgemein) wissen muss. Gerade in JavaScript gibt es viele Methoden unterhalb von Object (defineProperty/defineProperties, freeze, create, ...), Funktionen zur Interaktion mit dem DOM (classList, children vs. childNodes, Document.createElement, ...), automatische Typumwandlungen (gerade bei Bedingungen, welche Werte in false und welche in true umgewandelt werden), Methoden unterhalb von Funktionen (call, apply, bind, ...), implizite Variablen (arguments in Funktionen), Closures, die Prototype-Chain etc.
Weiterhin gibt es im Featureumfang der unterschiedlichen Browser gewisse Unterschiede, auf die bei der Programmierung mit JavaScript eingegangen werden muss (wozu diese bekannt sein müssen). Für einige der Unterschiede gibt es entsprechende Frameworks, die bspw. den Umgang mit dem DOM abstrahieren und Features ggf. emulieren (JQuery, Prototype, ...), man trifft oft genug aber auf Features, die dadurch nicht unbedingt abgedeckt, die aber dennoch in unterschiedlichen Browsern unterschiedlich implementiert sind, vor allem wenn es keine Features vom Anbeginn von JavaScript sind -> "vendor prefixes" (Pointer Lock, setCapture, Vollbild, ...).
Man muss nicht mit ausnahmslos allen Einzelheiten vertraut sein, um mit JavaScript Anwendungen (oder Spiele) umsetzen zu können, allerdings bringen einem einige der Features in bestimmten Situationen elegantere Lösungen.

Ich bin erstmal wirklich von JS ausgegangen, nicht von DOM Manipulation usw.
Für die ganzen "Anhängsel" der Objekte gibt es gute Referenzen. Das ist dann nützlich wenn man verstanden hat dass alles Objekte sind.

5

08.03.2015, 15:44

Ich kann js so garnicht empfehlen, obwohl ich mehrere Spiele-Projekte damit (eines mit Phaser) umgesetzt habe.
Eine Sprache, in der

Quellcode

1
var that = this;
gültiger code und sinnvoll ist? WTF?

Wenn dir multiplattform wichtig ist, schau dir mal Haxe bzw als Framework Haxeflixelan. Das programmiert sich wie C#, ist typsicher und bietet eine unglaubliche Menge an Kompfortfunktionen und ein gutes Tutorial, bzw echt freundliche Leute im Support. Es kompiliert zu fast allen gängigen Plattformen : web über flash, bzw experimentellem HTML5, nativ Win, Mac und Linux, sowie zu Android und ios mobile.

So Far...
Laguna
Portfolio runvs.io | Gamejolt | itch.io | PEWN | Twitter

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

6

08.03.2015, 17:01

Wo ist groß der Unterschied zwischen

Quellcode

1
var that = this;

und

Quellcode

1
Typ that = this;

?

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

7

08.03.2015, 17:12

Wo ist groß der Unterschied zwischen

Quellcode

1
var that = this;

und

Quellcode

1
Typ that = this;

?

Ich vermute er bezieht sich darauf, dass das Zuweisen der Selbstreferenz (this) an eine andere Variable (that oder self oder ...) unter Umständen sinnvoll sein kann, abhängig davon, wie man bei der Programmierung vorgeht. Ich würde aber behaupten, dass man darauf nur zurückgreifen muss, wenn man private (oder protected?) Member mit anderen Sprachfeatures (Closures) emulieren möchte.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

8

08.03.2015, 19:49

Ah super vielen Dank noch für die anderen Beiträge :). Ich werde mich die Tage da mal durchwuseln. Derzeit bin ich aber noch mit anderen Projekten beschäftigt.

Ich würde schon gern haben wollen, dass die Spiele im Browser laufen, ohne Client ^^. Dafür lerne ich im 2. Semester etwas C++, dann denk ich bestimmt nochmal über Client Games nach :D.

MfG

9

08.03.2015, 20:30


Ich vermute er bezieht sich darauf, dass das Zuweisen der Selbstreferenz (this) an eine andere Variable (that oder self oder ...) unter Umständen sinnvoll sein kann, abhängig davon, wie man bei der Programmierung vorgeht. Ich würde aber behaupten, dass man darauf nur zurückgreifen muss, wenn man private (oder protected?) Member mit anderen Sprachfeatures (Closures) emulieren möchte.


Ich will hier sicherlich keinen flamewar starten, das leidige Thema der Programmiersprache hatten wir schon zu oft.

http://www.peterkropff.de/site/javascrip…n_this_that.htm

http://whydoesitsuck.com/why-does-javascript-suck/

So Far...
Laguna
Portfolio runvs.io | Gamejolt | itch.io | PEWN | Twitter

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

10

08.03.2015, 21:24

Beim ersten Artikel hat jemand OO in JS nicht verstanden, den zweiten will ich mir nicht durchlesen.
JS ist insofern nichts für blutige Anfänger, aber wenn man sich etwas auskennt ist es auf einmal sehr angenehm damit zu arbeiten. Sofern man strukturiert arbeitet treten komische Fehler auch selten auf.

Werbeanzeige