Simple Sprite Sheets with Inkscape & Gimp David Cline.

Slides:



Advertisements
Similar presentations
Creative Inventions and Robotics Graphics for Scratch In Development.
Advertisements

Getting Started with PowerPoint
The GIMP Simple features tutorial By Mary A White.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Creative Inventions and Robotics Artwork in PowerPoint
GIMP Tutorial v2.0 Boo Virk
Creative Inventions and Robotics Animation for Scratch
DIGITAL GRAPHICS & ANIMATION
Graphics ~ Tools To Edit Clip Art MsBrewer Fall 2012.
Photoshop Backgrounds, Buttons, Banners & Animation In PowerPoint Presentations.
Modeling and Animation with 3DS MAX R 3.1 Graphics Lab. Korea Univ. Reference URL :
Chapter 3 Working with Symbols and Interactivity.
© Cheltenham Computer Training Using Freelance Graphics - Slide No. 1 A First Look at Freelance Graphics Using Freelance for Windows.
Chapter 10 Enhancing Specific Selections. Chapter Lessons Create an alpha channel Isolate an object Erase areas in an image to enhance appearance Use.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.
Using Tiled. What is Tiled? It’s a level editor It allows game programmers to create their 2D game world with ease.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
Working with Symbols and Interactivity
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
Introduction to Flash. Topics What is Flash? What can you do with it? Simple animation Complex interactive web application, such as an online store. Starting.
> 1 Diagrams in Word Faculty of Health Alan Grace.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 7 The Game Loop and Animation Starting Out with Games & Graphics.
© 2011 Delmar, Cengage Learning Chapter 1 Getting to Know Illustrator.
PowerPoint Basics Tutorial 3: Graphics In this tutorial we’ll be looking at graphics, and the various types of illustrations that can be included in a.
DIAMOND SHINE EFFECT. IN THIS STEP BY STEP LESSON, I WILL SHOW YOU HOW TO CREATE VERY ATTRACTIVE DIAMOND SHINE EFFECT USING SOME SPECIAL FLASH TIPS AND.
EYEGLASSES SHINE EFFECT. IN THIS LESSON, YOU WILL SEE HOW TO APPLY SHINE EFFECT ON EYEGLASSES ON THE PICTURE USING THE COLOR MIXER PANEL AND MASK.
Photoshop Teppo Räisänen LIIKE/OAMK General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on.
Manipulate Graphics Skill Area Lecture Overview Photoshop’s GUI Basic Function Basic Image Manipulation.
Working with Objects. Objectives Create an object Transform an object Arrange and lock an object Step and repeat an object Use Live Distribute Use the.
1. Press the New Layer Button 3. Double click names to re-name Ball & Shadow layers 2. Click to change to 12 fps Step 1.
A lesson approach © 2011 The McGraw-Hill Companies, Inc. All rights reserved. a lesson approach Microsoft® PowerPoint 2010 © 2011 The McGraw-Hill Companies,
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
Introduction to Microsoft publisher
Creating HUD Rings. Step 1 Open a new document in Illustrator. You can set it to the size you prefer to work in. In my case I have it set at 500px by.
Chapter 4 Working with Frames. Align and distribute objects on a page Stack and layer objects Work with graphics frames Work with text frames Chapter.
Illustrator I I450 Technology Seminar. Bitmap vs. Vector Photoshop = Bitmap Illustrator = Vector Bitmap images are resolution dependent Vector images.
Return to Outline Copyright © 2011 by Maribeth H. Price 3-1 Labeling and annotation.
Adobe InDesign CS2—Revealed PLACING AND LINKING GRAPHICS.
PowerPoint Basics Tutorial 3: Graphics In this tutorial we’ll be looking at graphics, and the various types of illustrations that can be included in a.
Getting Started with Fireworks A few tips: –Before you begin an assignment, be sure to create a folder on your drive for it. –If your canvas is checkered,
PLACING AND LINKING GRAPHICS
© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.
© 2010 Delmar, Cengage Learning Chapter 4 Working with Frames.
Creating a Silhouette in Illustrator. Go File>Place and place the photo on the artboard. Select the photo and click Live Trace (its on the tool bar right.
Image #1 Getting Started
Pinnacle Pro Painting Program User Manual Created by: David Kwasny Chris Schulz W. Scott DePouw.
© 2011 Delmar, Cengage Learning Chapter 4 Working with Frames.
1 Layer up to keep warm… A short tutorial on the usage of layers.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Illustrator.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
Tabs with Rounded Corners (Sliding Doors). Sliding Doors Tutorial  doors/
© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.
Animation Fall Semester Exam Review James Martin High School Career and Technical Education.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Adobe Illustrator CS5 - Illustrated Unit B: Performing Essential Operations.
Introduction to Layers GIMP User Manual. What is a Layer? Every image in GIMP is made by combining one or more images called Layers laid on top of each.
Creating cast members  Using tool palette window that can be selected from window menu.  The following objects can be created: Push buttons, Radio buttons,
STARTER Which program would you use to create a large (1000 x 1000 pixels) graphic? 5 minutes – explore these tools to see which you’d use: PhotoshopFireworksPaint.
V2.2 Boo Virk GIMP Tutorial v2.2 Boo Virk
Graphical Output Basic Images.
Flash Interface, Commands and Functions
Starburst.
Gimp Guide Mr Hall.
BYOB – Costumes.
Introduction to PowerPoint
Develop Rich Internet Content and Applications
Directions are in slide notes. You can view them in two ways
Presentation transcript:

Simple Sprite Sheets with Inkscape & Gimp David Cline

Things you will need: Inkscape (inkscape.org) Gimp (gimp.org) Gimp’s Layers to Spritesheet script ( Irfanview (optional) (irfanview.com)

Sprite Sheet A simple animation loop for a game character or element stored in a single image. Example: Ship with thrust that flickers

Inkscape: A free “Vector Graphics” program that allows you to easily create simple graphics with geometric shapes and crisp-looking outline lines. Recommended particularly if you don’t think of yourself as much of an artist.

Create SpriteSheet Frames in Inkscape 1) Create Transparent Rectangle Backing 2) For each Frame Draw frame in Inkscape on transparent rectangle (Optionally save it as an Inkscape drawing) Export the frame to a.png file, specifying pixel size

1) Create Backing Rectangle

Tips: You can set the size of the rectangle to be a perfect square by clicking on the arrow icon, and changing the W and H sizes directly. Once the rectangle has its alpha channel set to 0 you can’t easily select it, so you might want to wait until after you have the first frame set up to set the alpha value.

2a) Create Frame

2c) Export bitmap

2c) Export Bitmap Export to a.png (the default I think) Make sure to export the whole drawing, not just the selection. Make sure to change the name! Use numbers to differentiate frames.

View Bitmap in IrfanView At this point you should be able to flip through the frames using IrfanView. The transparent background, which was white in Inkscape, should now look black.

Gimp: A free image editor that allows you to create images in layers. We will use one layer for each frame of animation. That way you can flip through them. Then, we can export the layers as a sprite sheet using an export script.

Gimp’s Layers to Sprite Sheets

Create Sprite Sheet in Gimp In Gimp Open the first frame image

Create Sprite Sheet in Gimp In Gimp Open the first frame image Open remaining frames as layers The transparent back- ground should appear as a checkerboard.

Convert to SpriteSheet Under the Filters command, select Sprite-Sheet  Create from layers... If you can’t find the command, did you install the script? This should result in a new window popping up:

Finally… Save the new image as a.png You should get an export dialog like:

Alternate Method Using Only Inkscape Instead of making one frame at a time and saving each one out, make all of the frames on one sheet in Inkscape.

Backing Size Set your backing rectangle size to integer sizes so you can position successive frames exactly. Set the location of the backing rectangle to an exact integer location as well. As before, start with a visible backing that will later be made transparent (by changing the alpha channel) For example, Set the backing rectangle size to 100 x 100. Set the location to (100, 800) The next frame will be set at (200,800)

Example first frame: Size = 100 x 100 Location = (100, 800)

Successive frames Copy frame and paste it in the window Then, while everything is still highlighted, change its location to be right beside the previous frame, in our case, (200,800)

Successive Frames Now, modify the frame to be the next frame of the animation. This allows you to edit frames side by side, until you are satisfied with the animation.

Saving Select all of the backing rectangles, and set their alpha channel to 0. Export the selection to a.png file. Make sure that the saved size is an even multiple of your desired frame size in pixels. Once again, in Irfanview, the transparent background should look black, and Gimp should show a checkerboard pattern.

Walk Cycles Create initial frame Plan out how many frames will be in the cycle Remember that the last frame flows back into the first

Walk Cycles - Humanoid For a typical biped, a walk cycle can be made of 4 or 8 key frames The first half of the frames mimic the second half, but on the other side of the body:

Examples:

Walk Cycle in Inkscape Create first frame Copy for later frames Use rotation to move the joints The body should only go up and down

Simple Example Walking Mushroom

Editing Select & Select again for rotation tool Change rotation center to joint position before rotating

Tips Make sure first frame is in Final form before starting to create walk cycle! Don’t work on consecutive frames at first. Work on far away frames, and then fill in. Rotate the legs as needed, and then move the figure up or down (not sideways), to be on the ground.

Robot Example