Cube Slam är ett onlinespel utformat, designat och byggt för Google Creative Lab som visar upp möjligheterna med WebRTC API på ett lekfullt sätt. North Kingdom, har tillsammans med Public Class och Dinahmoe format det kreativa konceptet, användarupplevelsen, teknisk inriktning, design, art direction och produktion. Det är ett Pong-liknande spel, tagit till nästa nivå. De lade till fysik, hinder, extrafunktioner och effekter. Men viktigast av allt, man kan bjuda in vänner att spela ansikte mot ansikte, peer to peer, i realtid med din webbkamera. Spellogiken som kommunicerar via RTCDataChannels gör att du och din vän kan se varandra i den WebGL-drivna världen med hjälp av getUserMedia och RTCMediaStream. Om du vill spela spelet ensam har de skapat Bob, en AI-björn. Försök att slå honom, ju längre du spelar desto bättre blir han. Och du med.
Enheter och stationära reservdelar
Innan vi dyker in i WebGL-grejen vill jag också nämna den mobila versionen av spelet, som Public Class tog fram med lite CSS-magi. Det finns snart WebGL och webRTC-stöd i Chrome för Android och förhoppningsvis andra enheter, men under tiden gjorde de en CSS-version för att nå så många användare som möjligt. Det ses fortfarande i ett 3D-perspektiv men det använder sprite-sheets för tillgångarna och CSS för att placera elementen. Det går smidigt så länge som hårdvaruaccelererade CSS-övergångar stöds. Den körs till och med i 60 fps på en iPad 1, vilket är ganska fantastiskt.
Spellogiken i spelet är helt separerad från presentationslagret. Detta gör det möjligt att tillhandahålla olika renderare.
Skapa världen
Så här går vi, låt oss börja med scenen och hur den är uppbyggd. Världen är ganska så enkel, i den lågpoly-stil som har använts i många av deras tidigare projekt på North Kingdom. För att göra det lite dynamiskt siktade de på att skapa några element procedurmässigt för att göra varje spel unikt. I slutändan är i stort sett allt statiska maskor, men det hjälpte verkligen till i processen att skapa världen.
Terräng
Terrängen i fjärran är gjord av vanliga plan som manipuleras med hjälp av Perlin-brus. Ganska överflödigt men en rolig detalj är att bergen är slumpmässiga varje gång du besöker sidan. För att undvika att ytorna ser ut som ett rutnät när man bara förskjuter ett plans hörn så lades det först till ett slumpmässigt värde till vertexen i x- och z-riktningen, sedan slogs det ihop några hörn om avståndet mellan dem var tillräckligt nära och slutligen förskjutna längs y-axeln. Tre olika plan med samma process läggs till, men med olika parametrar, för att skapa de olika terrängnivåerna. Terrängen närmast arenan behövde se mer naturlig ut så det är ett handmodellerat nät. Det finns även djur som går på nätet, så en statisk modell gör det lättare att optimera bort en del när man fäster dem på ytan.
Skog
Träd distribueras också med Perlin-brus, men beräkningstiden för att placera träden i terrängen var för lång när spelet startade. Metoden användes för att generera den slutliga distributionen, men istället för att spara trädens position till en array som kan analyseras under körning. Eftersom det bara är byggt med primitiver, finns det inget behov av att ladda externa modeller, bara positionerna för att rita ut dem. Det lades till ett verktyg för att skapa en ny skog i inställningspanelen om du vill prova. Se upp, det tar lite tid att analysera om det är för många träd. För bättre prestanda slås alla träd samman till en enda geometri så det finns bara ett anrop för alla träden. Och ett för skuggplanen. Skuggan är justerad mot normalen för kollisionspunkten, men det finns inte en 100% noggrannhet med rotationen, det är därför skuggorna ibland kolliderar med triangeln under, vilket också är fallet om planet skär en angränsande triangel som är placerad högre.
Djur
Här är ett exempel på två sätt att styra en morfanimation. Genom att manuellt ställa in spelhuvudet eller spela det som en vanlig animation. Flytta musen för att få björnen att se hur den ser ut och klicka för att utlösa en liten animation.