Recreating Splatoon's Ink System | Mix and Jam

This project is a take on the Ink System from one of my favorite games: Splatoon! Let’s explore game dev techniques and try to achieve a similar effect!
Check out @TNTCProject 's complementary video: kzbin.info/www/bejne/j4a6l3uOlL-Bedk
PROJECT REPOSITORY
-------------------------------------
github.com/mixandjam/Splatoon-Ink
REFERENCES
-------------------------------
Bronson's Website
bronsonzgeb.com/
Jammo
u3d.as/1G8A
Glitter Effect Using Shader Graph | NedsMakesGames
kzbin.info/www/bejne/mKW3gImbrbN8fc0
Bleeding Edge Effects on Mobile
kzbin.info/www/bejne/mWirc6t4m6iml9U
Unity | Metaballs
kzbin.info/www/bejne/oaavhqSEg9GBask
-------------------------------
Support Mix and Jam on Patreon!
www.patreon.com/mixandjam
Follow me on twitter!
andre_mc
Timestamps
--
00:00 - Intro
00:36 - Steps
00:59 - Character Setup
01:27 - Procedural Animation
02:13 - Shooting Particle
02:50 - Bronson Collab + Metaball Study
03:35 - Understanding Render Passes
03:56 -Brainstorming on Photoshop
05:03 - Custom Pass Implementation
05:29 - TNTC Collab
05:47 - Surface Painting
06:32 - Final Polish
06:55 - Result
07:24 - Download Information
#Splatoon

[@mixandjam]

Hey y'all! Thanks for watching! ♥ Don't forget to check out the complementary video from TNTC! 👉 kzbin.info/www/bejne/j4a6l3uOlL-Bedk

[@TheBlackbirdii]

it's all nice but i always strugle to convert the custom shaders into hdrp any chance to do a video how to convert the shaders into hdrp

[@SuperZeve]

I'm wanting to get into making games. I'm using Godot and I was wondering if you could make a video using Godot or comparing Unity, Unreal, Godot or any other engines you know of.

[@jamessage4142]

Love the videos, came from reddit. Please could you look at Reinhardt's shield mechanic, switching from 1st to 3rd person in overwatch?

[@CodeMonkeyUnity]

Thanks for explaining the thought process behind the shader effect, it looks awesome!

[@difanaufalpratama8765]

Woah, the legend itself code monkey

[@Mikelica69]

@@difanaufalpratama8765 yesss!!!

[@belkacemF]

legend

[@apnadekhtu]

hello code monkey i am your subscriber and i request you to make level editor for hyper casual game like stackball (casual azur games) i have started gamdev jerney but i am still stuck at this thought that how can i mange to create almost more than 1000 levels only in single scene? how does they do it please help me.

[@ShimiiyDev]

Come to think of it, how did the Splatoon devs implement the ink swimming mechanic? 🤔 I'm guessing there's some challenges to do that, like how to determine where can you swim in an optimized manner or etc...

[@MahdiBENABDALLAH13]

This video of Dan from new frame plus explains a big part of the animation transitions well kzbin.info/www/bejne/Y6CwhXuneJp6rqs

[@epicredhot5675]

I think OP was referring to the "what is and isn't an inked surface" logic, not the animation.

[@euden_yt]

Since you are modifying the texture of the ground. You can ray cast to sample the texture at that point and get the color of it. Black is ground, white is painted. If someone has another idea post it here.

[@cyrfung]

@@euden_yt Does that handle colors of the environment correctly? And places where the surface is obscured by obstacles in front of the camera? I’m a developer but have no knowledge in game development. For my kind of work I would think I need the data model to keep track of painted areas for swimming and scoring at the end, but I guess that would be computationally expensive for a game.

[@Olelumos]

@@cyrfung The environment colours have nothing to do with it. The splat map and the environment textures are separate, and you only sample from the former in this case. This effect is not screen space based so it will work totally fine without the camera looking at the relevant area.

[@TNTCProject]

Thanks André we really enjoyed working on this project with you!

[@Blackthornprod]

What a great video! Very satisfying ink effect - it's pure game juice!

[@SayedSafwan]

Hi

[@michael4numbers]

Hey mom, I want Splatoon 3 We have splatoon 3 at home. Splatoon 3 at home: Seriously though good job!

[@toxiquid]

its been 3000 years... welcome back, my guy!

[@Hugop_arts]

I freaking love how you used photoshop adjustment layers as a way to "prototype" the shadergraph interactions. Simply brilliant, def adding that approach to my repertoire

[@durururururururu]

When the world needed him the most, HE RETURNED!!!!!

[@Spyrai]

If you ever do the ink swimming system, it would be funny to have Jammo turn into a little submarine, lol

[@benjbest]

You won't believe what I was searching for all over the internet just a few days ago. Thanks a lot!

[@TheSixoul]

There's actually a lot of resources on this already. His way of describing it is simple and understandable. But I found guides or overviews of what to do a couple years ago when I first picked up splatoon and wanted to make it for pc. Still just above my head tho

[@ocha5110]

I really appreciate the research that you have done. it's always really cool to see how certain mechanic works

[@nyuppo]

One of my favourite channels, glad to see you at it again 👍

[@RoboTheKing13]

This is so cool dude. Good job to everyone involved. Been enjoying a lot of splatoon 3 since it dropped in september, so this was really great to see.

[@reversible8740]

He’s back!

[@no-tc3mt]

He ain't never leave tho

[@lucskywalker16]

I think I asked for this a while back! Glad to see you finally do it! This is the best most authentic tutorial for this system!

[@saultoons]

Very awesome, thanks for sharing this, it's so interesting to see and helps a lot to improve my understanding of shaders and how they can be used to create some funky effects!

[@bcesarg6]

This is so amazing! Congrats André and collaborators

[@HyBlock]

Hey bud, I've been fully into gamedev for 2 years now and things were starting to feel very stale - I have to tell you I'm lucky I found out about your channel just today. It has been a huge refreshment and very inspiring to see such popular mechanics being replicated in a relatively simple way, keep doing what you're doing :)

[@sunayama4650]

I've been waiting for this for so long! This is really cool! I thought this was going to be extremely complicated, but this is still leagues above how complex I imagined.

[@AlexBlackfrost]

I learn a lot with these videos. I love how you show the whole process of coming up with a solution to make an AAA game feature and the issues that show up in the way. Also: web-swinging 👀.

[@vincentlo8693]

Nice job! The blurring and levels adjustment to get the blobs was very clever. Next step: calculating all the area that the paint is covering! I'm curious how Splatoon devs implemented that part.

[@Skeffles]

Excellent recreation of the Splatoon ink! This was super interesting to hear how you achieved this.

[@redpandacreations]

The consistent quality of your content is amazing! Now trying to figure out where I can squeeze metaballs into my projects! XD

[@TheMessyCoder]

Great video! I saw a few assets that had this affect and always wondered what went on behind the scenes

[@ZygerGFX]

amazing video as per usual. Love watching your channel keep up the awesome work :D

[@WizardsCode]

This is one of your best. I love the detail you provide here, I can use this!

[@LuqmanHidayat00]

Finally~ been waiting for this series, especially with splatoon

[@jdmozo]

Wooo! new video!! Thanks for sharing the progress!

[@aquaarmour4924]

This was the one video I most wanted. Thanks a lot!!!!!

[@quaintgamestudio6149]

Thank you so much for this video and for git project, this project is so helpful for me❤

[@skycreeper0173]

This looks absolutely amazing! Great job everyone!

[@amnesiacsandwich66]

It's been a while since I saw one of your videos, I'm glad you uploaded again! :D

[@unityin1minute962]

He finally remembered his KZbin password

[@SethFunk]

Very nice and thorough thought process and troubleshooting!

[@VoonNBuddies]

Yo this is awesome! What a triumphant return! It's always so cool to see how you are able to pool experience and knowledge with other talented developers. There is a lot of creativity on display here. I do wish it was a little more on display though as much of the results of your had work is obscured by the player character and the splash effect when in third person. It may be nice to move the target point higher above the character, like in Splatoon. I noticed that in Splatoon the arch of the paint is high enough over the character that you can clearly track where it is traveling. In your recreation it is a little harder to track, and more importantly, harder to fully take in the technical artistry that you and your friends came up with. Compare the gameplay at 0:47 and 0:53 with 6:54. You can see in the former it is a lot easier to see where the paint is traveling and take in the post processing effects in the first clips. But, again, excellent work all around. Thanks for sharing so many interesting techniques!

[@why7893]

This is wonderful! Actually needed something similar for my project and this will be perfect for my needs!

[@GAMEGLiTcHDevelopment]

Another awesome video! Thank you for your tutorials!

[@iciukas]

Amazing effect

[@ktmochiii]

i learn something new everytime a new video drops. fkn awesome stuff

[@artsyomni]

Nobody: Not one single heckin’ soul in the entire known universe: Me: Jammo’s shoulders are looking nice.

[@artsyomni]

I hate this comment format so much. =P

[@mixandjam]

This comment is perfect LOL Just for context - Omni actually created Jammo! 👉kzbin.info/www/bejne/oHyoo6uJit1oarM

[@artsyomni]

@@mixandjam haha, well it was a team effort. And for a little more context, we needed to do a fix to his shoulders because the original version had some questionable vertex weights and it was especially apparent with the pose for the gun. Other people will be able to benefit from the change as well once the update goes out. =D

[@MookalH]

@@artsyomni i also hate the comment format, luv you tho

[@apnadekhtu]

@@mixandjam i request you to make level editor for hyper casual game like stackball (casual azur games) i have started gamdev journey but i am still stuck at this thought that how can i mange to create almost more than 1000 levels only in single scene? how does they do it please help me.sorry for the bad english.

[@MrDcx23]

Another great video. Thanks a lot for sharing your efforts!

[@jamesoverholt634]

The wait was well worth it, welcome back!

[@nintendogametuber]

Yes! I have been waiting for this for so long!

[@edurizzoalbu]

