Tutorial: Animation & Collision - 2 Parts

collision
detection
canvas
animation
sprite

#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


#20

Hello pixii, I have problem about floating button icon resolution, so i download this app aia file and i try to check your arrows resolution, and i saw that same problem continues. So I understand that there is a bug for floating button icons. Have you any idea?
Thank you.


#21

Hey Mustafa,

I don’t know if it’s a bug persay, I think it’s just that I didn’t account for screen orientation.

I have a quick tip video on Responsive Design (it doesn’t cover every topic, just covers general responsive tips)


Listen to the explanation @ ~4:10 - 8:55

What I think is happening with the FAB… we set it’s position based on it’s (x,y) coordinate on the screen FROM bottom/right.

Let’s say the FAB is at (16,16) in Portrait Mode, and the user switches to Landscape Mode. The FAB is still at (16,16) but now we can’t see it because the orientation changed. I think it’s technically still there, but it’s like hard coded stuck at 16,16.

So if we take the same concept from the Responsive Tips video @4:10-8:55, we can probably use the Screen’s Orientation changed event with a Clock to re-position the FAB.

This is just a theory, I haven’t tested this out. But maybe you can play around with Screen Orientation+Clock and see if that helps :slight_smile: