Creation of realistic spheres in Flash with textures and masking

I was preparing a new tutorial involving a visual from above, with a ball rolling on a tile map, and that’s what I coded first, applied to an object linkaged as “ball” in the first frame:

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power
	}
	
	xspeed *= friction;
	
	this._y += yspeed;
	this._x += xspeed;
};

This code is already explained in this tutorial, and it’s almost the same except it has no gravity since the “camera” is above the objects.

This is the result:

If you play with arrow keys you should be able to have a sphere rolling through the stage.

I wrote that “should” because you… should be able to see the sphererolling… but the only thing you really see is a red circle. I can’t see any sphere.

A sphere should be more… let’s say… spherical… so I played with gradients and that’s what I got:

This is more likely a sphere, but it seems to float in the air. A sphere on a plane should drop a shadow.

I need a shadow.

Very easy, here it is the sphere with the shadow…

Now you should see a rolling sphere. I only see a skating sphere. A very polished sphere, moreover.

Time to add some tricks.

I want to map a texture on the sphere to make it looks like a marble sphere, or wooden sphere, or whatever.

So I need a seamless texture.

Seamless textures are textures that form a continuous texture when you tile the image over and over.

I will explain in a future tutorial how to create seamless textures, at the moment I googled for “samless texture” and I found those free images. Do the same, and be sure you are saving squared seamless textures.

I liked those 3 textures, and scaled down to 188×188 pixels since the circle diameter in my movie is 60 so the circumference is 60*Pi = 188

Wooden texture
wooden texture

Paper texture
paper texture

Tiger texture
tiger texture

With the tiger texture, I imported it into the movie and linkaged all in this way:

Linkage

ball: it’s the final ball, combining all objects

ball_itelf: it’s the ball itself, I mean the blue circle

texture: it’s the texture I imported

Now you should have a movie like this one:

The texture moves with the ball.

Next step will be adding a mask

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.texture.setMask(ball.ball_itself);
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power
	}
	
	xspeed *= friction;
	
	this._y += yspeed;
	this._x += xspeed;
};

Line 6: A mask with the shape of ball_itself is assigned to the object texture.e its own mask, for example mc.setMask(mc) . Masking is a very useful technique in Flash. By applying a mask on a movie clip, you can restrict the visible area of the target clip to the mask area. In this case, I restrict the visible area of the texture movieclip according to ball_itself movieclip shape.

This is the result

We have a textured circle (not a sphere yet).

In a real sphere, the texture would roll together with the sphere.

That’s where we need another trick.

With your favourite photo editor you have to open your 188×188 images, double their x and y sizes (376×376) and fill them with old 188×188 texture. You should have an image tiled with 4 of your textures, like in this examples:

Wooden texture
wooden texture

Paper texture
paper texture

Tiger texture
tiger texture

Tiger texture
tiger texture with lines marking the tileset made with the old tiger texture

Now, replace the old texture in the actionscript with this new one, and add those lines:

power = 0.3;
yspeed = 0;
xspeed = 0;
friction = 0.95;
_root.attachMovie("ball", "ball", 1, {_x:250, _y:175});
ball.texture.setMask(ball.ball_itself);
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	this._y += yspeed;
	this._x += xspeed;
	this.texture._y += yspeed;
	this.texture._x += xspeed;
	if (this.texture._x>158) {
		this.texture._x -= 188;
	}
	if (this.texture._x<-158) {
		this.texture._x += 188;
	}
	if (this.texture._y>158) {
		this.texture._y -= 188;
	}
	if (this.texture._y<-158) {
		this.texture._y += 188;
	}
};

Lines 24-25: The texture already moves with the ball, but I want it to move twice faster of ball's x and y speeds to simulate the effect of a rolling texture.

Lines 26-37: If the position of the texture relatively to the ball one is more than 158 (texture width/2 - ball radius) then make or less than -158, then adjust texture position shifting it by 188 pixels left, right, up, or down. The player won't realize the texture jumped because it is tiled and seamless.

Now, you should see a rolling sphere. What is see is a moving circle with a smart use of a texture sliding across the object.

In a real sphere, the perspective modifies texture appearance.

To achieve this, we'll need a displacement map. I will cover in a future tutorial.

Meanwhile, look what you can do adding a level with some shadows:

Download all the source codes and give me feedback

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers