[Projekt] Devader

[marcgfx]

Devader ist ein Shoot'em Up mit strategischen Elementen.
http://falkenbrew.com

Der Weg dahin war aber alles andere als gerade.

Angefangen hat alles mit Cyberlympics... (die links werden leider kaum noch funktionieren)

http://data.cyberlympics.com/html/nav.html (dieser link ist aktualisiert / 2015)

Nostalgie
Erinnert sich noch wer an CodeWars? Ähnliches habe ich jetzt auch programmiert, nur läuft das ganze in Javascript in eurem Webbrowser. Man kann die KI für einen kleinen Panzer schreiben mit dem Ziel den Feind zu vernichten und selbst natürlich am leben zu bleiben. Falls sich jemand noch an SCAW erinnert, die Grafiken konnten mit nur kleinen Anpassungen wieder verwendet werden.

Die Aufgabe
Die KI wird in Javascript programmiert, in einem Online-Editor. Man kann bei den aktuellen Spielen 1-50 Panzer gleichzeitig steuern. Sobald mehrere eigene Einheiten im Spiel sind, sollte man auch berücksichtigen was die Kumpel so treiben und nicht blind drauf los ballern. Bislang habe ich nur eine KI geschrieben die dies berücksichtigt. Mit etwas Taktik dürften alle existierenden Intelligenzen zu besiegen sein.
Die verwendeten Einheiten sind kleine Panzer die auf 4 Kugelrädern rumdüsen. Dank den Kugelrädern lassen sie sich in jede Richtung frei bewegen, haben aber auch eine gewisse Trägheit was relativ realistische Bewegungen erzeugt. Ich nenne sie Quads, weil ich sie immer so nannte :) ...


Öffentliche Turniere
Ich möchte Preisgeld für die Sieger von Monatlichen Finalturnieren anbieten, bin mir aber noch nicht im klaren mit was für Beträgen ich da arbeiten sollte ;) ... Vorschläge? Die Turniere werden aufgezeichnet und die einzelnen Kämpfe können als "Video" später betrachtet werden. Jeder der einen Browser besitzt kann sich diese Turniere anschauen (sogar mit dem doofen IE8). Es gibt bereits schon einige Kämpfe online, es lohnt sich aber nicht alle anzuschauen, da es immer wieder die selben Bots sind.

Screenshots
Habe ich mal gemacht, aber eigentlich sind die Sinnlos. Die Screenshots sind teilweise grösser als sich direkt ein Video anzuschauen. Geht einfach auf die Webseite klickt mal ein Turnier und ein Match an. Live Demo ;) , ist doch viel besser...

Registration
Registration bei Onlito ist ein muss um eine AI speichern und eintragen zu können. Onlito ist auch ein Projekt von mir, es war somit die einfachste Lösung für mich.

Browser
Am besten funktionierts bei mir Chrome. Safari und Firefox machens gut, mit Opera gibts kleinere optische Probleme und ich hatte auch schon komische "hüpfer". IE ist die schlechteste Wahl mit den wenigsten Features, hat mich aber insgesamt trotzdem am meisten Zeit gekostet um es zum laufen zu bringen. Das muss Liebe sein.

Future
Weitere Aufgaben und Preisgeld, mal sehen ob ich Sponsoren finden kann, sonst muss ich selber blechen... Dank SCAW habe ich eine sehr sehr grosse Palette an Reserve-Einheiten, die auch schon funktionieren würden. Nur muss ich noch sinnvolle Aufgaben entwickeln und auch die Einheiten-Stats sind nicht so einfach einzustellen. Praktisch abgeschlossen habe ich bereits ein Cart-Fussball, bei dem die implementierte Physik gut zur Geltung kommt. User-Games sind ebenfalls in Planung, dann kann man mit Maus oder Tastatur selber in den Kampf ziehen oder auf dem virtuellen Fussballfeld Tore schiessen ;) ...


Ich würd mich echt über Kommentare freuen. Falls was nicht klar ist, ich brauch das Feedback! Wenn es detailierte Fragen zur Programmierung von Bots sind, wäre ich froh wenn ihr bei mir ins Forum schreiben könntet.

[joeydee]

Stell doch mal AI-Beispiele ins Forum oder ins Wiki. Oder hierher. Würde mich interessieren wie das bei dir aussieht.

[marcgfx]

Das folgende beispiel zeigt die default AI. Also jeder bot der keine AI hat, bekommt diese AI :) ...

Code: Alles auswählen

//default generic AI, works for any kind of unit
//marcgfx 2010

//get the distance between two objects
function getDist(a,b){
  var x=b.get("x")-a.get("x");
  var y=b.get("y")-a.get("y");
  var d=Math.sqrt(x*x+y*y);
  return {d:d,x:x,y:y};
}

//determines the angle between two objects
function getAngle(a,b){
  var d = getDist(a,b);
  if(!d.d){ return 0;}
  var angle=Math.acos(d.x/d.d);
  if(d.y<0){ angle = PI2-angle;}
  return angle;
}

//find closest target
function getTarget(){
  var min = 999999999;
  var best = 0;
  //loop through all foes/enemies
  for(var i=0;i<world.foe.length;i++){
    var obj = world.foe[i];
    //if opponent still has energy/health, h=health
    if(obj.get("h")>0){
      var dist = getDist(me,obj);
      //if the distance is smaller than the currently closest object,
      //a new best solution has been found, for equal distances use luck
      if(dist.d<min || (dist.d==min && Math.random()<0.5)){
        min=dist.d;
        best = obj;
      }
    }
  }
  return best;
}

//fire weapon of object, if component angle and target angle line up enough
//both angles must be absolute
function fire(obj,ca,ta){
  var dif=Math.abs(ca-ta);
  while(dif>PI2){ dif-=PI2;}
  if(dif>PI){ dif=PI2-dif;}
  if(dif<0.3){
    //fire all weapons of object
    obj.fire();
  }
}

//run component, aim at target
function run(p,target){
  var ta = getAngle(p,target);
  var ca = p.get("ca");
  var a = p.get("a");
  
  //fire weapon if properly aligned to target
  fire(p,ca,ta);
  //set rotation direction to
  //current relative angle + difference between target angle and absolute angle
  p.set("a",a+(ta-ca),10);
  
  //if componentent has subcomponents, use recursion
  if(p.sub){
    for(var i=0;i<p.sub.length;i++){
      run(p.sub[i],target);
    }  
  }
}

//get target
var target = getTarget();
      
//handle chassis/base
//if no target was found or no weapon is attached to base, random movement
if(!target || !me.getweapon()){
  //about 1% of the time do
  if(Math.random()<0.01){

    //set random angle
    me.set("a",Math.random()*PI2,Math.random()*6-3);

    //set random velocity
    var v = Math.random()*200-50;
    me.set("v",v*Math.random()*PI2,v);
  }
}else{
  //target and weapon exist, move in direction of target
  
  //small randomization
  var ta = getAngle(me,target)+Math.random()*0.1;

  //set angle, impulse 10
  me.set("a",ta,10);

  //set velocity to 500, ranomized impulse
  me.set("v",500,80+20*Math.random());

  //fire weapon if facing target
  fire(me,me.get("a"),ta);
}

//handle all turrets
if(me.sub && target){
  for(var i=0;i<me.sub.length;i++){
    run(me.sub[i],target);
  }
}

//handle shielding, load shield if 90% energy is available
if(me.get("e")>me.get("ep")*0.9 && !me.loadshield){
  me.loadshield=1;
}
//stop loading shield if more than 50% of energy has been used
else if(me.get("e")<me.get("ep")*0.5 && me.loadshield){
  me.loadshield=0;
}

//if shield must be loaded, set shield impulse
if(me.loadshield){ 
  me.set("s",me.get("sp"),400);
}
else{ 
  me.set("s",me.get("sp"),0);
}​

mich haben die ganzen get und set aufrufe ziemlich bald gestört, also habe ich eine vereinfachung eingeführt.
so kann statt me.get('a') auch me@a geschrieben werden. intern wird dann mit einer regular-expression das ganze wieder in ein getter gewandelt.

samples gibts aktuell sonst keine. muss ich noch unbedingt machen :)

[Despotist]

Wenn du dich im Zusammenhang KI auch für Künstliche Neuronale Netze interessierst ist das Programm Smart Sweepers inkl. Code vielleicht ganz interessant für dich. Da fahren auch kleine Panzer rum ;). Die könntest du ja als Default-Bot anbieten an denen sich die Spieler messen müssen. Dabei können verschiedene Lernstufen verschiedene Schwierigkeitsgrade repräsentieren.

[marcgfx]

werd ich mir auf alle fälle anschauen, danke. ich vermute aber dass ich noch was dazubauen muss, bevor neuronale-netze implementiert werden können. soweit ich mich erinnern kann, wird mit gewichtungen gearbeitet und diese müssten auch noch gespeichert werden können. Eine ablagemöglichkeit von infos auf der DB habe ich aber sowieso schon vorgesehen, damit wäre auch der anreiz da es umzusetzen. generell will ich aber eigentlich nicht massiv viele "default"-bots erstellen. schön wäre halt schon user-content ;) ...

[marcgfx]

bin weiterhin auf der Suche nach AI-Gegnern :) ... gibt es eine Schwelle, die den Eintritt erschwert die ich vielleicht reduzieren kann?

[marcgfx]

so richtig klappen wills nicht mit den AI-gegnern. vielleicht ist es zu schwierig? hat schon einige registrationen gegeben, danach haben sich nur noch wenige damit befasst, oder befassen können.

ich hatte jedenfalls selbst auch nicht gerade so viel zeit daran zu arbeiten und wenn dann hab ichs mit feature einbau vertrödelt... wenns spass macht ist es ja erlaubt :) . zu den features die nicht veröffentlich sind gehören manuelles steuern der einheiten über die tastatur, explosionen richten im umkreis schaden an, bremsen ist als funktion verfügbar (davor musste man in die gegenrichtung "fahren"), ...

die neuste "brilliante" idee die ich umsetze ist eine rennstrecke. natürlich nicht eine fixe sondern eine zufällig erstellte rennstrecke, wär ja sonst langweilig. damit der zufall aber berechenbar bleibt habe ich mich entschlossenen mit seeded random zu arbeiten. wär ja schade wenn ne tolle strecke nie mehr aufzufinden wäre. eine rennstrecke umzusetzen ist mit html nicht so leicht, deshalb bin ich auf SVG ausgewichen, etwas das ich schon länger probieren wollte. leider nicht ganz einfach cross-browser umzusetzen, bislang läuft es erstmals nur in firefox und chrome.

dann hab ich noch tonnenweise alte szenenobjekte wie bäume und steinbrocken aus scaw wieder gefunden und musste das mal mit der strecke kombinieren. allerdings ist das noch photoshop, ich denke es lässt sich aber noch im browser realisieren. das bild ist auf 50% runterskaliert worden. die rennstrecke ist svg und der rest sind png bilder. die querbalken represäntieren das was ich mir als checkpoints vorstelle.

streckengenerator

[marcgfx]

der random-strecken-generator wurde um das hinzufügen von bäumen erweitert. also das was im letzten bild noch fiktion war, wird realität :)
die bäume werfen schatten, in den meisten fällen siehts auch glaubhaft aus, als ob der schatten auf die autos fallen würde.

[joggel]

Wie hast Du die Schatten gemacht?
Also welche Technik verwendest du? Auch das Schatten auf den Autos ist.
Mir fiel auf, das fast jeder Baum seinen Schatten in eine andere Richtung wirft, is bestimmt nicht beabsichtigt.

[marcgfx]

sind mit schatten gerenderte 3D bäume, also 2D Bilder mit unterschiedlichem z-index (anzeigereihenfolge). die schatten sind garantiert alle in der selben richtung :) ... dass der schatten auf den autos landet liegt einfach daran dass das bild für den baum darüber gezeichnet wird.

[joggel]

Mhhh.. ich meine diese Schatten zum Beispiel:

[marcgfx]

die obere markierung betrifft 2 bäume, die überlappen sich dort etwas. vielleicht liegt es an der überlappung, dass es falsch auf dich wirkt. am besten gehst du vom baumstrunk aus, dort sollte sichtbar sein dass der schatten in die selbe richtung fällt. oder du glaubst mir einfach :) die bäume werden alle im selben projekt erzeugt und hintereinander mit der identischen lichteinstellung gerendert (wie auch alle anderen objekte auch). mir reicht das zumindest als beweis :)

[joggel]

Mh... ich glaube dir mal :D

[Eisflamme]

Sieht cool aus. Schöne Szenen einfach, die Bildchen für Bäume und Steine und die schlichten Böden mag ich irgendwie sehr.

[marcgfx]

Danke Eisflamme, bin eigentlich auch sehr zufrieden mit dem Style. Relativ schlicht aber nicht auf den ersten Blick repetitiv oder langweilig. Es werden noch andere Umgebungen definiert werden, bin mir nur noch nicht ganz im klaren wie ich das am besten löse. Ich muss mir ne Art Umgebungspakete zusammenstellen. Bäume und andere Objekte habe ich jedenfalls zu hauf schon generiert :) . Was definitiv fehlt sind halt Elemente wie kleine Hütten, Türme oder alles andere was von Menschenhand erschaffen wird (eben auch von einem Graphiker).

[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) 57530 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.