A Bouncy Character Introduction - (With Quick How To)

Questions, skill improvement, and respectful critique involving art assets.
Post Reply
Message
Author
User avatar
justcolorado
Regular
Posts: 47
Joined: Sun Feb 07, 2016 9:32 pm
Completed: Experiment Gone Rogue, Caravan Of Saints, HeartBaked, Hipster Axe
Projects: Iragon
Organization: Repulse.com
Github: coloradostark
Location: Plovdiv
Contact:

A Bouncy Character Introduction - (With Quick How To)

#1 Post by justcolorado »



I am not sure if this belongs in cookbooks or art. It is a little of both.
I was doing some prototyping and I came up with this.
It is just 36 still frame 3d renders which were stylized to look like 2d
and then the following code :

Code: Select all


define e = Character('Eileen', color="#c8ffc8")

label start:
    
    scene university:
        zoom 5.0
        linear 11 zoom 2.5
        
    show bouncy_girl:
        zoom 1.3
        ypos 1

        
    $ renpy.pause(10)
    
   

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

init python:
    bounce_speed = .03

image bouncy_girl:
    "images/a01.png"
    bounce_speed
    "images/a02.png"
    bounce_speed
    "images/a03.png"
    bounce_speed
    "images/a04.png"
    bounce_speed
    "images/a05.png"
    bounce_speed
    "images/a06.png"
    bounce_speed
    "images/a07.png"
    bounce_speed
    "images/a08.png"
    bounce_speed
    "images/a09.png"
    bounce_speed
    "images/a10.png"
    bounce_speed
    "images/a11.png"
    bounce_speed
    "images/a12.png"
    bounce_speed
    "images/a13.png"
    bounce_speed
    "images/a14.png"
    bounce_speed
    "images/a15.png"
    bounce_speed
    "images/a16.png"
    bounce_speed
    "images/a17.png"
    bounce_speed
    "images/a18.png"
    bounce_speed
    "images/a19.png"
    bounce_speed
    "images/a20.png"
    bounce_speed
    "images/a21.png"
    bounce_speed
    "images/a22.png"
    bounce_speed
    "images/a23.png"
    bounce_speed
    "images/a24.png"
    bounce_speed
    "images/a25.png"
    bounce_speed
    "images/a26.png"
    bounce_speed
    "images/a27.png"
    bounce_speed
    "images/a28.png"
    bounce_speed
    "images/a29.png"
    bounce_speed
    "images/a30.png"
    bounce_speed
    "images/a31.png"
    bounce_speed
    "images/a32.png"
    bounce_speed
    "images/a33.png"
    bounce_speed
    "images/a34.png"
    bounce_speed
    "images/a35.png"
    bounce_speed
    "images/a36.png"
    bounce_speed
    repeat 10
    
image university = "uni.jpg"
    


SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#2 Post by SundownKid »

Isn't that just basic ATL animation? It would technically belong in Cookbook but... there's nothing new here. That kind of thing has been doable for years.

The main issue is that making a 3D model and animation of a character is just as expensive as making a 2D animation of them. Both can be prohibitively expensive for most people unless they are already a skilled artist. Or, I guess, learn Live2D or Spriter or something.

helcries
Newbie
Posts: 17
Joined: Thu Oct 27, 2016 3:30 am
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#3 Post by helcries »

Looks pretty awesome, and for those of us that use 3d modeling programs due to no art talent this is a nice alternative.

As for SundownKid it may be basic ATL, but since I have been searching for cool things on here over the last few months either I am just using search wrong or there are few if no walk throughs on ATL and how to get it to work correctly. The code and explanation is out there, but for those of us without a programming background figuring that stuff out is a little difficult at times. So I for one am glad to see this code on here so if I am ever ready for it I can use it myself. ))))

User avatar
justcolorado
Regular
Posts: 47
Joined: Sun Feb 07, 2016 9:32 pm
Completed: Experiment Gone Rogue, Caravan Of Saints, HeartBaked, Hipster Axe
Projects: Iragon
Organization: Repulse.com
Github: coloradostark
Location: Plovdiv
Contact:

Converting an animation in Daz to an Animated Sprite in Ren'

#4 Post by justcolorado »

@Helcries

You can find a bunch of good online tutorials about setting up figures and animations in Daz.
Do not use any background. Just the model, the clothes and your animation.
To answer your question from the PM you sent.
(I think it would be better to answer here just in case anyone else wants to do the same.)
Once you have the model and animation setup and want to get it out and into ren'py.
You don't need to render each frame and move it.

See screenshot below and Follow these steps:

1. Go to the render tab
2. Click on the Editor Subtab
3. Select General
4. Click the Render Type Drop Down
5. Select Image Series
6. Set the Type to PNG
(You need PNG for the transparent background otherwise it will be unusable in renpy without modifying each image.)

Hit the render button and it will build all separate images with transparent backgrounds ready for ren'py
You can bring those images in and animate them with ATL code like in the example I did.


`````````````````````````````````````````````````````````
@ Sundown Kid

Yes you are right this does not belong in cookbooks. The main "how to" was how to get the animation and model it out of Daz Studio and into Ren'Py.

I converted a pre-made 3d model and animation for Daz into 2d sprites ready for Ren'py. But yes more of an asset creation how to than a coding coding cook book.

really nice looking games you have on steam BTW.
Attachments
convert_anim_to_sprite_series.png

TheOtherNewGuy
Regular
Posts: 26
Joined: Wed Nov 16, 2016 2:53 am
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#5 Post by TheOtherNewGuy »

Hi,
I learned about RenPy some months ago. I'm one of those people that want to do more creative things than what is taught by the standard tutorials, so I set out to read the documentation. Turned out the documentation was a pretty big pill to swallow, especially for a beginner. So someone recommended that I learn python. I checked out a few beginner python tutorials and it helped a little bit, but when looking back at the renpy documentation I still couldn't pull enough information out of it to help me do what I wanted.

I want to do a lot of things, but one thing I just decided to research on randomly was creating an animated imagebutton. I learned how to display an imagebuttons on the screen, but animation seems an entirely different beast.

I just saw this post you made in Feb and thought it was pretty amazing work. I personally think that it should be added to the cookbook, regardless of what sundown says (we beginners need all the examples we can get in order to learn). I was wondering if I could ask you some questions about your code.

I've been racking my brains trying to understand coding, but it's so damned hard.

I always thought that code is read from top to bottom, but I see that the image of the university is written at the bottom of this code.

why did you use "$renpy.pause(10)" and not "pause(10.0)"?

how does image bouncy_girl:
"images/a01.png"
call the image without ever using "add" or "show" or "image"?

does typing init python:
bounce_speed = .03
control the timing of the animation somehow?

And lastly, how in the world do people learn how to do this? I learned a bit about python variables functions and classes, and the documentation is still hard for me to read. I don't get it.

Anyway sry if this seems like im venting... been trying to get the hang of coding for many years, and if you read this. thank you.

again, great animation.

Code: Select all


define e = Character('Eileen', color="#c8ffc8")

label start:
    
    scene university:
        zoom 5.0
        linear 11 zoom 2.5
        
    show bouncy_girl:
        zoom 1.3
        ypos 1

        
    $ renpy.pause(10)
    
   

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

init python:
    bounce_speed = .03

image bouncy_girl:
    "images/a01.png"
    bounce_speed
    "images/a02.png"
    bounce_speed
    "images/a03.png"
    bounce_speed
    "images/a04.png"
    bounce_speed
    "images/a05.png"
    bounce_speed
    "images/a06.png"
    bounce_speed
    "images/a07.png"
    bounce_speed
    "images/a08.png"
    bounce_speed
    "images/a09.png"
    bounce_speed
    "images/a10.png"
    bounce_speed
    "images/a11.png"
    bounce_speed
    "images/a12.png"
    bounce_speed
    "images/a13.png"
    bounce_speed
    "images/a14.png"
    bounce_speed
    "images/a15.png"
    bounce_speed
    "images/a16.png"
    bounce_speed
    "images/a17.png"
    bounce_speed
    "images/a18.png"
    bounce_speed
    "images/a19.png"
    bounce_speed
    "images/a20.png"
    bounce_speed
    "images/a21.png"
    bounce_speed
    "images/a22.png"
    bounce_speed
    "images/a23.png"
    bounce_speed
    "images/a24.png"
    bounce_speed
    "images/a25.png"
    bounce_speed
    "images/a26.png"
    bounce_speed
    "images/a27.png"
    bounce_speed
    "images/a28.png"
    bounce_speed
    "images/a29.png"
    bounce_speed
    "images/a30.png"
    bounce_speed
    "images/a31.png"
    bounce_speed
    "images/a32.png"
    bounce_speed
    "images/a33.png"
    bounce_speed
    "images/a34.png"
    bounce_speed
    "images/a35.png"
    bounce_speed
    "images/a36.png"
    bounce_speed
    repeat 10
    
image university = "uni.jpg"
    


User avatar
justcolorado
Regular
Posts: 47
Joined: Sun Feb 07, 2016 9:32 pm
Completed: Experiment Gone Rogue, Caravan Of Saints, HeartBaked, Hipster Axe
Projects: Iragon
Organization: Repulse.com
Github: coloradostark
Location: Plovdiv
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#6 Post by justcolorado »

@TheOtherNewGuy

To answer your questions:

"I always thought that code is read from top to bottom, but I see that the image of the university is written at the bottom of this code."

You are correct. It is read from top to bottom. But when you are defining a list of images, the order is not so important because nothing is being executed. defining a list of images is just telling ren'py what images are going to be associated with what names, and maybe more instructions on how to display them. When you define images in renpy with "image myimage:" You are not actually telling ren'py to show the images at that point. This is the code that shows the images:

Code:
label start:

scene university:
zoom 5.0
linear 11 zoom 2.5

show bouncy_girl:
zoom 1.3
ypos 1




"why did you use "$renpy.pause(10)" and not "pause(10.0)"?"

I think they both do the same thing. I just did it out of habit, because I am more comfortable making a true python function call. $renpy.pause(10) is a python function call. pause(10.0) is part of renpy language that is supposed to make things easier.

how does image bouncy_girl:
"images/a01.png" call the image without ever using "add" or "show" or "image"?


It does not show the image, it defines it as a series of images that will be looped.

does typing init python:
bounce_speed = .03 control the timing of the animation somehow?


"init python:" means to do whatever follows the colon before the game starts.
bounce_speed = .03 defines a float variable named bounce_speed and sets the value to .03

I then used that variable after I wrote the name of each image in the characters animation series.
I could have just wrote .03.

Code:
image bouncy_girl:
"images/a01.png"
.03
"images/a02.png"
.03
"images/a03.png"
.03
etc.....


the only reason that I used a variable is that I knew I was going to
have to play around to get it right and I if I did not like how it looked I wanted to be able to speed
up or slow down the animation until I liked it without retyping the number 36 times for each change.


And lastly, how in the world do people learn how to do this? I learned a bit about python variables functions and classes, and the documentation is still hard for me to read. I don't get it.

For me the easiest way to learn has always been getting a book on the subject, reading it and going through all of the exercises. I don't think there is such a book on Ren'Py. Ren'Py is built on top of PyGame. I found this book on PyGame very useful:

Programming Arcade Games With Python and Pygame - Paul Vincent Craven

User avatar
Nobbelz
Newbie
Posts: 12
Joined: Mon Jul 03, 2017 6:26 pm
Projects: Project: Heartbeat.
Location: Portugal
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#7 Post by Nobbelz »

Hi,

i just tried out and managed to get it right, thanks so much! But is there a way to make the images keep looping? Would be really nice, you could add waving of hair and stuff like that. The only way i found out that woul work ist to simply copy&paste the whole list again after the final image, but thats a quite ugly solution.

//EDIT:

Just found out myself. One need to add "repeat" after the last image and it will keep going.
Current Project:
Image

User avatar
Kinjo
Veteran
Posts: 219
Joined: Mon Sep 19, 2011 6:48 pm
Completed: When the Seacats Cry
Projects: Detective Butler
Organization: Goldbar Games
Tumblr: kinjo-goldbar
Deviantart: Kinjo-Goldbar
Github: GoldbarGames
Skype: Kinjo Goldbar
itch: goldbargames
Location: /seacats/
Contact:

Re: A Bouncy Character Introduction - (With Quick How To)

#8 Post by Kinjo »

That code could still be simplified a lot:

Code: Select all

$ NUM_FRAMES = 36
image bouncy_girl:
  for i in range(1, NUM_FRAMES):
    "images/a"+str(i)
    bounce_speed
  repeat
Or something to that effect. No matter how many frames an animation has, it'll only take up a few lines of code.

Post Reply

Who is online

Users browsing this forum: No registered users