[Projekt][WIP] ceilfire.com Game Maker

[neon]

Projekt-URL: Ceilfire

Hallo,

Es ist schon zwei Jahre her, als ich hier das letzte Mal ein Projekt vorgestellt habe Clearsky.
Das Projekt wurde abgebrochen, da es einfach zu viel Aufwand für zu wenig Return und Potential war.

Aber jetzt möchte ich unser neues Projekt "Ceilfire" vorstellen. Ich will eine Plattform für die Erstellung von 2D HTML5 Spielen machen.

Die Plattform soll als Hauptmerkmal haben:
1. Uploaden und austauschen von Grafiken/Musikassets
2. Games mit einem online editor erstellen
3. Games zu spielen und remixen
4. Kommentare, likes, unlikes von games, top played, newest games etc. um das Auffinden von guten Games zu erleichtern

Es ist extrem viel geplant (Unter anderem Erstellung bzw. Export von Bezahl-Android/ios Games, ingame purchase, ingame ads, multiplayer, assets market etc.).
Aber das ist noch Zukunftmusik.

Was wir bisher haben:
- User können sich registrieren, anmelden
- Assets können hochgeladen werden und im Editor verwendet werden (bisher nur sprites, und alle assets sind geshared, keine privaten Assets möglich)
- Im Editor kann man die Bilder verwenden um Objekte zu erstellen, sie zu verschieben, zu skalieren etc.
- Es gibt ein multi-layered map system
- box2d physics engine Integration -> man kann der map oder den objekten physikalische Eigenschaften hinzufügen (gravity, velocity, mass, bounciness etc.). Kollisionserkennung und -behandlung ist auch möglich.
- Erstes event system -> e.g. man kann im editor angeben: Wenn Objekt X mit objekt Y kollidiert, zerstöre Objekt Y. oder wenn taste gedrückt wird, bewege das objekt (z.B. für Player-Implementierung) etc.

Was noch getan werden muss für unser MVP (minimal viable product), damit ich hier Links posten kann:
- Bisher wurde nur der Editor implementiert, sodass man noch keine Games speichern und später spielen bzw. Verlinken kann
- Bessere Verwaltung von assets mit tags. Sound Assets und Wiedergabe.

Technik:
- Auf dem Server läuft nodejs mit dem expressjs framework und mongodb (beide sehr zu empfehlen), somit wird der Server mit javascript programmiert
- Der Client verwendet für die Hauptseite (Wo man Spiele sehen kann und sie auch spielen) twitter bootstrap und jquery
- Der Editor verwendet jquery und jquery-ui mit unzähligen plugins und wird komplett in javascript geschrieben
- Bisher wird nur HTML5 canvas fürs rendering unterstützt, webgl wird folgen, sobald man erste Spiele erstellen kann

Ich habe noch keinen Link gepostet, da man eigentlich noch nicht viel machen und erst wenig testen und feedback geben kann.
Falls jemand trotzdem interessiert wäre, das direkt zu sehen, dann werde ich den link beim nächsten Update posten.

Ich werde hier voraussichtlich regelmässig updates posten.

Screenshots:

Die Hauptseite. Hier werden später alle games in youtube style aufgelistet.

Alle durch die community oder eigene Assets können direkt mit dem Asset-Browser geladen würden. Wird später geändert und tag-based für bessere Verwaltung gemacht.

Neue assets können per drag-and-drop oder normal hochgeladen werden

Beispiel für mapping. Simple Szene

Animationen können aus Spritesheets erstellt und per events gespielt werden (funktioniert noch nicht)

Leider kann ich nur 5 Screenshots uploaden, es fehlt noch der Event-Editor. Aber er ist nicht so spannend :)

Cheers
neon

[neon]

Hier ist das erste Update:

- Es werden jetzt Instanz-Objekte unterstützt, d.h. man muss nicht die selben Regeln für jedes einzelne Objekt definieren, sondern muss sie nur für einen Objekttypen definieren.
- Eigene Variablen können für ein Spiel oder für ein einzelnes objekt definiert werden.
Dies ist praktisch für highscores oder Gameplay-Aufgaben wie "Sammle alle xyz ein" etc.
- Direktes Testen im Editor wurde verbessert

Es gibt jetzt ein Video, in welchem man einiges in Aktion sehen kann.
Es ist unbearbeitet und ohne Anmerkungen. Spätere videos werden kürzer und annotiert sein.
[youtube]NywSaloGiqg[/youtube]

Die Bewegungen sind komplett box2d(physik engine) gesteuert, deshalb ist es schwer, die richtigen Parameter zu finden. Aus diesem Grund wird Physik später nur optional sein.

[LONy]

Hey,

find es ein total interresantes Projekt. Das Video zeigt, dass schon einiges funktioniert :) Ich freu mich schon weiteres zu erfahren. Muss mich auch endlich mal wieder ans HTML5 Spiele entwickeln machen :D

[neon]

@L0Ny
Danke für dein Feedback, gut zu wissen, dass es jemanden interessiert :)

Hier ist das devlog #2.
Die updates sind:
- Spritesheet animations
- Expressions (Alle mögliche mathematische Funktionen, siehe math.js library) für event rules. Z.b. im Video wurde "ceil(randomAB(0,5))" im EventRule benutzt um eine Animation zufällig auszuwählen.

[youtube]uFQR5RgU0ik[/youtube]

[Puhmann]

Sieht gut aus und recht flexibel. Wenn es soweit ist würde ich es auch gerne mal in Aktion ausprobieren.

[neon]

Hallo,

Wollte bescheid sagen, Ceilfire-Projekt ist nicht tot :)
Ich habe meinen Renderer gekickt und alles auf PhaserJS (kann ich nur empfehlen, ist awesome) portiert. Dadurch unterstütz der Editor automatisch canvas und webgl (bisher hatte ich nur canvas). Alle assets werden jetzt auf amazon s3 gespeichert, was viel flexibler ist als meine Lösung mit lokal Dateisystem. Die Frontpage an sich wurde verbessert, es sieht jetzt netter aus und es gibt Kommentar Funktionen (dank disqus)/Bewertung für die Spiele.

Es gibt noch viele bugs damit es nutzbar ist, und ich muss noch die Serializierung fertigstellen. Aber ich arbeite hart dran, damit ihr es bald testen könnt.

Hier ist die neue Frontpage. Ich habe noch keine Funktionen die Game-Teaser hochzuladen, deshalb gibt es nur default Bilder.

[neon]

Hier ist ein neues video, zeigt nur kurz dass man die erstellte Spiele auch speichern und auf der Plattform spielen kann. Es wird langsam ganz nett.
Man kann jetzt auch Soundobjekte hinzufügen und auch in events abspielen. Also z.b. spiele Schusssound ab wenn eine Taste gedrückt wurde etc.
Kann noch nicht online stellen, da man auch Game assets uploaden kann und ich will nicht wegen Copyrightverletzungen gleich abgemahnt werden. Deshalb mache ich bald mit ein Paar Leuten ne UG auf, was mir auch geraten wurde. Aber so im Juli müsste das Teil endlich on sein. Zwar noch recht Basic aber ich kann dann wenigstens sinnvoller Feedback sammeln.

[youtube]dmm5yTBnt9s[/youtube]

[neon]

Hallo alle,

Hab mal ein Milestone für mich gemacht und konnte mit Ceilfire Flappy Bird Logik implementieren, Hello World der Zeit :)
Hier ist ein kurzes video mit dem Ausschnitt aus Flappy Bird und paar andere Sachen.

[youtube]AkDi2eWUf88[/youtube]

Konnte keine längere Auschnitte aus dem Game machen, da durch Camtasia das System extrem langsam wird und entsprechend die Games schwer zu steuern werden. Wer bessere alternativen kennt, kann sie gerne posten :)

[marcgfx]

finde die idee gut, mit 12 hätt ich vor so was getötet :)
video ist nicht der burner, gibts denn keinen link?

[neon]

Der Link kommt bald, bin noch dabei die rechtliche Seite zu klären, da der Nutzer Bilder und Sounds für sein Spiel hochladen und teilen kann und ich will sicherstellen, dass ich nicht bald wegen irgendwelchen Urheberrechtverletzungen abgemahnt werde.

Ja, das Video ist nicht so toll, wollte deshalb es schon gar nicht mehr hochladen. Es ist schwer schnelle Spiele aufzunehmen, deshalb suche ich nach Camtasia-ersatz. Wollte auch Making-Of machen wie ich Flappy Bird im Editor erstellt habe, aber wurde leider doch durch Camtasia schwer zu benutzen. Es kann auch sein, dass ich einfach zu schlechten Rechner habe.

[neon]

So, hab jetzt ein timelapsed Making-of Flappy Bird video gemacht. Müsste ein weniger ruckeln und man sieht den Editor in Aktion.

[youtube]E4ceMuH-8xk[/youtube]

[neon]

Hi allerseits,

Es gibt ein neues update seit längerem, habe jetzt keine neue Videos aber ihr könnt jetzt das Projekt auf ceilfire.com testen. Es ist noch sehr basic und mit vielen bugs, aber alle Komponente sind da und ihr könnt schonmal sehen worüber ich die ganze Zeit hier gepostet habe :) Ihr könnt alles ohne Registrierung testen, aber um Assets hochzuladen und Games zu speichert braucht ihr ein Account. Ich würde mich natürlich über Registrierungen freuen.

Es gibt eine neue Komponente die gar nicht in videos zu sehen war: ein Assets-Market. Müsste wegen haftungsauschluss ne UG dafür gründen, deshalb hat es so lange gedauert das online zu stellen. Ihr könnt assets upload (zur Zeit noch unter freien Lizensen wie public domain), diese assets können direkt im game benutzt werden oder im market für externe zwecke heruntergeladen werden.

Es ist noch alles sehr einfach, weil ich die Plattform mit der Community entwickeln möchte, deshalb freue ich auf Feedback in so einem Stadium kann wirklich jeder mit seinen Ideen beitragen. Von Bug reports über design Kritik, konstruktiv oder destruktiv ist alles willkommen.

Die Plattform müsste unter Firefox und Chrome funktionieren, wobei Chrome manchmal noch Probleme bei der Cross-Origin-Policy, da ich alle assets extern auf Amazon S3 speichere. Internet Explorer wird nicht supported.

Hier sind nochmal ein paar Screenshots als Referenz

Editor

Assets Market

Game Portal

Hier ist ein beispiel game - very basic clone of flappybird
Schaue ihr euch first-steps tutorial an, um den workflow im editor zu lernen http://ceilfire.com/docs

[neon]

War das Forum down?

Anyway, hier ist das neue update:

Es wurde einige Probleme bei der Registrierung beseitigt, jetzt muss man nur mindest Passwordlänge von 8 haben.
Es gibt ein neues video tutorial direkt auf der Hauptseite eigebettet.
Einige Editor bug sind befixed und ..

Es gibt ein komplett neues Feature:
Wenn man auf ein Spiele klingt gibt es jetzt ein "remake it" button. Da wird das Spiele im editor geöffnet und man kann es modifizieren ohne alles neu zu erstellen. Es wird als ein neues Spiele gespeichert. Irgendwann gibts auch eine Leiste neben dem Spiele mit allen remakes.

Ich werde bei jedem update ein neues game post, hier ist das heutige: Drunken-Breakout
Es ist ein breakout clone mit einem Zufallswinkel (kann leider noch nicht anders mit dem editor :)) und wenn man die Blöcke trifft, fliegen sie rum und man sollte versuchen sie auszuweichen sonst verliert man.

Drunken-Breakout

Hier ist das game screenshot mit dem neuen remake-it button:

Wie immer ist jegliche Kritik oder Feedback willkommen.

ceilfire.com

[marcgfx]

leider war das break-out für mich praktisch unspielbar.
1. war nicht sofort klar das mit der maus gesteuert wird
2. gings viel zu schnell
3. zu viel zeug das runterfliegt
4. nach 1-3 sekunden vorbei, keine taste für restart?

[neon]

Hi marcgfx,

Ich hab jetzt die Blöcke langsamer und weniger gemacht. Es gibt nur der eine restart button, beim nächsten update füge ich shortcuts hinzu und mache die gesamte play-area clickable dann kann man von überall starten kann. Weil manche haben auch ein Problem, dass sie nicht schnell genug sind den Paddle in die Ausgangssituation zu bringen.

Aber ja, ist nicht wirklich tolles gameplay, wollte nur paar Editor features testen. Hoffe die games werden bei nächsten updates besser, hab mir schon paar nette features überlegt :)

Danke für dein Report

[@zimmer]

Bei mir liefs in Zeitlupe!
Aber ich habe auch einen Pentium 4 und 128 mb Grafikkarte(fals man sie für sowas braucht)
und leider kommt kein "jea! Gewonnen!" so ein pixeliges Won wie das Game over fänd ich cool aber vermutlich bist Du schon am nexten Projekt darann ;)
Weiter So bin gespannt was noch alles kommt

[neon]

Danke,

Das mit der Zeitlupe ist in der Tat ein Problem. Im Moment sind die Aktionen, die man mit dem Editor erstellt, nicht framerate unabhängig. Wenn man die Geschwindigkeit auf 100 setzt, dass ist es immer bei allen frameraten 100 pixel Bewegung. Da will man eigentlich sowas wie mit delta wert multiplizieren. Aber es ist auch schwierig sowas zu alle Aktionen automatisch Frameunabhängig zu machen, weil manchmal will der Nutzer absolute Werte, deshalb setze ich im Moment auf requestanimationframe (bzw. das macht phaser für mich :) ) Funktion und die ist eigentlich meist um die 60 fps. Aber klappt natürlich nicht immer.

Btw das Game zu machen hat 5-10 Minuten gebraucht, genauso wie das Flappy-Bird clone. Das Problem ist immer die Editor Bugs zu fixes und fehlende Features einzubauen bis man sein Wunschgame machen kann. Aber vieles klappt schon ganz nett. Für won fehlt mich noch das Feature zu erkennen wann alle Objekte gesammelt werden, aber ist eine gute Idee, kommt sicherlich bald. Custom Variables, die man in event rules abfragen kann oder hochzählen oder so. Setze auf meine TODO-Liste.

Hier ist ne Liste was noch in Zukunft kommen wird:
examples.phaser.io , ich benutze max 10% der features von Phaser (hatte früher eigenen render, code nie ne eigene Engine, ausser es ist das Projekt an sich :)), aber auch wenn das meiste UI/workflow Problem ist und nicht algorithmisch, dauert sowas immer generisch genug zu machen.

[neon]

In letzten Tagen gab es einiges an Bugfixing aber auch ein neues größeres Feature.

- Bei jedem Spielstart gibt es jetzt einen Countdown (1.5 Sekunden), weil viele das Problem hatten, die Maus in die Ausgangssituation zu bringen

- Man kann überall auf den Player drücken um das Spiel zu starten

- Es gibt einen IRC-Chat link auf der Seite um nach Hilfe zu fragen (ich bin da meist angemeldet)

- Spiele-Beschreibungen unterstützen Markdown-Syntax

- Es gibt eine Partner-Seite http://ceilfire.com/partners, alle die ein Projekt mit eine Community-Komponente haben, können sich bei mir melden

- Wenn man nicht registriert oder eingeloggt ist und trotzdem sein Spiel speichern möchte, kann er sich jetzt direkt im Editor beim klicken auf "save" registrieren und sein Spiel wird gespeichert, ohne das die Seite neugeladen wird und dadurch das Spiel verloren geht.



Und nun zum großen Feature:

Es gibt jetzt ein Text-Objekt. Bisher wurden Texte in Bilder gespeichert. Jetzt gibt es extra ein Spieleobjekt "Text" mit vielen Eigenschaften wie Font-Family, Größe, Schatten etc.

Das heutige game wurde nicht von mir gemacht, sondern von einem nicht-technischem Team-Member: http://ceilfire.com/p/5436749a028dfb4833a4659e , Es handelt sich um die erste Ansätze, wie man ein "Education-Game" mit ceilfire machen könnte.

Hier ist Roadmap für größere Features für updates in nahe Zukunft
- Tilemaps support
- Partikeln
- Referenzierung von anderen Objekten in Event-Rules
- Support von größeren Maps und Kamera (funktioniert nur halb jetzt, deshalb noch keine größere-Welten Spiele)

[marcgfx]

ich wollte zuerst noch was zum spiel schreiben, aber das verkneif ich mir. ist ja nur ein ansatz. schön das du vorankommst!
ich denke du solltest dir selbst ein spiel erstellen, dass all deine features direkt verwendet und demonstriert. im idealfall ist es auch noch spassig :) , dann sieht man auch was machbar ist.

[neon]

:) Also das Spiel verwendet schon ziemlich viele features,
aber ist notiert. Nächstes mal gibts ein special.

Denke wenn erstmal tilemaps (kannst z.b. deine Umgebung jetzt noch nicht durch kleine "tiles" zusammenbalsten wie bei meisten jump&runs and co. sondern muss jedesmal ein komplettes Spieleobjekt mit Hintergrundgrafik benutzen) möglich sind und auch größere maps unterstützt werden, kommen interessantere Spiele.

Danke fürs feedback

[neon]

Es gibt ein neues update mit interessanten Features:

- Text-Object hat eine fade-out Aktion (also ihr könnt ein text langsam verschwinden lassen)
- Hinzugefügt "create object/spawn object" Aktion, ein wichtiger Punkt für shooting games um z.b. Projektile dynamisch zu erstellen
- Variables die erstellt/verändert werden können in Aktionen -> ganz nett für Punktestand, Lebenanzeigen oder einfach um zu schauen ob alles gesammelt wurde etc.
- openURL Aktion -> ganz nett um eigene Seite zu Promoten oder so
- rotateToObject/rotateToPointer Aktionen.Man kann es benutzen um den Spieler immer richtung mauszeiger zu rotieren für bestimmte Steuerung
- top-tags sidebar im assets Market wie auf der Frontpage

Das Spiel von heute ist:

Ein Space-Shooter im style von Space-Invaders. Da kann man alle obere features sehen. Object-Spawning für die Rakete, Variablen für den Counter. rotateToPointer etc.

http://ceilfire.com/p/544b9c77fad0705234dbc196
Man kann nicht verlieren, aber wenn man die Raumschiffe nicht zerstört, kriegt man punkte abgezocken, für die Zerstörten hinzuaddiert.


Hier ist das gameplay Video, falls es bei jemandem nicht funktioniert (bitte bescheid sagen)
[youtube]S8wqQJormvs[/youtube](sind andere assets)

Und es gibt ein Tutorial, der zeigt wie man mt ceilfire schießende Raumschiffe erstellen kann
[youtube]pJ2Fve7yvGA[/youtube]

Bis zum nächsten mal!

[neon]

Hallo, it's update time!

Es gibt leider keine showcase games diesmal. Aber trotzdem ein paar sehenswerte Änderungen.

Hier sind die größeren Punkte

1.
- Das remaken von games ist gefixt, funktioniert jetzt also wieder für alle games
- neue moveToPointer, moveToObject, moveToPosition aktionen für das Sprite-Objekt. Dadurch kann man z.b. eine Maussteuerung implementieren.

2.
Die Properties-Leiste wurde redesigned! Jetzt ist es viel übersichtlichlicher (zumindest auf meinem Rechner :))

Alte-Variante (Pfeile nicht beachte, ist aus einem Tutorial):

Neue Variante:

Welche ist besser? :)

Vorallem das Editieren ist jetzt netter. Früher musste man alles mit Enter bestätigen (z.b. aus dropdown auswählen -> enter). Jetzt ist die Änderungen sofort bei jeder Aktion.

3.
Seit gestern gibts es eine Eigenschaft im Game-Object um benutzerdefinierte Thumbnails/Preview Bilder upzuloaden (statt den C mit dem bunten Hintergrund logo).

uploadImageProperty.png (10.37 KiB) 4158 mal betrachtet

So das waren größeren Änderungen. Es ist immer noch viel zu tun aber es geht voran, vorallem dank dem Feedback von manchen Usern!

Ihr müsst wahrscheinlich zwei mal ceilfire laden, damit der cache geleert ist und neue Dateien nutzbar sind.

Es gibt neue videos:
1. wie man die Variablen Nutzt um z.b. Punktestand zu implementieren: http://youtu.be/QhrBePl-5KE
2. spawnen und zerstören von Objekten: http://youtu.be/FtSEVIGQ210


http://ceilfire.com

[neon]

Hallo @all,

Ich bin immer noch dabei die gewünschten Features für das aktuelle Update zu implementieren,
aber es sind schon 3 Wochen seit dem letzten Updaten, deshalb poste ich man den Zwischenstand.

- Hinzugefügt von "Ceilfire Academy". Ein simples Blog, dort werde ich detailliertere updates und Tutorials reinstellen.
- Wenn man ein Sprite skaliert und dabei Ctrl Taste drückt, wird das Seitenverhältnis beibehalten.
- Es ist jetzt möglich größere Maps zu machen, wo auch die Kamera den Spiele verfolgt.


Und jetzt zu dem besten Feature:
- Es gibt jetzt vordefinierte Komponente "Behaviors", die sollen die häufigsten Situationen wie z.b. Jump&Run Steuerung abdecken
ohne, dass man Haufen Event-Rules definieren muss.

nach dem klicken auf "add new component" button kommt ein Dialog mit den ganzen "Behaviors"

new_behaviour2.PNG (8.92 KiB) 3978 mal betrachtet

Es gibt jetzt 4 verschiedene Behaviors "Keyboard Movement", "Collide", "Jump&Run" und "Periodic".
Ich werde ein Tutorial machen, wo die genau erklärt werden.

Ich bin gerade dabei ein Beispiel Jump&Run Spiel zu machen, aber es fehlen noch ein paar Sachen.

Übrigens, es gibt jetzt 4 Möglichkeiten wie man das Ceilfire Projekt verfolgen kann:
1. Registrierung auf ceilfire.com mit aktiviertem Newsletter Kästchen bei der Registrierung https://ceilfire.com/users/register
2. Gibt eine E-Mail Adresse in das Newletter-Feld auf der ceilfire.com Hauptseite ein.
3. Verfolge ceilfire youtube channel https://www.youtube.com/user/symplatonix/
4. Nutze den RSS Feed auf der "Ceilfire Academy" http://info.ceilfire.com/


Ich bin immer auf der Suche nach einfachen Spielen, die ich mit Ceilfire kopieren kann um den Editor weiterzuentwickeln.
Wenn jemand ein Paar gute (und erstmal noch einfache :)) Spiele kenne, oder Ideen hat, kann es gerne posten :)

http://ceilfire.com
http://ceilfire.com/editor

[neon]

Wollte mal wieder was zu dem Zwischenstand berichten, aber habe mir jetzt vorgenommen wirklich alle 2 Wochen Updates zu posten.


Es gab sehr viele kleine Änderungen oder auch Design Änderungen auf der Homepage, aber ich war die letzte Zeit damit beschäftigt Tilemaps in Ceilfire zu integrieren.
Das Resultat ist:



Es werden jetzt Tilesets unterstützt. Ihr könnt es mit normalen Objekten mischen, wie im Tiles Editor. Dafür gibt es extra property in Ebenen Eigeschaften. Wie man das benutzt kann man im Tutorial sehen: Link zum Tilesets Tutorial .
Eine Beispielmap mit Tilesets könnt ihr hier ausprobieren: Tilesets Test-Map

Weiterhin habe ich das einbetten von games in externe Seiten gefixed, alle Games auf der Seite haben unten einen embed Link. Wie ein game eingebettet aussieht, kann man hier sehen: http://sufryd.com/ .
Und es gibt eine Möglichkeit die Ceilfire games ins facebook als App einzubinden. Es kommt bald ein Tutorial mit den nötigen Schritten.

Wenn wir von Facebook reden. Es gibt jetzt eine Ceilfire Facebook Page: Ceilfire Facebook Wenn ihr das Projekt interessant findet, könnt ihr es auf Facebook als Zeichen liken.


Es gibt jetzt auch ein Ceilfire Support Forum, wenn ihr Feedback, Probleme oder Anregungen habt, könnt es hier schreiben oder im Ceilfire Forum.

So, ich hoffe ich habe nichts vergessen. Es wird auf jeden Fall fleißig weiterentwickelt! Und wie immer freue ich mich auf Feedback und Kritik.