Ren'Py Looking for idea for smooth animation while moving in two tiles of 2d python array.

DiviDreamer

Member
Aug 29, 2020
249
217
Hi, I making game, something like TiTs, Lilith Throne, CoC, DoL. For now I done movement,
trigger system, NPC and MC moving, it's kinda looks same as TiTs movement

5Untitled.png

MC (star) jump from one connected tile to another, but it look too simple and I want to make it more alive,
for me there is no problem to animate MC and anything on map but I have no idea how to connect MC movement
on two tiles so it will looks like smooth animation, any idea? maybe someone done this before
or seen in game or project on python?

Numbers on map is animation placeholders.
 
Last edited:

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Respected User
Donor
Jun 10, 2017
10,141
14,826
[...] but I have no idea how to connect MC movement on two tiles so [...]
What do you mean by that ?

Ideally, you use the (ATL) to make the animation, then display it through an screen statement, and finally you rely on a screen statement to move the said add.

Something that would looks more or less like this:
/!\ It's wrote on the fly, so there's perhaps some typo, and the values are purely demonstrative /!\
Python:
# The player idle animation
image player0:
    "sprites/player/idleFrame1.png"
    pause 0.1
    "sprites/player/idleFrame2.png"
    pause 0.1
    "sprites/player/idleFrame3.png"
    pause 0.1
    "sprites/player/idleFrame4.png"
    pause 0.1
    repeat

# The player animation when moving up.
image player1:
    "sprites/player/upFrame1.png"
    pause 0.1
    "sprites/player/upFrame2.png"
    pause 0.1
    "sprites/player/upFrame3.png"
    pause 0.1
    "sprites/player/upFrame4.png"
    pause 0.1
    repeat


init python:

    # Make the animation move.
    def movePlayer():
        # Proceed only if the player is moving.
        if playerMove == 0: return

        # Update the coordinate of the player, accordingly to its destination.
        # If you intend to let it move to more than one cell, you'll have to adapt
        # this part since it's designed for straight and diagonal moves only.
        if store.playerX < store.destX:
            store.playerX += 1
        elif store.playerX > store.destX:
            store.playerX -= 1
     
        if store.playerY < store.destY:
            store.playerY += 1
        elif store.playerY > store.destY:
            store.playerY -= 1

        # When the player reach its destination...
        if store.playerX == store.destX and store.playerY == store.destY:
            # return to the idle animation.
            store.playerMove = 0


# Coordinate for the player sprite.
default playerX = 0
default playerY = 0
# Direction for the player movement.
# 0 - idle, 1 - up, 2 - up/right, ... 8 - up/left
default playerMove = 0
# Coordinate of the player destination.
default destX = 0
default destY = 0


screen map():

    [display the map the way you want]
    # One destination cell as demonstration
    imagebutton:
        idle "cell1.png"
        # When clicked, define the player destination, and indicate in what direction he's moving.
        action [ SetVariable( "destX", 10 ), SetVariable( "destY", 10 ), SetVariable( "playerMove", 4 ) ]

    # Display the animation corresponding to the actual player move ;
    # "player0" when static, "player1" when moving up, etc. And place
    # this animation at the actual coordinate where the player is expected
    # to be.
    add "player{}".format( playerMove ) pos( playerX, playerY )

    # Add a timer that will be triggered every 0.5 second.
    timer 0.5:
        repeat True
        # Each time the time is triggered it will call the /movePlayer/ function.
        # It could also be done directly with a complex combination of /If/ and /SetScreenVariable/,
        # But there's no reason and it would be slower.
        action Function( movePlayer )


Edit: I agree, it looks even better with the underline ;)
 
  • Like
Reactions: DiviDreamer

DiviDreamer

Member
Aug 29, 2020
249
217
Ok, this is need some research.
By "connect MC movement on two tiles so it will looks like smooth animation" i meant how represent it graphically,
my only idea for now is MC start movin' animation on one tile then dissolve in and appear dissolve out on second tile.
 

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Respected User
Donor
Jun 10, 2017
10,141
14,826
Ok, this is need some research.
By "connect MC movement on two tiles so it will looks like smooth animation" i meant how represent it graphically,
my only idea for now is MC start movin' animation on one tile then dissolve in and appear dissolve out on second tile.
Well, again the ATL.

Something like this should do for the animation:
Python:
image playerMove:
    alpha 1.0
    "sprites/player.png"
    linear 1.0 alpha 0.0
    pause 0.2   # A small pause to ensure that the sprite is moved.
    linear 1.0 alpha 1.0
If will make the alpha channel (opacity) gradually pass from 100% to 0%, wait a bit, then do the opposite.

Now you just have to replace the player sprite by "playerMove" animation when it will move, and rely on a timer to know when to move the sprite to its new position ; something like timer 1.05 action [ SetVariable( "playerX", [new X] ), SetVariable( "playerY", [new Y] ) ].
Like the animation do not loop, you can even keep it as idle image once the movement is done, or rely on a second timer to replace it by the idle sprite.
 
  • Like
Reactions: DiviDreamer

DiviDreamer

Member
Aug 29, 2020
249
217
Oh, one more stupid question
how do I trigger interaction between Roaming on map NPC and MC ? Most effective way?
cycle row and column of map ("for" row: "for" column: ) until MC found, then do the same
for NPC (while he is there, he's roaming you know)
and if they on same tile then do interaction, so this is like 4 "For" cycle.

So is there anyway optimize MC and NPC search in map 2d array? If I place lets say 10 NPC on the map
that would be 40 "for" loops, and provided the game will be heavily animated
those loops will hit hard on performance.
 
Last edited: