Tutorial: Animation & Collision - 2 Parts

animation
collision
detection
sprite
canvas

#1


TUTORIAL DIFFICULTY: Medium-Hard
This is not an easy tutorial for beginner users. It is recommended that you already be familiar with Image Sprite properties such as: heading, speed and interval, as well as the Clock component. You should also know how to create multiple layers and transparent layers in Photoshop (or your image software of choice).

VIDEO DESCRIPTION:
Part 1 focuses on organizing sprites and creating collision detection “blockade” images, using Photoshop (or your image software of choice) The playable character (actor) should be able to walk in four direction: up, down, left and right. In order to animate the Actor walking, at least 3 images should be used for each direction, for a total of 12 images. Blockade images will be used as image sprites on the canvas in AppyBuilder. When the Actor collides with the blockade images, the Actor will not be able to move forward. This will prevent the Actor from walking on walls or tabels. Part 1 also introduced Tile Coordinates (instead of Pixel Coordinates).

Part 2 puts everything together in AppyBuilder. We’ll create procedures to set sprites on the canvas using Tile Coordinates. Two clock components will animate the actor and additional decorative sprites. Floating buttons will be used as a control pad, and the collision detection blockade images will be implemented.

DOWNLOAD RESOURCES:
https://drive.google.com/file/d/0B9n4xwyisMrGUHh6VnptLVRsMjg/view?usp=sharing
Project .ZIP Folder Contains:

  • 2 Sprite Sheets from RPG Maker MV
  • Photoshop File: Map (includes layers for Blockade Images and Coordinate Tiles)
  • RPG Animation AppyBuilder .aia file

#2

@PixiiBomb great tutorials. Thanks


#4

wow,Its awesome.keep making tutorial like this :joy:


#5

very good, great tutorials. Thanks


#6

Hi @PixiiBomb,

What software do you use to make your tutorials?


#7

The Riders of Icarus videos were made with Lightworks.
You can see, those videos really aren’t too bad, that’s when I first started my channel and started making videos (August 2016). There is a free version and a monthly subscription version ($25/month).

Lately though I’ve been using Adobe After Effects, once I found out that students can get the entire suite for $20 a month.
I’ve only been using AE since December 2016. It’s a huge learning curve, I haven’t been making videos very long. My YouTube channel is only a year and a half old, so I still have a lot of learning to do with After Effects.


#8

All your videos look great. It must take a lot of time. First editing and then adding your voice at the right time.


#9

Thank you for noticing! It does take quite a lot of time. I usually create the app to make sure it’s working, then I screenshot the blocks and re-create them step-by-step. I edit the footage to speed up time, so I’m not spending an hour describing what I did, or recording mistakes. Then I spend a few hours writing the script for the video, record the voice over and edit to the audio. It takes anywhere from 2-4 days of editing and 2-4 days of creating images/gathering footage/etc


#10

I am really really into opensource so i searched for an after effects alternative. I found Natron. Don’t know if you have heard of it?

Just found it a half an hour ago but it looks very promising. Their forum is here:

A quick look at what Natron can do:


#11

OOh that looks pretty fun! The drag-and-drop timeline thing was interesting. Thanks for sharing, I bet a lot of people will be interested in Natron if they don’t like After Effects or Lightworks


#12

Or you can try Fusion 9. To be found here https://www.blackmagicdesign.com/products/fusion/


#13

I really appreciate all the work you put into these tutorials and help documents!


#14

thank you so much thomas!! :heart:


#15

I surrender to your feet Bomb Pixii !!! Thank you for your dedication and for everything that you teach us in your tutorials, they are incredible. I encourage you to continue with them, many of us will appreciate it. a greeting


#16

Thank u mam,

Very nice and helpful tutorial for me. i would like to make a gauge app with same idea. i want to create an app like attached pic for different sensor with animation. please upload a tutorial video for the gauge and real time chart (line chart) in appybuilder.


#17

See here:

https://groups.google.com/forum/#!msg/mitappinventortest/VfEcXlmtwdw/ewUKn7elAwAJ


#18

link not opening sir


#19

Strange. It opens for me. Here is another tutorial. Google search is great you know. :wink:

https://groups.google.com/forum/#!topic/mitappinventortest/oK2OkB2o5VU