Awesome result! Very impressive!

[@dylaninthemovies]

4:33 - Ah yes, the old: "just blur it and then apply levels" trick known to so many substance designer artists, a real life saver!

[@playonce4186]

Blurring the spheres and adjusting the levels was quite amazing

[@xanderabbey8529]

I've always wondered how this worked! Thanks for this.

[@rib_rob_personal]

This was fantastic. I was wondering how to make the paint appear on textures for months. I knew projecting images for each bullet wouldn’t work because it would be way too inefficient. Great work!

[@emirunalan1287]

Amazing content! Loved it!

[@brandongreenland9632]

I’m really thinking of how a combination of all of your projects would look- to be fair, remastering some older projects with Jammo would also be great!

[@prakashgamedev4335]

very cool . Good to see you back !

[@Kevin_Anderson]

This is awesone. The process of how you came about how to blend the shapes together is interesting. It might be slightly large-scale for this channel, but can you consider doing a video on God Eater's bullet editing system? It basically allows the player to edit together and tweak chains of particle systems.

[@ElDonitazz]

This is definitely my favorite youtube channel.

[@bceg3961]

I just discovered the channel, I love it! I'm new to unity but I can already create a lot, I hope to one day reach your level!

[@FireJojoBoy]

It turned out amazing!

[@Kiran.KillStreak]

Great Effects and Efforts.

[@christianconnolly1296]

Thanks for the awesome videos!

[@MahixBats]

Thanks so much! Sounds like it was a really complicated process. But this will give me a head start on something I'd like to attempt making. Again, thank you~

[@svenbtb]

This was great! I remember attempting this on my own when I was feeling inspired by first discovering your channle a year or so ago, but I kinda failed at it lol... I'll have to download the git repo and check it out!

[@alexanderst.7993]

ngl i haven't even played the game, this looks so interesting!

[@TheSixoul]

It's a fun game. The ink and mesh painting part have been done by many other videos. What hasn't been done is making the gameplay where you detect opposing team ink percentage or paint another character or make the ink look as good as Nintendo got it to.

[@brishanf4526]

Welcome back. Good to see it

[@raphaeljaggerd3585]

I swear i once requested this from you. Thank you so much

[@Duckamoly]

Yes I have been wanting this!!!

[@LuisCassih]

Really good video! I'm working on an splatoon inspired game and this comes handy.

[@OmegaFalcon]

This is such an awesome channel!

[@user-wt7vm8ii6c]

Huge amount of work!

[@doblajesimberbe1966]

Your custom pass solution is simply awesome :O

[@alisonflf]

Great Job my friend

[@zojirushi1]

This channel is so underrated! 1 mil in the future! 👀

[@corbintheintern6229]

I was just wondering where you disappeared to. Glad you're still around!

[@Thonder]

YES A UPLOAD

[@ederhernandez5319]

Amazing videos!

[@RehtseStudio]

AWESOME👏. Really like your videos😃 Next one will be blend your character in the ink like in the game😊

[@GDGAI]

At first, I read “Making metaballs” as “Making meatballs”

[@Cosmik60]

*we're in Unity not ikea*

[@farrelio6045]

The editing quality is increasing, keep up the good work Btw can you recreate atack on titan mechanic

[@raphaelfelipe1404]

Man, you are a monster! lol Great work, that's is very insightful ♥️

[@martinvalerio5822]

It's so beatiful!

[@GameDevHQ]

Great job man!

[@yuvrajtak6936]

Full of knowledge 👍👍

[@RamblePrism]

Great work!

[@zaidmermam2524]

best Series in youtube !

[@DanFMN]

I’ve been wondering how do to something like this since I was little playing super mario sunshine! Thanks for this neat tutorial.

[@RugbugRedfern]

Wow that turned out so well...

[@GabrielAguiarProd]

Looks awesome, great solution on how to solve the fake volumetric question, well done! The cake is a lie

[@bloomgun3804]

Awesome performance !

[@codeace2696]

Nice to see a new video You are a amazing

[@shukytime3231]

Next do that he can swim in the ink

[@aurk9956]

no way man I've been thinking about this in my head for the past few days and now I see a video on it wow. does google have access to my head??

[@michaelcross8392]

100 love this content. I would LOVE to see something like the final fantasy tactics movement / facing mechanics.

[@thepoopfarter290]

The little robot is so cute!!

[@creativebeetle]

Excellent video! It seems that the Splatoon ink droplets also decrease in length as they fly to give a sense of weight and elasticity. They start as elongated blobs and quickly snap into sphere-like shapes.

[@Letalight]

Well done!

[@sonic89148]

i'd love to see an extension of this for swimming into the ink

[@Icon1306]

Long time no see... I might never develop a game but watching this is way too much fun

[@Beengus]

Yay he's back!

[@silchasruin4487]

This is awesome! Will definitely check out everything, just a small question. How does this affect performance on a much larger scale should you paint entire levels with different colours?

[@seamuskills]

this is awesome!

[@LowLevelLemmy]

amazing

[@EverlastingFaeVODs]

Welcome back!