Recreating Balatro's Game Feel | Mix and Jam

[Music] hi welcome to mix and jam a Channel about ging development experimentation and today's project is inspired by batro batro is a deck building game that combines the thrill of high stakes pooker and the Strategic decision- making of a Rog likee and besides being incredibly fun batro has a pretty solid game feel everything from selecting moving and playing cars is extremely polished so for this video I want to show how I try to recreate some aspects of this game field to practice my game development skills using Unity I started by creating a new project and adding a canvas to place all my UI elements then I created an object with the selectable components to represent the base card this allowed me to create a script that can detect all of the mouse interaction interfaces such as on pointer enter on pointer down and so on as an example the on drag events were used to activate the mouse follow logic most of batra's gameplay happens within slots so even though cars can freely move around they always have a set place to go back to the way I structured this was to have the cards always have a parent slot to which they were return to at the end of a drag event which in this case just means setting the cards local position to zero then I created another pattern object that that essentially functions as a container for all the slots and with this structure in place it was time to start implementing the card swap Behavior I created a script for the container that would listen to all of the card interaction events and when one specific card was being dragged I implemented a check on every frame to see if its position on the x-axis is bigger or smaller than any of the adjacent cards and if that's the case it swaps the par of the two cards and then reset the position of the one that's not being dragged and to wrap up the basic interactions I added a selection State on the card by using the onp pointer up event which changes the card's wi position the general gameplay was working but the movement itself looked very stiff so this is when I decided to separate the logic from the actual card visual I did this by making the base card instantiate A visual representation of it based on a prefab I created a script for this preap that on every frame made the visual follow the base card using interpolation the same was applied for its rotation that would slightly tilt towards direction of movement with these simple implementations the visuals were smoothly following the base card no matter where they move to and this made the card swap interaction already feel pretty great next thing was to make sure the script was listening to all of the events from the base card to which I added a lot of Animation using DWI so things like the shake on Hover and the position punch on selection when the car was being dragged I increased the visual scale and made it override its sorting order to always stay on on top of all the other cards and to replicate the same effect as the game I added a shadow image underneath the card that would offset its y position while being dragged to really give the impression that this card changed perspective batro also has this very nice 3D rotation effect when the cards are idle and also when you are hovering over the card to implement this I made sure to have an extra child object that would rotate by itself not to interfere on the parents transform values and when the card is Idle I made it so that it would use a sign function on the x axis and a cosine on the Y AIS making the card rotate on a circular path and when the card is being hovered I made it so that the mouse distance from the center determin the rotation values [Music] in the game you can notice that the player's hand has a slight curve for position and rotation so I decided to implement that by using an animation curve that will determine the position and rotation of set one thing I really wanted to try to replicate were the addition effects that makes cars look glossy and shiny but to better start visualizing this I created a custom card pixel art using the official character from the channel jammo then I created a Shader to represent two card editions present in the game polychrome and negative for the polychrome effect I used a twirl node to generate a spiral UV that adds to the offset from a hue node effectively changing the car's color with that pattern then I made it so that the car's rotation value was used for the twirl offset allowing it to move around when the card was was being rotated the negative effect implementation was a bit similar the main difference was that I inverted the colors from the main texture and made sure that the moving twirl was more intense on the character's art by isolating the colors into its own mask and to add the final touches to the project I created another shade for the general background that uses noise and more Twirls to destroy the textures UV and create the game's trippy effect I also made the game camera move ever so slightly using the noise attribute on the cinem machine component and to wrap it up I added some post processing and overlaid everything with an image of scan lines to simulate a CRT filter and after a bit of adjustments this is how the project turned out [Applause] [Music] [Applause] [Music] [Applause] if you're interested in downloading the project and checking out the code behind it there's a link for the Project's repository in the description of this video huge thanks to those who support me on patreon including these top tier supporters and if you want to see more videos like this consider subscribing and sharing this video with friends thank you so much for watching and I'll see you in the next one [Applause]

Channel: Mix and Jam

Views: 39,541

Keywords: mixandjam, mix and jam, unity tutorial, game development, unity game mechanic, unity development, game design, mix unity, jam unity, video essay game, balatro game dev, unity card, unity hearthstone, unity 2d card game, unity 2d card foil, unity balatro

Id: I1dAZuWurw4

Length: 7min 20sec (440 seconds)

Published: Mon Apr 29 2024