2D Sprite Stacked Character Tutorial | Godot v3.5.1

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 87

  • @Joshulties
    @Joshulties  10 месяцев назад +9

    I've uploaded a demo project for this 2D Character Animation on github.
    github.com/Joshulties/Godot_3.5.1_2DPlayerAnimation.git

    • @3r1kz
      @3r1kz 9 месяцев назад

      I'm new to GODOT 4. When I open the project the images are very blurry. I dont have any option to remove the filter. Godot says that the objects are read-only.
      Is there a fix for this?

    • @Joshulties
      @Joshulties  9 месяцев назад +2

      @@3r1kz The project file that I posted on github was meant for Godot 3.5.1.
      But to answer your question about blurry sprite: Project settings > Rendering > Textures > Canvas Textures > Default Texture Filter to either Nearest or Nearest Mipmap.

    • @3r1kz
      @3r1kz 9 месяцев назад

      @@Joshulties Thanks man, I'll try this

  • @dispenser996
    @dispenser996 Год назад +40

    Man, I've been struggling with this for so long, so I scrapped it and literally made a game where the characters don't even have arms or legs. Excellent video!

  • @acertainredburnygirl5265
    @acertainredburnygirl5265 5 месяцев назад +4

    0:08 thank you for the warning, I could have blinded myself

  • @Raven14n
    @Raven14n 5 месяцев назад +7

    You coded the arm like magic bro!!

  • @pro_rookie_gamedev
    @pro_rookie_gamedev Год назад +5

    I like the animation on the character's eyes.

  • @alexsandrzhemanov5710
    @alexsandrzhemanov5710 9 месяцев назад

    iji sound fills me with determination.

  • @elverman
    @elverman Год назад +4

    Thank you for making this video! It was sooooo helpful!

  • @boom9881
    @boom9881 4 месяца назад

    Thank you. Really needed this I had a project going on.

  • @NaturallyIntelligent
    @NaturallyIntelligent Год назад +21

    This isn't procedural animation, which doesn't use animated sprites. However it is a good technique to reduce hand-drawn frames

    • @Joshulties
      @Joshulties  Год назад +10

      I originally called it procedural animation because it was based on Faxdoc's tweet, in which they did call it. And even though I recognize that it isn't truly proc. animated, I don't know if there's a proper name for this kind of thing.

    • @finnbunker6
      @finnbunker6 7 месяцев назад +1

      @@Joshulties Well can you please change the title because I just wasted my time watching this when I'm trying to learn procedural animation

    • @iantrolington6594
      @iantrolington6594 7 месяцев назад

      @@finnbunker6 Yea I just got clickbaited as well trying to look into procedural animation for godot. This is just normal animation player technique, like wtf? Everyone who has played with the animation player already understands this...

  • @tprime2702
    @tprime2702 6 месяцев назад

    So, I was struggling with my own attempt at this because of the atan2 functions for a while. My biggest gripe is trying to tie the animated sprite 2d to the origin of the collision shape 2d for the player in godot regardless of animation change.
    What I actually did was animate the sprite stacks outside of godot and then upload and either boolian check the visibility on the sprite2ds that I want seen when animating.
    So long as the collision box isn't impeded, outta sight outta mind.

  • @szu7422
    @szu7422 Год назад

    Thanks for taking the time to make this bro

  • @dynstinn
    @dynstinn Год назад +2

    The end😫

    • @Joshulties
      @Joshulties  Год назад +1

      We don't talk about that

    • @dynstinn
      @dynstinn Год назад +1

      @@Joshulties we dont, I will take this to my grave, so long mate.🫡🫥. I was never here.

  • @MichaelZesty
    @MichaelZesty Год назад

    Pretty awesome!

  • @ERKEK2000
    @ERKEK2000 3 месяца назад

    very helpful thanks

  • @PHOBOS1530
    @PHOBOS1530 2 месяца назад

    I wonder how about the slope?

  • @bacalhau_seco
    @bacalhau_seco Год назад

    very cool

  • @j-kevinampong1379
    @j-kevinampong1379 Год назад +1

    Can you make tutorial about how you how to do bullet line, cuz I am always using bullet projectile I want to how to make a bullet line

    • @Joshulties
      @Joshulties  Год назад +4

      I don't normally make video tutorials as they take too long for me to make. The hitscan bullet is using a very long raycast2D node with a line2D as a child node. In the script, a function called 'scan()' is called in the process().
      func scan():
      if (is_colliding() and is_active):
      is_active = false
      var target_hit = get_collider()
      var impact = to_local(get_collision_point())
      line.points[0] = Vector2.ZERO
      line.points[1] = impact
      # Collision with an entity
      if (target_hit.is_in_group("Enemy")):
      target_hit.hurt(damage)
      _create_impact(get_collision_point())
      # Collision with the level
      else:
      _create_debrissmoke(get_collision_point(), get_collision_normal().angle())
      The bullet lifetime should not be more than a second (because it's a bullet), but it also shouldn't be too short that this function isn't completed before it gets queue_free'd. The way I have the timer is using the process and delta way, but you could probably have a timer node set for 0.075 seconds, which would queue_free once the timer is finished.

    • @j-kevinampong1379
      @j-kevinampong1379 Год назад +1

      @@JoshultiesI appreciate your effort and work, thanks you for sharing this, I really need this :)

  • @old_valera33
    @old_valera33 8 месяцев назад

    Hi, thanks for the video. i have a question :
    is it possible to do the same for animation?
    I have an animation where a man draws a bow, and I want the animation to rotate depending on the cursor position.

    • @Joshulties
      @Joshulties  8 месяцев назад

      Hey, sorry for the late reply. I havrn't done it before, but that is definitely possible. What you'd have to do is have separate animations for each arm that, when played together, would draw the bow back. Also you'd need to make sure that the arms are in the right direction so the hands are where they should be in the animation.

  • @podlivichKmK
    @podlivichKmK 4 месяца назад

    Great video, but I ran into one problem. In my project the hand rotate completely static. I mean, in your video, when you move the cursor, the pixels on your hand also move but this does not happen in my project. What could be the problem?

    • @Joshulties
      @Joshulties  4 месяца назад

      Do you mean how the arm looks pixelated when it rotates? If that's what you're referring to, then it's an option in the project settings. (Project Settings > Display > Window > Stretch Mode > Viewport)
      Also set aspect to anything other than ignore.

    • @podlivichKmK
      @podlivichKmK 4 месяца назад

      @@Joshulties Yes, that's what I mean. I already have such settings, but it doesn't help

    • @Joshulties
      @Joshulties  4 месяца назад

      @@podlivichKmK The only thing I can think of is that the resolution size of your game is large to the point that the pixel are small. In my project, I have the window length and width set to 274x154, but I'm not sure if that'll help.

  • @doomestus
    @doomestus Год назад

    Want to make a game with Godot. (2D platformer/shooter/something-else)
    Looked at many tutorials to find info. 🤓
    Then saw this tutorial and videos of your games.
    They have the exact mechanics I want to make, but don't know how. 🧐
    Now I want to study your tutorials. 🤔
    Thank you for your videos! ❤
    Shame that you don't have tutorials for all your mechanics.
    I would love to know more about how they are made. At least barebones.

  • @octaveroi
    @octaveroi 11 месяцев назад +1

    This is working on Godot 4 ? I don't understand anything •᷄ࡇ•᷅

    • @Joshulties
      @Joshulties  11 месяцев назад +1

      This is in Godot 3.5.1

    • @octaveroi
      @octaveroi 11 месяцев назад

      @@Joshulties ok thanks for the answer

  • @recettelemon
    @recettelemon Год назад

    Cool👍

  • @Havocian_o7
    @Havocian_o7 10 месяцев назад

    I would really like to have this code, because everything is broken for me..

    • @Joshulties
      @Joshulties  10 месяцев назад

      As I've replied to another comment about this, I'll try to prepare a project with the code and such for download.
      To answer the other comment that you had before, to prevent the bobbing animation from being smooth, you need to select discrete for update mode in the animation player.
      Also, if you want more help, tell me what is broken.

    • @Joshulties
      @Joshulties  10 месяцев назад

      Here is a github page for the demo project:
      github.com/Joshulties/Godot_3.5.1_2DPlayerAnimation.git

    • @Havocian_o7
      @Havocian_o7 10 месяцев назад

      @@Joshulties Ah, yes, I deleted that bobbing one since I found a fix. In terms of what is failing, the state machine has a certain class name and functions that return errors for me.

    • @Joshulties
      @Joshulties  10 месяцев назад

      @@Havocian_o7 Ah, that's my mistake; the tutorial is using a state machine script from GameEndeavor's FSM video, which is why you're getting errors because there needs to be a class with those specific functions.
      The demo project is up now, so you should be able to examine it.

    • @Havocian_o7
      @Havocian_o7 10 месяцев назад

      @@Joshulties Ah, sorry, I must be retarded. I should've noticed that, lol.

  • @fajnial
    @fajnial 8 месяцев назад

    Hi, I have been trying to replecate this effect. I have used the same sprites as you, but when I change the strectch mode to viewport, it becomes pixelated, but the pixels are very small. Do you know how can I fix this?

    • @Joshulties
      @Joshulties  8 месяцев назад

      Below stretch mode set to "keep", or set the window resolution.

    • @fajnial
      @fajnial 8 месяцев назад

      @@Joshulties it is on keep and my window resolution is 960 by 540

    • @Joshulties
      @Joshulties  8 месяцев назад

      @@fajnial Decrease the resolution size more. I think this project had a resolution of around 320 x 160

    • @fajnial
      @fajnial 8 месяцев назад

      @@Joshulties is we are talking about viewport width and hight it's same as in your project : 320 by 180. I have checed all the procject settings and they seem the same.

    • @Joshulties
      @Joshulties  8 месяцев назад

      @@fajnial What about the test width and test height? Set it to something high. That's probably the only thing I can think of that's causing your game's window to be small.
      If that doesn't fix it, I don't know how else to help.

  • @xenero7513
    @xenero7513 Год назад +1

    How do you maintain the rotation of the sprites still pixelated is it because of the resolution that makes the rotation pixelated?

    • @Joshulties
      @Joshulties  Год назад +2

      In the Godot project settings for window, set stretch mode to viewport.

  • @land0ndraws730
    @land0ndraws730 8 месяцев назад

    Hey how do the arms rotate but the pixels stay on the grid?

    • @Joshulties
      @Joshulties  8 месяцев назад

      In godot project settings, set stretch mode to 'viewport' and below that to 'keep'

    • @homo_ludens62
      @homo_ludens62 5 месяцев назад

      ​@@JoshultiesOmg Is it really that easy to make pixel perfect? ​​I've tried so far in vain.

  • @dragonplant
    @dragonplant Год назад

    im somewhat confused: where should the player code be attached to, and where should the aiming/animation handler be attached to?

    • @Joshulties
      @Joshulties  Год назад +1

      There is only two scripts; player code with the functions for aiming and animation is in the player script attached to the parent node (KinematicBody2D) and the state machine code is handled in a child node right below the parent node.

    • @dragonplant
      @dragonplant Год назад +1

      @@Joshulties ok i get it now, thank you!

  • @sarahpuspdew
    @sarahpuspdew 11 месяцев назад +1

    can you perhaps share the code for crosshair? is there any github for this?

    • @Joshulties
      @Joshulties  11 месяцев назад

      So I don't particularly use github (even though it does seem pretty convenient) but the code for the crosshair is really simple.
      The parent node is a regular Node2D with a CanvasLayer as child, which has follow_viewport enabled so that the crosshair is always above everthing, and a Sprite2D as a child of the CanvasLayer.
      The code is simply this:
      extends Node2D
      func _ready():
      # This hides the mouse cursor
      Input.mouse_mode = 1
      func _process(_delta):
      # Move to mouse position
      $CanvasLayer/Sprite.global_position = get_global_mouse_position()
      # Crosshair will pause if the player state is not alive
      set_process(Global.player.fsm.status == 0)

    • @sarahpuspdew
      @sarahpuspdew 11 месяцев назад

      ​@@Joshultiesis it possible for you to share the spritesheet? just for practice this...i cant really draw and didnt seem to find an asset that seperate the body part

    • @Joshulties
      @Joshulties  11 месяцев назад

      @@sarahpuspdew Sorry for the late response. I made a practice sprite sheet with the head, torso, arms and legs and put them in a compressed file. Clicking on the link will download it automatically. If you want a different way for me to send you these images, let me know.
      cdn.discordapp.com/attachments/1149872966121824348/1182066244292202587/PracticeSprites.zip?ex=658357fa&is=6570e2fa&hm=f99a591fe543953e3614df417af9420584a54c4308e4e367bc18470f3e771c58&

    • @sarahpuspdew
      @sarahpuspdew 11 месяцев назад

      @@Joshulties omg i owe you so much, thank you thank you!!! what program do you use for the pixel art btw?

    • @Joshulties
      @Joshulties  11 месяцев назад

      @@sarahpuspdew No problem! I use GraphicsGale

  • @adannimpa
    @adannimpa Год назад

    out of curiosity is there a way so that the arm sprite static for style purposes?
    great video btw and easy to be understanded so thank you for making this :D

    • @Joshulties
      @Joshulties  Год назад +1

      Thank you! Could you explain what you mean be static? Do you mean how to keep the arm steady while standing still or walking?

    • @adannimpa
      @adannimpa Год назад

      @@Joshulties as seen in the video the arm sprite pixel move a little whenever it follows the cursor
      I have never made a game with a separated sprite before so I don't know how to do it

    • @Joshulties
      @Joshulties  Год назад +1

      @@adannimpa the angle of the arm is calculated by the angle from the Aim Pivot to the cursor; the pivot is a part of the torso, whose position changes from animation player. Is you make the Aim Pivot not a child of the PlayerSprite, then the arm won't move by one pixel.

    • @adannimpa
      @adannimpa Год назад

      @@Joshulties noted thank you for the information! 😁

  • @JamesTalbot-kr8ly
    @JamesTalbot-kr8ly 8 месяцев назад

    How do I make this in godot 4.2.1

    • @Joshulties
      @Joshulties  8 месяцев назад +1

      There are some minor differences between Godot 3 and 4, but ultimately the concept/idea doesn't change much.
      I'd suggest that you follow along the video but look up the Godot 4 documentation for what parts of Godot 3 have been replaced. (i.e. KinematicBody2D -> CharacterBody2D, adding @ before onready and export variables, etc.)

    • @JamesTalbot-kr8ly
      @JamesTalbot-kr8ly 8 месяцев назад

      @@Joshulties Thanks man, you the best.

  • @PrinceJay-tsi
    @PrinceJay-tsi 11 месяцев назад

    Can you make like a clearer video like you zoom in to the code your writing it would really help a lot maybe even leave a sample project free to download because I'm very interested in making this kind of game

    • @Joshulties
      @Joshulties  11 месяцев назад

      The video editor that I used for this is finicky at times, which was why I didn't do anything fancy like zooming in. As for the project files, it's going to take a while for me to get them ready since I currently have final exams this week. Fortunately the video quality can go up to 1080p60 if you need to read the code.

    • @PrinceJay-tsi
      @PrinceJay-tsi 11 месяцев назад

      @@Joshulties ok focus on that I am a very patient person
      Good luck with your exam

    • @Joshulties
      @Joshulties  10 месяцев назад

      @@PrinceJay-tsi Hey, I finally got around to making a github page for the demo project. Here you go:
      github.com/Joshulties/Godot_3.5.1_2DPlayerAnimation.git

    • @PrinceJay-tsi
      @PrinceJay-tsi 10 месяцев назад +1

      @@Joshulties wow thanks mate
      Oh and happy New Year

  • @UltimatePerfection
    @UltimatePerfection 5 месяцев назад

    those are just voxels with extra steps, lol

  • @salokaabimanyu5852
    @salokaabimanyu5852 4 месяца назад

    hey anyone know what software this guy use to make the animation?

  • @DouglasSantos-tj1bp
    @DouglasSantos-tj1bp 4 месяца назад

    Hi can you give me some light on a 3d character?
    I thought doing this on a CharacterBody3D would be equivalent, but it isn't 😥
    I am trying to do a game the same format as Akatori (2d sprite on a 3d world)
    func aim() -> void:
    var mouse_position = get_viewport().get_mouse_position()
    flip_sprite(mouse_position.x < global_position.x)
    var arm_rotation = arm_front.rotation.z
    var aim_2d = Vector2(aim_pivot.global_position.x, aim_pivot.global_position.y)
    if mouse_position.x < global_position.x:
    arm_front.rotation.z = lerp_angle(arm_rotation, -(aim_2d - mouse_position).angle(), 0.1)
    else:
    arm_front.rotation.z = lerp_angle(arm_rotation, (mouse_position - aim_2d).angle(), 0.1)

    • @Joshulties
      @Joshulties  4 месяца назад

      I'm sorry, I can't help you with that because I've never worked in 3d with godot -- not even sprite3d node

    • @DouglasSantos-tj1bp
      @DouglasSantos-tj1bp 4 месяца назад

      @@Joshulties Me neither 😅but anyhow thank you for the tutorial, for sprite2d it works like a charm ❤

  • @MindfulMoments745
    @MindfulMoments745 Год назад +1

    Hey please make a tutorial on how to add missions and lvl up.

    • @Joshulties
      @Joshulties  Год назад

      There are plenty of other videos out there that can explain that. Plus these types of edited videos take too long for me to put out.