Sprites in Mojo3D

[EthernautParticipant]

I started diving a little more into Mojo3D, and have some questions about sprites:

• Would it be possible to have sprites more integrated in the 3d scene and render correctly when behind 3d objects? (could be an optional thing). Currently they seem to always render on top.
• I’m trying to implement animated sprites. That was easy in Mojo2D, since I could have an image array and just draw the correct image at the right time. As far as I understand, in Mojo an image is simply a rect contained in a Texture, so ultimately an image array could have images from the same texture, which is very efficient. SpriteMaterial.ColorTexture uses Texture instead of Image. Would it be inefficient to create a Texture array and replace the current SpriteMaterial.ColorTexture on every frame? Is there a better way?
• How do you set the texture flags on a sprite? Setting the flags on SpriteMaterial.ColorTexture didn’t have an effect.
• Are those things planned to be implemented in the future, and should I just wait? I’m looking for things like loading sprite sheets, setting frame rate, loop behavior and frame lists, etc.
• Bonus: it would be nice if the sprite shader had the ability to “flash” a certain color (paint all non-transparent pixels with that color) temporarily.

Thanks!

[Mark SiblyKeymaster]

Yeah, sprites are very primitive right now and there are lots of changes coming. I will definitely keep your questions in mind though and try to address them as well as I can.

I just need to finish up the IAP mobile module this week, and then it’s back into the fun/interesting stuff!

[PlayniaxParticipant]

I just need to finish up the IAP mobile module this week

I guess I have to be careful of what I wish for in the future

[Mark SiblyKeymaster]

Just having a play with sprites…

How do you set the texture flags on a sprite? Setting the flags on SpriteMaterial.ColorTexture didn’t have an effect.

This should work, which flags were you trying to use.

[EthernautParticipant]

I’m trying to set the flags after creating the material, like this:

Monkey

material = SpriteMaterial.Load( path ) material.ColorTexture.Flags = TextureFlags.None Local cat := New Sprite( material )

1 2 3

material = SpriteMaterial.Load( path ) material.ColorTexture.Flags = TextureFlags.None Local cat := New Sprite( material )

[Mark SiblyKeymaster]

Ok, cheers, turns out Texture.Flags setter was completely borked – getting some nice ‘outrun’ style pixels now!

I’ll also add a textureFlags param to SpriteMaterial.Load, but being able to modify flags is way cool.

[Mark SiblyKeymaster]

Just pushed some fixes and changs to develop branch.

Sprites should now use depth buffer properly, and Texture.Flags setter now works.

Also, as a bit of an experiment, I added a TextureRect property to Sprite. This defaults to new Rectf( 0,0,1,1 ) and describes the 4 ‘texture coordinate’ corners of the sprite, ie: you could theoretically use this to pick frames out of an atlas. A better approach might be to add the rects to the material, but this is would involve coming up with a ‘SpriteFrames’ class and/or ‘SpriteAnimations’ class etc. Have to think about this a bit more!

[coconParticipant]

Are 3D sprites same as a 3D object?

However you will have to apply a rotation to look at the camera all the time.

[Mark SiblyKeymaster]

Have a look at the sprites test.

[EthernautParticipant]

Thanks Mark!

If you decide to add a SpriteFrames class or similar I’ll update my stuff, but for now I made an “AnimSprite” class that extends Sprite and stores the coordinates internally. I also have an “AnimationClip” class that simply stores a named frame sequence, so you refer to it by name and “grab” different frames from the same sprite sheet.

Here’s the class, complete with Json file loading for animation clips (use example attached at the bottom). This is more or less super untested!

Monkey

Namespace mojo3d.graphics Class AnimSprite Extends Sprite 'Event functions Field onLastFrame :Void() Field onFirstFrame :Void() Protected 'Atlas values Field _frame:Int = 0 'The frame currently displayed Field _coordinates:= New Stack<Rect<Double>> 'A stack containing the UV coordinates for each cell 'Animation clip management Field _timeScale := 1.0 'Adjusts playback speed. Can be used to create slow motion effects without changing the framerate. Field _anim :AnimationClip 'The animation clip currently playing Field _animations := New StringMap< AnimationClip > 'List of available animation clips Field _offset :Int 'Current frame offset Field _framerate:Double = 15.0 'Frame rate, if a clip is not provided 'Misc Field _firstFrame := True Field _hasReachedEnd := False Field _hasReachedStart := False '******************************* Public Properties ******************************* Public 'Current frame Property Frame:Int() Return _frame Setter( number:Int ) If number <> _frame _frame = Clamp( number, 0, _coordinates.Length-1 ) TextureRect = _coordinates[ _frame ] If _frame >= LastFrame If Not _hasReachedEnd onLastFrame() _hasReachedEnd = True _hasReachedStart = False End End If _firstFrame onFirstFrame() _firstFrame = False Else If _frame = FirstFrame If Not _hasReachedStart onFirstFrame() _hasReachedStart = True _hasReachedEnd = False End End End End End 'current AnimationClip Property Animation:String() Return _anim.name Setter( name:String ) If _animations[ name ] _anim = _animations[ name ] Else Print( "AnimSprite: animation '" + name + "' Not found!" ) End End 'Map with all animations as values and their names as keys Property AllAnimations:StringMap< AnimationClip >() Return _animations End 'Offsets the current frame, useful when creating multiple copies of the same sprite Property FrameOffset:Int() Return _offset Setter( number:Int ) _offset = number End 'Sets the frame rate. If a clip is in use, that clip's frame rate will be set. Property FrameRate:Double() If _anim Return _anim.framerate Else Return _framerate End Setter( value:Double ) If _anim _anim.framerate = value Else _framerate = value End End 'Duration (in seconds) of the current animation clip. If none, duration of the entire spritesheet is provided. Property Duration:Double() Local _period:Double = ( 1.0 / FrameRate ) * _timeScale If _anim Return _period * _anim.frames.Length Else Return _period * _coordinates.Length End End 'First frame in clip Property FirstFrame:Int() If _anim Return _anim.frames[ 0 ] Else Return 0 End End 'Last frame in clip Property LastFrame:Int() If _anim Return _anim.frames[ _anim.frames.Length-1 ] Else Return _coordinates.Length - 1 End End '******************************* Public Methods ******************************* Method New( path:String, cellWidth:Int, cellHeight:Int, padding:Int = 0, border:Int = 0, flags:TextureFlags = TextureFlags.FilterMipmap ) 'Creates new Sprite with material Super.New( SpriteMaterial.Load( path, flags ) ) Local texture := Cast<SpriteMaterial>( Material ).ColorTexture Local _paddedWidth:Double = cellWidth + ( padding * 2 ) Local _paddedHeight:Double = cellHeight + ( padding * 2 ) Local _rows:Int = ( texture.Height - border - border ) / _paddedHeight Local _columns:Int = ( texture.Width - border - border ) / _paddedWidth 'Generates UV coordinates for each frame Local numFrames := _rows * _columns Local w:Double = texture.Width Local h:Double = texture.Height For Local i:= 0 Until numFrames Local col := i Mod _columns Local x:Double = ( col * _paddedWidth ) + padding + border Local y:Double = ( ( i / _columns ) * _paddedHeight ) + padding + border _coordinates.Push( New Rectf( x/w, y/h, (x+cellWidth)/w, (y+cellHeight)/h ) ) Next 'Defaults to frame 0 Frame = 0 End 'Update time is in seconds (Double), not milliseconds Method Update( time:Double ) Local frameLength:Double = ( 1.0 / FrameRate ) / _timeScale time += ( _offset * frameLength ) If _anim If _anim.loop Frame = _anim.frames[ Int( ( time Mod Duration ) / frameLength ) ] Else Frame = _anim.frames[ Int( time / frameLength ) ] End Else Frame = Int( ( time Mod Duration ) /frameLength ) End End 'Adds new animation clips. Method AddAnimationClip( _name:String, _loop:Bool = True, framerate:Int, _frames:Int[] ) local animClip := New AnimationClip animClip.name = _name animClip.loop = _loop animClip.frames = _frames animClip.framerate = framerate _animations.Add( _name, animClip ) End 'Loads Json file Method LoadAnimations( path:String ) Local json := JsonObject.Load( path ) If json Local anims := json.GetObject( "animations" ) If anims For Local a := Eachin anims.ToObject() Local obj := a.Value.ToObject() Local loop := obj[ "loop" ].ToBool() Local rate := obj[ "rate" ].ToNumber() Local frameStack := obj[ "frames" ].ToArray() Local frames:Int[] = New Int[ frameStack.Length ] For Local n := 0 Until frameStack.Length frames[n] = frameStack[n].ToNumber() Next AddAnimationClip( a.Key, loop, rate, frames ) Next End Else Print( "AnimSprite: Warning, json file not found or invalid" ) End End End '**************************************************************************************************************************************' Class AnimationClip 'AnimationClips contain a sequence of frames to be played, its name, framerate and loop state. field name :String 'Animation name field loop := True 'looping can be controlled per animation field frames :Int[] 'Frame list array, contains the sequence in which the frames play Field framerate := 15.0 'frame rate per clip Property FrameCount:Int() Return frames.Length End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231

Namespace mojo3d.graphics     Class AnimSprite Extends Sprite   'Event functions Field onLastFrame :Void() Field onFirstFrame :Void() Protected 'Atlas values Field _frame:Int = 0 'The frame currently displayed Field _coordinates:= New Stack<Rect<Double>> 'A stack containing the UV coordinates for each cell   'Animation clip management Field _timeScale := 1.0 'Adjusts playback speed. Can be used to create slow motion effects without changing the framerate. Field _anim :AnimationClip 'The animation clip currently playing Field _animations := New StringMap< AnimationClip > 'List of available animation clips Field _offset :Int 'Current frame offset Field _framerate:Double = 15.0 'Frame rate, if a clip is not provided 'Misc Field _firstFrame := True Field _hasReachedEnd := False Field _hasReachedStart := False '******************************* Public Properties ******************************* Public 'Current frame Property Frame:Int() Return _frame Setter( number:Int ) If number <> _frame _frame = Clamp( number, 0, _coordinates.Length-1 ) TextureRect = _coordinates[ _frame ] If _frame >= LastFrame If Not _hasReachedEnd onLastFrame() _hasReachedEnd = True _hasReachedStart = False End End If _firstFrame onFirstFrame() _firstFrame = False Else If _frame = FirstFrame If Not _hasReachedStart onFirstFrame() _hasReachedStart = True _hasReachedEnd = False End End End End End 'current AnimationClip Property Animation:String() Return _anim.name Setter( name:String ) If _animations[ name ] _anim = _animations[ name ] Else Print( "AnimSprite: animation '" + name + "' Not found!" ) End End 'Map with all animations as values and their names as keys Property AllAnimations:StringMap< AnimationClip >() Return _animations End 'Offsets the current frame, useful when creating multiple copies of the same sprite Property FrameOffset:Int() Return _offset Setter( number:Int ) _offset = number End 'Sets the frame rate. If a clip is in use, that clip's frame rate will be set. Property FrameRate:Double() If _anim Return _anim.framerate Else Return _framerate End Setter( value:Double ) If _anim _anim.framerate = value Else _framerate = value End End 'Duration (in seconds) of the current animation clip. If none, duration of the entire spritesheet is provided. Property Duration:Double() Local _period:Double = ( 1.0 / FrameRate ) * _timeScale If _anim Return _period * _anim.frames.Length Else Return _period * _coordinates.Length End End   'First frame in clip Property FirstFrame:Int() If _anim Return _anim.frames[ 0 ] Else Return 0 End End 'Last frame in clip Property LastFrame:Int() If _anim Return _anim.frames[ _anim.frames.Length-1 ] Else Return _coordinates.Length - 1 End End '******************************* Public Methods ******************************* Method New( path:String, cellWidth:Int, cellHeight:Int, padding:Int = 0, border:Int = 0, flags:TextureFlags = TextureFlags.FilterMipmap ) 'Creates new Sprite with material Super.New( SpriteMaterial.Load( path, flags ) ) Local texture := Cast<SpriteMaterial>( Material ).ColorTexture Local _paddedWidth:Double = cellWidth + ( padding * 2 ) Local _paddedHeight:Double = cellHeight + ( padding * 2 ) Local _rows:Int = ( texture.Height - border - border ) / _paddedHeight Local _columns:Int = ( texture.Width - border - border ) / _paddedWidth 'Generates UV coordinates for each frame Local numFrames := _rows * _columns Local w:Double = texture.Width Local h:Double = texture.Height For Local i:= 0 Until numFrames Local col := i Mod _columns Local x:Double = ( col * _paddedWidth ) + padding + border Local y:Double = ( ( i / _columns ) * _paddedHeight ) + padding + border _coordinates.Push( New Rectf( x/w, y/h, (x+cellWidth)/w, (y+cellHeight)/h ) ) Next 'Defaults to frame 0 Frame = 0 End 'Update time is in seconds (Double), not milliseconds Method Update( time:Double ) Local frameLength:Double = ( 1.0 / FrameRate ) / _timeScale time += ( _offset * frameLength ) If _anim If _anim.loop Frame = _anim.frames[ Int( ( time Mod Duration ) / frameLength ) ] Else Frame = _anim.frames[ Int( time / frameLength ) ] End Else Frame = Int( ( time Mod Duration ) /frameLength ) End End 'Adds new animation clips. Method AddAnimationClip( _name:String, _loop:Bool = True, framerate:Int, _frames:Int[] ) local animClip := New AnimationClip animClip.name = _name animClip.loop = _loop animClip.frames = _frames animClip.framerate = framerate _animations.Add( _name, animClip ) End     'Loads Json file Method LoadAnimations( path:String ) Local json := JsonObject.Load( path ) If json Local anims := json.GetObject( "animations" ) If anims For Local a := Eachin anims.ToObject() Local obj := a.Value.ToObject() Local loop := obj[ "loop" ].ToBool() Local rate := obj[ "rate" ].ToNumber()   Local frameStack := obj[ "frames" ].ToArray() Local frames:Int[] = New Int[ frameStack.Length ] For Local n := 0 Until frameStack.Length frames[n] = frameStack[n].ToNumber() Next   AddAnimationClip( a.Key, loop, rate, frames ) Next End Else Print( "AnimSprite: Warning, json file not found or invalid" ) End End End     '**************************************************************************************************************************************'     Class AnimationClip 'AnimationClips contain a sequence of frames to be played, its name, framerate and loop state. field name :String 'Animation name field loop := True 'looping can be controlled per animation field frames :Int[] 'Frame list array, contains the sequence in which the frames play Field framerate := 15.0 'frame rate per clip   Property FrameCount:Int() Return frames.Length End End

And here’s an example use, with a little animated explosion sprite!
http://monkeycoder.co.nz/wp-content/uploads/2017/08/animSprite-1.zip

Only thing missing now is a way to “flash” a color on the sprite!
Cheers.

[Author]

Posts