[Projekt] Devader

[SPech]

Sowas hatte ich auch mal gemacht: http://www.marvinsarena.com/
Problem ist dabei immer eine Community zu bekommen die viele Bots basteln :\

[marcgfx]

Jo, hab ich gesehen :). Das mit der Community ist echt ein Problem, es war mir zwar schon bekannt, aber ich dachte mit direkter Webausführung hätte ich einen Vorteil. Ich schätze mal der Kreis der möglichen Anwender ist schon massiv eingeschränkt. Aber ganz aufgeben tue ich nicht und geh deshalb in eine andere Richtung. Ich werde das mit der AI-Erstellung beibehalten, aber nutze es um Spiele zu programmieren. Aktuell eben ein kleines Rennspiel. Mensch gegen Maschine :)

[marcgfx]

feature110213.png (65.47 KiB) 40755 mal betrachtet

ich hätte ja gerne einen kompletten screenshot hochgeladen, aber irgendwie liess sich das bild ultraschlecht komprimieren. das neue "wald-feature". wer will schon die autos sehen *g....

[marcgfx]

hm, um die zeit sollte man ja bekanntlich nichts mehr schreiben. aber man sollte eigentlich auch nicht mehr coden... hab heute ein paar kleinere performance-tests gemacht, als ich bemerkt habe das mit vielen bäumen die performance recht in die knie ging. hab natürlich nicht nach der ursache gesucht, sondern mal umgesetzt. schlicht die objekte, die nicht im sichtbaren bereich sind wurden mal ausgeblendet. hat die performance in chrome gar verschlechtert. naja dann gings mit dem schrauben los, hat alles nur wenig gebracht, aber ein bisschen aufgeräumter wars danach. immerhin. mitternachts fällts mir dann ein woran es wohl liegen muss... es gibt ne vergrösserte anzahl an objekten. plötzlich ein paar hundert objekte mehr, schlecht für die performance. was für ein genialer gedanke. nur... die bäume sind schon ein bisschen anders als die autos. die stehen still. Aber die bäume wurden gleich behandelt wie die autos, das heisst in jedem frame gezeichnet in jedem frame ein "run" und natürlich die selbe kollisionserkennung. baum überprüft ob er mit baum kollidiert, stellt fest wir sind beide statisch. super. also 2.5h später ist alles beim alten, nur schneller. in chrome läuft jetzt die karte (siehe minimap) mit 4000*3000 pixeln und 941 bäumen und 2 fahrzeugen wie gewollt mit 25fps, zuvor war bei ~10fps schluss. scheinbar liegen gar über 200 drin, da ein durchlauf nur noch 4ms braucht (ich zweifle).

[marcgfx]

wo liegt heutzutage eigentlich die schmerzgrenze bei der bandbreite?... hab eben ein paar steinchen generiert und die grösseren... naja die brauchen schon noch einiges an kb.
hab keine lust auf die grossen zu verzichten eigentlich, andererseits ist 135kb schon deftig viel für web. oder seht ihr das anders?

für cyberlympics werden übrigends alle graphiken pro einheit/gruppe zusammengefasst.
das bild wird mit 256 farben gespeichert und den alphakanal gibt es separat, spart noch einiges ein im vergleich zu 32bit png (393kb).
nur leider, für alte browser ohne canvas gibts die schonungslose variante (jedes einzelbild).

[RustySpoon]

Die sehen auch sehr noisy aus, darum lassen die sich wahrscheinlich schlecht komprimieren. Versuch doch mal, das ein bisschen nachzubearbeiten.

[Chromanoid]

Ansonsten vielleicht Alphakanal mit PNG speichern und die Farben mit JPG. Das würde dann je nach JPG Qualität auf insgesamt ca. 70kb rauslaufen...

[marcgfx]

@RustySpoon:
noisy ist cool ;) ... aber hast schon recht, die bilder sind deswegen schon deutlich schlechter komprimierbar. wenn ich nen screenshot mache von dem projekt sind die bilder unglaublich schlecht komprimierbar, es praktisch alles random. einerseits doof, andererseits sind die szenen wirklich recht einzigartig. ich find repetition ist etwas hässliches in einem spiel. was mich besonders am ansatz stört ist, dass du mir handarbeit naheliegst ;) ... ich bin zu faul um jedes bild zu optimieren.


@Chromanoid:
mit jpg und starker komprimierung gibts dann probleme, weil die ränder nicht immer scharf sind, das passt dann nicht auf die alphamaske und es sieht dann nicht gut aus. ohne hohen qualitätsverlust ist aber indiziertes png sowieso besser. bevor ich die visuelle qualität opfere, verzichte ich schon eher auf die grösseren bilder. jpeg2000 wär vielleicht ne option, wenn es doch nur unterstütz werden würde. ich denke viel besser bekomm ich das technisch nicht mehr hin, es ist wirklich eine frage der schmerzgrenze. mit pngcrush wirds auch noch etwas reduziert, der durchlauf fehlt hier noch :)

edit: hm hab jetzt eben mal jpg versucht, aber noch nicht mit dem alphakanal. evtl. lässt sich manchmal wirklich noch was rausholen. die steine sind schon relativ gleichartig. ich habs vorher schon mal mit jpg versucht, aber java (1.4.2 glaub ich) hat nicht so nen guten jpg kompressor. muss das wohl doch noch mal checken.

[marcgfx]

ich hab schon vor ewigkeiten beim sound das "pan" eingebaut. sounds die links abgespielt werden sind besser in der linken box zu hören, sounds die rechts abgespielt werden in der rechten box. das war ne nette spielerei, hatte aber wenig bedeutung da die ganze aktion sowieso immer in einem bildschirm sichtbar war. inzwischen habe ich aber grössere welten und das pan hat die unangenehme umsetzung, dass halt alles was rechts in der welt geschieht rechts abgespielt wird und für links natürlich das selbe. ich sollte also den sound eigentlich nur für einen umkreis des sichtbereichs abspielen und dementsprechend das pan umsetzen. etwas umständlich, aber machbar. nur ists eben auch so, dass ich alles aufzeichne. bislang wurden sounds die im selben frame mit der selben id gespielt wurden zusammengefasst, da der soundmanager auch nicht mit zu vielen samples gleichzeitig umgehen kann. diese wurden auch zusammengefasst gespeichert. das geht nicht mehr wenn ich sichtbereich-bezogene soundausgabe haben möchte, da ich von jedem einzelnen sound die position haben muss.

entweder ich verzichte vollends auf das pan, oder ich speichere wirklich jedes sample einzeln. lohnt sich dieser zusatzaufwand/speicherplatz für diese information? oder ist das mit der boxenaufteilung sowieso unnötig. wie handhabt ihr das? wie wird das in nem echtzeitstrategiespiel gehandhabt (hab keines zur hand :) ...) ?

[marcgfx]

ist ganz schön mühsam den sound für den aktuellen bereich glaubhaft hinzubekommen. bin jetzt noch nicht sicher obs wirklich passt. aber ist implementiert... konnte es nicht lassen.

[bruZard]

Verstehe ich das richtig? Du programmierst dieses Spiel in JS + HTML5 + Canvas? Wieso machst Du Dir da Sorgen um die Gfx und trennst noch Bitmap von Alphamap und dann auch noch 8Bit? PNG tut einen guten Job. Man kann den User mit 56k Modem auch mal einen Ladebalken anschauen lassen. ;)

[Chromanoid]

naja 250kb unterschied für einen asset finde ich schon ein argument ^^ schont ja auch den eigenen traffic...

@marcgfx: An deiner Stelle würde ich unbedingt mal an der Zugänglichkeit deines Spiels arbeiten. Ich weiß nicht ob ich es einfach übersehen habe, aber ich konnte ohne Anmeldung kein Bot-Spiele sehen. Ohne sofortige Einstiegsmöglichkeiten wird es schwer sein neugierige Spieler zu finden. Und auch die Registrierung würde ich überdenken. Selbst bei einem Tournament brauchst du doch höchstens eine Emailadresse von den Mitspielern. Vielleicht wäre OpenID und Login with Facebook was für die Anmeldung. IMO wäre es am sinnvollsten, wenn man ein Spiel per verschickbaren Link anschauen kann. Zum Beispiel könnte es folgende Linkarten geben:
* cyberlympics.com/challenge/PLAYERID -> Ein schon aufgebautes Spielfeld erscheint mit einer Möglichkeit sich anzumelden oder einfach direkt seinen Code in ein Textfenster zu kopieren, um gegen den Spieler mit der angegebenen ID zu kämpfen (dieser stellt sein Profil auf diese Möglichkeit hin ein und bekommt den Link zum in die Signatur kopieren o.Ä.)
* cyberlympics.com/watch/PLAYERID/vs/PLAYERID -> Man kann ein Match beliebiger Spieler anschauen (natürlich nur wenn die jew. Spieler das per Konfiguration erlaubt haben)
* cyberlympics.com/rank/PLAYERID -> Rang und Erfolge des Spielers anschauen.
Außerdem fände ich es gut, wenn man selbst auch einen Panzer steuern kann (falls noch nicht möglich). Dies erhöht den Reiz auch für nicht Programmierer sich das mal anzuschauen. A'la hey ich hab hier einen Bot programmiert, kannst du ihn schlagen? (ggf. mit Handicap für Bots oder Spieler...)
Die Grafik finde ich übrigens sehr gelungen :)!

PS: Hab gerade gesehen wie man sich einen Battle unangemeldet anschauen kann :) das sollte man schneller finden ^^ http://cyberlympics.com/nav/main.php?l= ... 1_02_19_22 die "Kontrollbar" zum abspielen ist bei mir dabei übrigens irgendwie im hintergrund und ich kann nicht auf play drücken...

[marcgfx]

@chromanoid: danke für die hinweise. problem ist eben, im moment ist mir die webseite grad wurst :) . hat so wenige leute gegeben die überhaupt ne ki geschrieben haben, so dass ich mir nicht mehr die mühe mache sie auf dem laufenden zu halten. es gibt ne komplettrevision und was ich hier zeige ist nur lokal bei mir verfügbar.

- direkt gegen gegner kämpfen. die möglichkeit steht auf der todo liste. problem: wenn ich lokal gegen einen gegner kämpfen kann, habe ich auch seinen code. also entweder ist der code öffentlich, oder ich muss den code noch obfuscaten um ihn vor fremdnutzung zu schützen.
- match player gegen player anschauen. läuft über turnier ankucken. ich möchte aber noch eine suche einbauen, damit man gezielt mätche von usern betrachten kann.
- ranking, gibts noch nicht. will ich auch noch einbauen :)
- panzer steuern geht bei mir lokal. die rennautos sind eigentlich auch nur panzer.

mein aktueller fokus ist auf dem rennspiel. ich denke das dürfte für fast alle spielertypen einfach zugänglich sein.

todo rennspiel:
- entry screen
- highscore (schnellste fahrt/runde)
- ghost-driver (rennen gegen den schnellsten, oder sich selber)

todo bevor ich nochmal release:
- alle mp3 -> ogg. aktuell krieg ich die elenden ogg nicht zum laufen. ffmpeg scheint die nid sauber umzuwandeln, oder zumindest nicht so das ich sie lesen kann.

[Chromanoid]

statt obfuscaten vielleicht matches auf dem server laufen lassen? also dann wäre es jedenfalls richtig sicher...

[marcgfx]

sicher schon. aber es spricht einiges dagegen.

- match braucht nicht wenig cpu-resourcen
- jedes match müsste gespeichert werden
- es wäre für den anwender erst nach abschluss sichtbar
- debuggen wär nicht möglich
- ich habs noch nicht darauf ausgelegt, dass es abseits des browsers läuft (turniere laufen auch im browser ;) ...)

hab ogg endlich hinbekommen. war das ein krampf... mit ffmpeg scheinbar ein klacks. nur eben doch nicht. hab die konvertierung erst mit einem nicht dokumentiertem feature wie gewünscht hinbekommen.

[Chromanoid]

vielleicht wäre es dann am besten gleich eine art open source geist in das system zu bringen... du könntest ja trotzdem die scripte in einer datenbank mit datum versehen speichern, dann kann man zumindest ermitteln, wer eine bestimmte idee als erstes eingebaut hat. vielleicht treibt es ja sogar an, wenn man den quellcode von anderen anschauen kann (vorausgesetzt die stimmen dem zu...).
du könntest ja zweigleisig fahren, turniere werden aufgezeichnet, aber zum entwickeln programmiert man im Browser. der server braucht dann für turniere einfach etwas länger. du könntest ja die v8 engine für serverseitige verarbeitung einsetzen. also nur so als idee.

[marcgfx]

ich fahr schon zweigleisig, nur noch nicht auf richtig guten schienen. entwickelt wird im browser, getestet wird im browser. turniere laufen bei mir im browser auf also sozusagen der server-browser :) .... v8 setz ich indirekt über Chrome schon ein. hab mir mal angeschaut wie das wäre v8 zu installieren, weiter bin ich aber noch nicht gekommen. kennst du dich damit aus? habe mich nur schon gefragt ob ich überhaupt wie im browser mit XMLHttpRequest arbeiten kann oder nicht. ich muss auch daten laden und speichern können. ich denke darum kümmere ich mich aber erst wenn es mit dem browser-server zu mühsam wird...

open-source ist doch bei einer art contest nicht so der hammer. am schluss haben alle das gleiche. es hindert aber auch niemand daran open-source zu praktizieren, ich wills bloss nicht vorschreiben.

[marcgfx]

wenn ich bloss nicht immer diesen feature-wahn hätte... natürlich rein gar nichts sinnvolles umgesetzt heute. ich fand einfach, autos müssen doch auch motorgeräusche von sich geben. alles andere als leicht in javascript kann ich euch sagen. ich verwende den soundmanager2 von schillmania, super ding. nur eben, für so sachen ist der eigentlich nicht ausgelegt. zuerst hab ich mich mal mit dem loopen von sounds rumgeschlagen. das hat halbwegs schnell geklappt, leider aber gabs immer ganz hässliche übergänge beim wechsel vom alten zum neuen sound. anscheinend hat mp3 eine schöne eigenschaft das teilweise noch etwas ruhe am ende eines tracks folgt. es gibt ne lib "lame" die das problem lösen kann und nahtlose mp3's produziert. hab mich saublöd mit dem ding angestellt, ist auch grausam schlecht dokumentiert. oder ich war zu dumm. jedenfalls nachdem ich schon mal aufgeben hatte, hatte ich es dann doch... musste aber über wav gehen. ich weiss bis jetzt noch nicht wieso. mit der nahtlosen mp3 hats dann gar nicht schlecht funktioniert. flugs noch einen zweiten loop mit mp3 in einer anderen höhenlage eingebaut und motorgeräusche mit unterschiedlichem sound bei unterschiedlicher geschwindigkeit/beschleunigung konnte umgesetzt werden. dazu natürlich noch den sound auf beide boxen korrekt verteilen, oder zumindest glaubwürdig, schon war ich fertig. nur ein kleiner sonntag musste dran glauben.

Chrome: super, so wie es sein muss
IE9beta: absturz.
Firefox + Opera: stockender sound.
Safari: nicht schlecht, aber nur mp3

[marcgfx]

hab meinen kollisionsalgo genauer überprüft, da ich das gefühl hatte, er stimme manchmal nicht. um es mir einfacher zu machen, habe ich die grösste einheit die ich für scaw erstellt hatte mal eingebaut :) ... hab ausserdem noch an neuen hintergrundgraphiken gearbeitet. es ist verdammt schwer das zeug nicht repetitiv aussehen zu lassen, aber hier glaube ich auch gut gelungen.

[Eisflamme]

Geil. Die Modelle werden live gerendert? Hintergrund ist ganz gut. Damit so was richtig chic ist, braucht man halt Multitexturing.

[marcgfx]

@eisflamme: ich glaube für live gerenderte 3D modelle in javascript/canvas wär das schon ein bisschen viel verlangt. die 2D bilder werden aber live im browser angezeigt und bewegt :) . multitexturing fänd ich auch super, aber ich hab schon experimente mit SVG gemacht und die waren ganz schön langsam. Aber vielleicht hab ich den richtigen Trick noch nicht gefunden.

[Eisflamme]

ups, hatte kontext verloren

[marcgfx]

bin jetzt endlich an den "geister"-fahrern dran (bekannt aus mariokart). aktuell wird bei jeder checkpoint durchfahrt ein neuer "geist" erstellt und angezeigt, hier seht ihr das ergebnis.

[marcgfx]

hatte mal wieder mit meinem sehr generischem ansatz zu kämpfen. wenn nicht bekannt ist wie die strecken aussehen, können einige überraschungen lauern. ich hatte ein problem das mein start teilweise so blöd lag, dass sich die fahrzeuge alle überlappten und völlig chaotische positionen hatten. also musste ich meine generierten strecken auch noch analysieren um geeignete startpositionen zu finden. nach vielen fehlschlägen, da ich dachte ich könnte das auf ganz simple art und weise lösen, ohne mich in die materie reinzudenken, hab ich nun doch ein ganz ansehnliches ergebnis erzielen können. die fahrzeuge werden ausserdem jetzt an der fahrbahn ausgerichtet platziert, zuvor konnten die hinteren fahrzeuge teilweise auch im feld landen :) ...

[Alexander Kornrumpf]

hab ich nun doch ein ganz ansehnliches ergebnis erzielen können.

Wie hast du es denn gelöst?

[marcgfx]

ich analysiere die bezierkurve zwischen 2 streckenpunken und überprüfe wie sich der winkel verändert. ist der winkel > als mein eingestellter minimalwinkel, ist das streckenstück ungeeignet. ansonsten vergleiche ich es mit dem bisher besten gefundenem abschnitt der strecke. ist eigentlich auch nicht so schwierig, nur musste ich dafür die bezier-kalkulation der svg-kurve nachbauen.

[joeydee]

...nur musste ich dafür die bezier-kalkulation der svg-kurve nachbauen.

Für ein Rennen (Kollision, KI) brauchst du die Kurvenkalkulation doch sowieso, oder irre ich mich?
Sieht alles sehr schick aus, aber ich bin von Natur aus (bzw. aus eigener und fremder Erfahrung heraus) immer etwas skeptisch bei Projekten, die zuerst die Grafik aufbauen und dann versuchen dort die Logik reinzubringen. Das erzeugt in der Regel viel Overhead, Redundanz (wie deine Kurvenkalkulation) und unnötige Abhängigkeiten. Sollte umgekehrt sein: ein Renderer holt sich seine Daten aus der Simulation, welche unabhängig von der Grafik ist. Oder machst du das im Hintergrund so? Oder geht es dir sogar nur um die Grafik? Wie gesagt, sehr schick bis jetzt, ich will das in keinem Fall kritisieren :-)

[Chromanoid]

Naja mit den Panzern klappts doch schon :) allzu skeptisch wäre ich da nicht mehr. Die KI soll doch eh von anderen Leuten entwickelt werden.

[marcgfx]

SVG nimmt ein paar punkte die ich defniere und erstellt daraus die schöne Bezierkurve. Das mache ich nicht selber und deshalb musste ich es nachbauen um zu analysieren. Ich sehe keine andere Lösung :)

Die kalkulation hab ich gebraucht, aber später im Prozess. die streckenpunkte werden zufällig generiert und danach werden die kurven aufgebaut/interpoliert. ich wollte bevor ich die kurven aufbaue bereits den start festlegen, da ich sonst die strecke nachdem ich sie bereits fertig erstellt habe erneut manipulieren muss um den start zu verschieben. hört sich doof an, aber ich kanns nicht besser beschreiben. sagen wir es so: es ist jetzt komplizierter :) ... die kurve musste ich aber eigentlich nur aufbauen für die minimap und um festzustellen ob ein fahrzeug auf der strecke ist oder nicht (für staub und beeinflussen des fahrverhaltens). die rennlogik läuft über ein checkpoint system, es ist also egal ob man mal neben der strecke ist oder nicht, die kurve ist dafür irrelevant. kollisionen mit der rennstrecke gibt es keine.

für die ki biete ich eine "keks-spur" wie aus hänsel und gretel, plus die checkpoints. ist aber noch nicht ganz reif.

---

- hab jetzt hintergrundmusik, ebenfalls aus scaw die unser damaliger musiker sola erstellt hat. bin richtig happy, da er mir den einsatz seiner werke erlaubt hat!
- die minimap und aufgewirbelter staub passt sich farblich dem hintergrund an :)
- es gibt jetzt "umgebungspakete". aktuell gibt es aber erst das paket "wüste" :) . denke mal eis/gras sollten auch noch drin liegen mit etwas anderen eigenschaften. stadt wäre auch noch cool, aber dafür müsste ich definitiv anderen platzierungscode schreiben.

[marcgfx]

mal ein kleines interface update. habe die optionen alle nach unten verlagert, dadurch wirkt es etwas weniger überladen. habe mir auch überlegt die playerknöpfe kleiner zu machen, aber irgendwie hänge ich an denen. doof oder ok?
die strecken lassen sich übrigends auch als punktliste definieren, hier ein spezialfall mit nur zwei streckenpunkten :) . bei nur einem punkt generiert er einfach wieder ne eigene zufallsstrecke, denn den fall konnte ich nicht lösen :)