SamStallion

LD 41

Art of 00Boyfriend

After a lengthy debate over the "Combine 2 Incompatible Genres" theme and various forms of tower defense, we landed on "platform shooter dating sim". We chose a "secret agent" aesthetic to mesh with our theme combination. We imagined that dating for a spy would be particularly challenging given an overly demanding love interest, having extremely sensitive windows in which to answer text messages.

boyfriendposter.png

For jams, I like to tackle easiest things first. I find that I'll have ideas about the more challenging visuals as I'm putting together simple pieces. The phone was actually the easiest part for me so I ironed out the details of that interface before we broke for the first night. I threw in "Spyrizon" as a nod to the spy theme. We found later that the fonts weren't working well as the phone shook and rotated. Unfortunately, by that time it was too late to experiment with substitutions.

Next, I tackled our hero. I initially had an idea that our hero would be a classic Dick Tracy type with a big hat. This didn't align with the team's idea for the game and I shifted the hero towards a modern James Bond spy. We wanted to put emphasis on the hero's face, he didn't have a hat anymore so I gave him a big ridiculous hero chin. His chin became an anchor for his animations and I placed emphasis on this aspect in all his actions.

hero.png

I have an extensive pixel art pallet I built for making games. The pallet consists of luminosity from 0-100 in increments of 5. Then hues are applied on top across the rainbow. From there is a gradient map that shifts the colors towards yellow in the lighter lumens, and towards indigo in the darker. The pallet is then duplicated and desaturated. Then both are copied twice and shifted towards warm and cool tones. Download the pallet here!

http://swordandstallion.com/00boyfriend/pixelpallet3.psd

For the hero and his weapons, I used the most saturated and normalized colors. The phone uses the same pallet as the hero. The enemies use a cool shifted pallet. Backgrounds and props use a cool shifted pallet that is also desaturated. I adjusted the enemy weapons to look a little less powerful than the hero's; pallet shifted with sights and silencers removed.

baddies.png

I found inspiration for the "00Boyfriend" logo on the first night and decided that doing my traditional pixel art style and pallet would take too much time and might not do justice to my idea. I whipped up the logo in the morning and ran it through "nearest neighbor" scaling a couple times.

I gathered a bunch of inspiration early on to draw from. I use Pinterest to collect my ideas. The main game was inspired by James Bond & Mission Impossible movies, Metal Gear Solid, Metal Slug, Broforce, Jetpack Joyride, Omega Strike and Gunpoint games. There isn't much outside of the title but I also drew inspiration from dating sim games like Dream Daddy and Hatoful Boyfriend. You can check out the Pinterest board here!

https://www.pinterest.com/swordnstallion/ludum-dare-41/

We decided on aiming for three levels; an office in the city, a warehouse, and a military installation. In a jam this is really ambitious. I immediately struggled with platforming tiles and backgrounds for an office. It was a challenge to figure out how a platformer in an office building would look. Floating platforms and scalable walls aren't common in a standard business environment.

I pushed through the office on the second day and came up with a half-baked tileset. The warehouse environment ended up being a bit easier. By this time I got a solid grasp on how 47 slice tiles work with Game Maker Studio 2. By this time it was late into the second day. More caffeine! Patrick and I pushed through the night and I hammered out the third level. Having a better idea how to handle 47 slice, I revisited the office tileset and adjusted it to be more in line with the other two.

tiles.png

Now that the majority of the game art was covered, I started on background props like desks, chairs, forklifts, water coolers, etc. I made a few love interest sprites and called it a night. I slept about 3 hours and went back at it, preparing screenshots and video for our submission.

https://www.youtube.com/watch?v=6rQi9lzHV7k

There's a lot that could have been better. I'm glad the art at least feels cohesive. A lot of time got burned on the office art that could have been better spent. I have a good handle on 47 slice now so future projects can go much faster. I would have loved to do big pixel art portraits for the love interests; it wasn't in the time budget. I had an idea for a giant eel boss (ala Metal Slug) for the end level with only 3 hours to submission, well that just wasn't gonna fly lol, I was probably just delirious.

Thanks for playing our game!

https://ldjam.com/events/ludum-dare/41/00boyfriend-a-spys-dating-sim

gameover.png

Ludum Dare 46

Fleur Defense - Launch Trailer

Finally got a trailer cut for our game!

https://www.youtube.com/watch?v=vSYEcNDU4Z4

So fried coming up with all the art for this game, then going back to work, and still making a trailer. I'll try to put together an "Art of Fleur Defense" post this weekend, after a good long sleep. Hope you all like our game!

https://ldjam.com/events/ludum-dare/46/fleur-defense

hero-demo.gif

How to Art of Fleur Defense

Below are real, unedited sketches for characters in our game. The sketches were just enough to get an idea of what to create when I get into Photoshop and Pyxel.

Play Fleur Defense Now! https://ldjam.com/events/ludum-dare/46/fleur-defense

For this jam I feel like we were all on the same page right from the get go. We were already eye-balling the “Garden” theme, perhaps under the influence of a recently popular farming game. I started out by creating our hero straight away.

hero-demo.gif

sketch-hero.jpg

It felt pretty good to get rolling on the game right away. Our team has a great deal of trust and we're able to allow each other to do what we're best at without getting hung up on details. We brainstormed a few things and got the ball rolling.

sketch-notes.jpg

I made up our first defense plant next. I tried to make things that the developers would need as they went along, although sometimes its best to go with inspiration and come back to immediate needs. I like to sketch things at least three times usually, and I'll flip it over to double check proportions so it doesn't look weird (as I'm heavily right handed).

sketch-spitter.jpg

After getting some sleep on the first night (having worked at regular day at the ole 9 to 5) I started in on our first enemy bug. I thought of the bugs in Starship Troopers, so I put the movie on while I worked. This wasn't a great idea, probably a better idea to put on something super boring with not a lot of action. I'm not sure why I did, but I decided to imagine a 4 legged walking cycle for a bug, rather than just looking one up. Still came out ok.

sketch-4leg.jpg

starship-run-demo.gif

The developers wanted another defensive plant, one that was melee or short ranged. Fortunately I had some axe & shield seeds!

sketch-melee.jpg

Wait that's no axe! Well I decided that a plant, being more afraid of axes than swords, might just use one to defend itself. And the shape is a bit more like a leaf. I rounded out our plants with two growth stages to show their progression.

plant-demo.gif

We wanted a smaller, faster bug and Tristan helped me out with some inspiration, finding a nice photo of an aphid. This time I wanted to do a 6 legged walk cycle. Conveniently I managed to do it with just 3 frames! Nice!

sketch-6leg.jpg

aphid-run-demo.gif

Its important to give yourself little challenges in a jam, it's a great way to learn! Tristan continued to help me out by finding more inspirational photos. We were on the hunt for our "mother" plant, as it was almost as important as our hero and I wanted to get it done before it was too late. We found some amazing photos of a Jade Vine plant, and I used it to make our mama plant.

sketch-mama.jpg

The next big challenge was our environment. I made a foreground and background tile set that kinda looked like it could be in a plant nursery or greenhouse, with some lighter colored cement and medium raw woods and plenty of green. I threw in a greek meander for style points. Then the hardest of all, a way to represent that the game takes place inside a greenhouse.

sketch-greenhouse.jpg

I wanted to show a lovely background behind the glass and came up with this, kind of inspired by classic Mario and Kirby games. It was here that I started to break out Illustrator, its easier to come up with big shapes like this than starting out with pixel art.

sketch-farbg.jpg

Finally I concentrated on our title screen. This was the only thing that we honestly struggled with, right up to the final day. We couldn't decide on a name for our game! I played around with naming our hero, and looked at baby names that have something to do with flowers. I landed on Fleur, it seemed fitting. I played around with some titles with her name, even just "Fleur" as the title, finally coming to Fleur Defense and it stuck as it both described our hero and the mechanics of the game in a simple way. I did the title also in illustrator.

sketch-title1.jpg sketch-title2.jpg sketch-title3.jpg

Our style well established by this point, I came up with a rolypoly bug to take out defense plants. Play testing at this point clued us in that we needed to give the player a reason to move around the map instead of staying put. We came up with lemon trees that need to be defended, so I came up with some animations for those. By then it was ready for release!

Thanks for checking out the art of Fleur Defense and playing our game!

https://ldjam.com/events/ludum-dare/46/fleur-defense

itch-widecover.png

How to use tools for a great jam game!

As Ludum Dare voting is wrapping up we wanted to give thanks to the tools developers that have helped us along the way. Without these fine folks we wouldn't have gotten along nearly as far as we did with our game!

plant-demo.gif

First a shout out to Daniel Kvarfordt Danik112 who develops Pyxel Edit! This pixel editor is extremely valuable for doing animations and tile sets. Honestly I’m more comfortable with Photoshop after many years using it, this jam I found myself going straight to Pyxel, skipping Photoshop more often than not. Get Pyxel Edit here! https://pyxeledit.com/get.php

fd-pyxel.png

result3.gif

For some of our animations, it was quicker to get attractive solutions using tools from CodeManuPro and DavitMasia! For some particle effects we using Pixel FX Designer. I’ve created so many great particles with this engine, and it’s great for exporting to pixel art and looping it. There are so many options to experiment with, It’s really fun to just tinker around with this tool making weird pixel effects. Get Pixel FX Designer here! https://codemanu.itch.io/particle-fx-designer

fd-particle.png

tree-ded1demo.gif

To save some more time, we used JuiceFX to do some idle, hit, and break animations. These kinds of animations can be tedious by hand, JuiceFX really makes them a snap! JuiceFX is also from creators CodeManuPro and DavitMasia, you can get it here! https://codemanu.itch.io/juicefx

fd-juice.png

We also used Photoshop and Illustrator for some of the larger graphics in our game. I did try to use TileSetter https://led.itch.io/tilesetter for our tile set, but I couldn't quite get it to work properly and to agree with GameMaker Studio. I'd also like to give Smear FX https://codemanu.itch.io/smear-fx a try, it was too close to the jam for me to pick up a new tool.

itch-banner.png

All these assets were brought into Game Maker Studio 2 to make Fleur Defense and we’re overjoyed with the game we could put together for the jam. A huge thanks to these tools developers who give back to the community and making Fleur Defense a reality!

Try Fleur Defense Now! https://ldjam.com/events/ludum-dare/46/fleur-defense

idle-4x.gif