Lyra is a Starter Game for Unreal Engine, available on the Marketplace. It’s a great reference, especially for UI, and has several useful plugins. The documentation has improved greatly since it was first released, still, the community documentation is worth reading and here I collect what I find.
Note: The gallery view doesn’t support linking from the images, so the caption has the controller name and I’ve left a comment with a direct link to it in Xbox Design Lab.
My favourite project at my previous employer was making a car configurator for BMW. I wish I could share our initial prototype as it was immensely satisfying, but here are some slides showing what we did:
What I loved the most was all the high quality images for all possible configurations. So no matter what choices the user made, the car looked fantastic. This was back in 2011 so pre-rendered images was the way to go. Now it’s 2016 and Microsoft just launched the Xbox Design Lab which allows you to design your own controller and see it update in realtime in 3D. It felt so great that I’ve been playing with it all night and woke up early full of ideas for thematic controllers!
I naturally started with red and black, as I always found that combination stunning. It’s not surprising that Deadpool picked that as his suite colours when he copiedhonoured Spiderman.
Deadpool 1
Deadpool 2
My Deadpool reference
He’s got a more subtle yet stunning variation in Uncanny X-Force, but it’s a more subtle reference.
My Favourite Canadian (on the left) X-Force reference
Deadpool X-Force
Batman, Robin, and Nightwing
I could probably do a whole gallery of just the Batman family of heroes, but I kept it to what I think would be most recognisable. Today Batman is mostly depicted as black and dark gray with an occasional yellow, but he started light blue and light gray with yellow. So I went for a few variations.
My The Bat/Batman reference
The Bat
My Batman Cartoon reference
Batman Cartoon
My Batman Comic reference
Batman Comic
My Robin reference
Robin
My Nightwing reference
Nightwing
My Nightwing Rebirth/Red Nightwing reference
Nightwing Rebirth
I tried making a Robin Retro but just couldn’t get it to work.
My Robin Retro reference
Robin Retro
Teenage Mutant Ninja Turtles
My TMNT reference image
I kept it simple with just green and yellow, then adding their distinct colours as highlight.
Turtle Michelangelo
Turtle Leonardo
Turtle Raphael
Turtle Donatello
Transformers
My first attempts just playing with the tool looked a lot like a Decepticon, so I rolled with it. I’ll play a bit with the logos later as these turned out to be more references to specific transformers.
My Autobot/Optimus Prime reference
Autobot
My Decepticon/Scorponok reference
Decepticon
The Nintendo and Super Nintendo consoles
I’ve been playing around with RetroPie, with my own UI for it, and hopefully I’ll blog about that soon. The iconic look worked out pretty good IMHO.
My NES reference
NES
My SNES PAL reference
SNES PAL
My SNES NTSC reference
SNES NTSC
Voltron
I remember the Voltron series as a kid, and if you haven’t seen the Netflix remake it’s worth checking out! I wanted to use the coloured X/Y/A/B buttons as a subtle hint to the combined robot form, but the thumbsticks weren’t available in white so the black took over a bit. The lion themed controls turned out pretty good though.
My Voltron reference image
Voltron
Voltron Green
Voltron Blue
Voltron Yellow
Voltron Red
Voltron Black
Fallout
Fallout 1 & 2 are one of my favourite video games of all time. The newer ones are good games in themselves, and highly popular. So it was no surprise that the most voted controller was the Vault 101 (Fallout 3) blue/yellow controller. I felt I could improve it a bit, and also created a bluer version remembering the older games.
My Vault 13 reference
Vault 13
My Vault 111 reference
Vault 111
I really hope to see more of this, although the prices have to go down a bit. $79.99 for one custom controller is pretty pricey, and then add shipping and customs/tax it’s just a no. For now.
We didn’t finish the app before Christmas but when Deezer offered to sponsor us for the Music Hack Day in Cannes, France, we jumped on the opportunity to work on the app!
Our flight got delayed and we ended up exhausted and late at the hackathon. Still, we managed to hide a few features to focus on the core: beautiful artist images. We’ll be adding them back in time.
What we noticed though is that having it as an app is too unstable. If you leave the app by searching for a song, it breaks. We might need to make it as a separate page, like Mentor.fm. The problem though is that it won’t be able to support Spotify.
We did a “welcome page” though, but it needs more work.
Deezer have been great so far and we’re eternally grateful. We’re currently working on PartySaver outside of hackathons.
Windows Phone 7 supports running apps and doing bigger data transfers when it’s connected to WiFi and a battery charger. It would be great to have Folding@Home running then! Sure the phone isn’t all that powerfull but it would have a good spread of users if it couldn’t run as a mobile app.
The date has come, and passed! Me, Jonas and Johan are at the Music Hack Day in London like we planned last time. We continued working on PartySaver [Read about iterations #1, #2, and #3] and focused on two major additions: a Deezer app and a connection to Philips HUE lamps.
The architecture of PartySaver separates the player app from the party functionalities. Meaning it was pretty simple to create a Deezer app since we already had a Spotify app. (actually, it required quite some refactoring since this is hackathon code :P)
Integrating Philips HUE proved to be quite easy, but also disappointing at the same time. The idea was to take the dominant color from the artist wallpapers and just set the lights to that color. First we noticed that the dominant color was actually most often a shade of gray. The second surprise was how lacking the lights are in the color spectrum. If you don’t send a color it can handle, it will grab the “nearest” thing which is not the nearest color as I’d imagine it (different hue basically) but instead it gets whitened.
The image above shows a CIE color chart, and the little green triangle inside it is what Philips HUE can handle. Not much in the blue/green/yellow space… Next hack I’ll try to find a better color matching algorithm than the built in one.
Oh, a small improvement we made is that to find a party you just go to partysaver.se and it’ll check for parties within your wifi (actually, your public IP).
Next time we’ll also try to create the “standard” party functionality: party queue manager for party guests.
Update 2013-12-12: There’s a video of our presentation on YouTube. Also, we’ve talked to Deezer yesterday and are aiming at releasing PartySaver on their platform hopefully before Christmas (i.e. next week!)
Finally! That sums up how it feels right now. My third attempt at creating a Spotify Screensaver! [Read about #1 and #2] Jonas, Johan and me took a different approach this time and were much more successful. Now we have a Spotify app that sends information about what song is currently playing to our broadcaster, which sends it to all connected devices.
As you can see in the image, it opens up a whole new bag of tricks! Like communicating back to Spotify from other sources. We even did that! We made a small controller app that you can access from your phone for example.
So the flow’s like this: Start Spotify and our app. That will give you a link to follow for receiver clients that will show a nice visualization (like your TV and an iPad). It’ll also give you a link to the controller (like your phone). Then you’ll use Spotify just as usual. Queue songs, search for artists, play and skip songs, etc. PartySaver will keep the clients in sync. If you need the music to stop, just pull up your phone!
So there we have it! On my next party I’ll definitely use this and put on my iPad (next to the window) and on my TV. If I don’t like the song that’s playing, I’ll just change it from my phone.
Hopefully we’ll continue this next time and add more “party features”. Such as anyone being able to add songs to the playlist from their own phones. Or make alternative visualizations, like 3D thingies.
Update: We won the Spotify award at the hackathon! Yay!! We also got some interest from Deezer, so we might do something with that player too… 😉
About 8 months ago me and my friend Jocke did a screensaver for Spotify, based on an idea I had blogged about earlier. The main idea circles around the web player version of Spotify, because it’s the only way we’ve figured out how to do full screen apps. Our last attempt was a bit of a failure, because nothing was animating (which makes for a really bad screensaver). So during Way Out West I gave it another try, this time with Johan and Jonas who I’ve made Spelkalendern with.
Early we concluded that web app was the only way, again. So we changed our bookmarklet into a Chrome extension. As a little cute trick, the Chrome extension automatically adds a “hack” button to the page when you visit the player. When clicked it opens our app and hacks the iframe around it to allow fullscreen.
Now as Chrome plugin
We really should change it to allow any app to go fullscreen. Hmmm…
We had one small problem though. The app SDK for the web player was no longer supported! It took a few hours to hack around it but we were able to solve it by changing the local server a bit.
Last time we mucked around with WebGL and that slowed us down. So this time it was simple HTML and CSS for the styling. We went with a clean look that’s very appealing. Using a service to get cool desktop sized artist photos and then the regular album art of the upcoming songs.
Since it was coded very modular, we could have a view to show various playlists to start with but we could also visualize anything you’re playing (like search results or just start playing inside some artist page). This was useful at my party last weekend.
Spotify screensaver #2 running on my TV through Apple TV
Some time ago I blogged about an idea of making a Spotify screensaver. This weekend at the MusicHackDay in Stockholm me, Jocke and Vincent finally tried our hands at doing this by creating PartySaver. The first quest was: How do we play music and show music info, in fullscreen?
There’s several ways to play Spotify music: Spotify players (Win, Mac, iOS, etc), Spotify web player, and libspotify. We opted for the web player, but a developer edition which supports apps. We quickly noticed the apps aren’t allowed to run in fullscreen! So we created a bookmarklet that “hacks” the player to allow fullscreen apps.
Then I focused on the new 1.0 API to get the users playlists, and then the tracks from that playlist. While Jocke spent most of his time on WebGL and three.js so we could have the cover arts in a 3D mosaic that would animate and move. Sadly, we never got that far. Regardless, it went pretty good and we’re happy – so we’re going to try a CSS3 version. If we make it, we might even have a sponsor for a real screensaver. The question is, how should it be done?
Do you ever get the feeling that the taxi you took didn’t go the shortest route? Sure it could be because of traffic or road work, but you still wonder if he’s taking a longer road than necessary. And why wouldn’t you? The driver gets paid by kilometer after all!
The idea would be to have an app that you start when the taxi starts, and then stop when you’ve arrived at the location. It would then plot out the route on a map, with some stats as time taken and lenght “driven”. It would also plot out the Google Map route so you can compare.
I run a small media computer on my TV and often have Spotify running. The problem is that the screen gets burned in if I don’t have a screensaver, but if I have a screensaver on I can’t see the name of the song playing.
So the simple idea would be a neat screensaver that shows the current playing track. A bonus would be to show the album cover and next track, and follow the beat. As it would be a third-party application the easiest way would be to parse the artist and song title from Spotify’s Window title.
By using Gracenote it could show the album cover and lyrics, but probably not feasible for a free screensaver.
The hardest part would be inventing a cool or fun enough visualization. Maybe a self playing game, like Tetris, Audiosurf, Pong or Snake? A Rubicks cube solving itself? Maybe a nice fish tank? Or random particle effects? What would you like to see as the visualization?
JP's Journal 