Image with texture mask

[nerobotParticipant]

Hi. Here is an example of using texture mask.

We combine image with texture and get result – see sreenshot.

This time you can create masked image, but can’t change mask on the fly (Image.Shader property is read-only).

Worked by Image extension, added LoadMasked func.

Monkey

Namespace masked #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. #Import "assets/@/" Class MyWindow Extends Window Method New( title:String="Masked images demo",width:Int=1024,height:Int=768,flags:WindowFlags=WindowFlags.Resizable ) Super.New( title,width,height,flags ) _scale=0.66 _image11=GetImage( "asset::sky.jpg" ) _image12=GetImage( "asset::mask-car.png" ) _image13=GetMaskedImage( "asset::sky.jpg","asset::mask-car.png" ) _image21=GetImage( "asset::flowers.jpg" ) _image22=GetImage( "asset::mask-glass.png" ) _image23=GetMaskedImage( "asset::flowers.jpg","asset::mask-glass.png" ) _image31=GetImage( "asset::fire.jpg" ) _image32=GetImage( "asset::mask-text.png" ) _image33=GetMaskedImage( "asset::fire.jpg","asset::mask-text.png" ) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawImage( _image11,0,0 ) canvas.DrawImage( _image12,(Width-_image12.Width)/2,0 ) canvas.DrawImage( _image13,(Width-_image13.Width),0 ) canvas.DrawImage( _image21,0,(Height-_image21.Height)/2 ) canvas.DrawImage( _image22,(Width-_image22.Width)/2,(Height-_image22.Height)/2 ) canvas.DrawImage( _image23,Width-_image23.Width,(Height-_image23.Height)/2 ) canvas.DrawImage( _image31,0,Height-_image31.Height ) canvas.DrawImage( _image32,(Width-_image32.Width)/2,Height-_image32.Height ) canvas.DrawImage( _image33,(Width-_image33.Width),Height-_image33.Height ) End Private Field _scale:=1.0 Field _image11:Image,_image12:Image,_image13:Image Field _image21:Image,_image22:Image,_image23:Image Field _image31:Image,_image32:Image,_image33:Image Method GetImage:Image( path:String ) Local img:=Image.Load( path ) img.Scale=New Vec2f( _scale,_scale ) Return img End Method GetMaskedImage:Image( path:String,maskPath:String ) Local img:=Image.LoadMasked( path,maskPath ) img.Scale=New Vec2f( _scale,_scale ) Return img End End Function Main() New AppInstance New MyWindow App.Run() End Class Image Extension Function LoadMasked:Image( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap ) Local pixmap:=Pixmap.Load( imagePath,Null,True ) If Not pixmap Return Null Local shader:=mojo.graphics.Shader.GetShader( "sprite-masked" ) Local image:=New Image( pixmap,textureFlags,shader ) Local tex:=mojo.graphics.Texture.Load( maskPath,textureFlags ) If tex Then image.Material.SetTexture( "MaskTexture",tex ) Return image 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

Namespace masked   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   #Import "assets/@/"   Class MyWindow Extends Window   Method New( title:String="Masked images demo",width:Int=1024,height:Int=768,flags:WindowFlags=WindowFlags.Resizable )   Super.New( title,width,height,flags ) _scale=0.66 _image11=GetImage( "asset::sky.jpg" ) _image12=GetImage( "asset::mask-car.png" ) _image13=GetMaskedImage( "asset::sky.jpg","asset::mask-car.png" ) _image21=GetImage( "asset::flowers.jpg" ) _image22=GetImage( "asset::mask-glass.png" ) _image23=GetMaskedImage( "asset::flowers.jpg","asset::mask-glass.png" ) _image31=GetImage( "asset::fire.jpg" ) _image32=GetImage( "asset::mask-text.png" ) _image33=GetMaskedImage( "asset::fire.jpg","asset::mask-text.png" ) End   Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawImage( _image11,0,0 ) canvas.DrawImage( _image12,(Width-_image12.Width)/2,0 ) canvas.DrawImage( _image13,(Width-_image13.Width),0 ) canvas.DrawImage( _image21,0,(Height-_image21.Height)/2 ) canvas.DrawImage( _image22,(Width-_image22.Width)/2,(Height-_image22.Height)/2 ) canvas.DrawImage( _image23,Width-_image23.Width,(Height-_image23.Height)/2 ) canvas.DrawImage( _image31,0,Height-_image31.Height ) canvas.DrawImage( _image32,(Width-_image32.Width)/2,Height-_image32.Height ) canvas.DrawImage( _image33,(Width-_image33.Width),Height-_image33.Height ) End Private Field _scale:=1.0 Field _image11:Image,_image12:Image,_image13:Image Field _image21:Image,_image22:Image,_image23:Image Field _image31:Image,_image32:Image,_image33:Image Method GetImage:Image( path:String ) Local img:=Image.Load( path ) img.Scale=New Vec2f( _scale,_scale ) Return img End Method GetMaskedImage:Image( path:String,maskPath:String ) Local img:=Image.LoadMasked( path,maskPath ) img.Scale=New Vec2f( _scale,_scale ) Return img End End   Function Main()   New AppInstance New MyWindow App.Run() End     Class Image Extension Function LoadMasked:Image( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap ) Local pixmap:=Pixmap.Load( imagePath,Null,True ) If Not pixmap Return Null Local shader:=mojo.graphics.Shader.GetShader( "sprite-masked" ) Local image:=New Image( pixmap,textureFlags,shader ) Local tex:=mojo.graphics.Texture.Load( maskPath,textureFlags ) If tex Then image.Material.SetTexture( "MaskTexture",tex ) Return image End End

Sources: https://www.dropbox.com/s/v4q3mv7rkwy8aik/masked-image.zip?dl=0

Attachments:

1. 

   masked-image.jpg
   

[AnatolParticipant]

Nice. This looks really useful! Thanks for sharing.

[nerobotParticipant]

Since Image.Shader property became writable, we can create Class MaskedImage extends Image with Property Mask:Image and change mask on-the-fly.

[AnatolParticipant]

Oh, awesome! I was wondering about how to get around that limitation.

[degacParticipant]

Quick question

Monkey

Class Image Extension Function LoadMasked:Image( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap )

1 2 3 4 5

Class Image Extension Function LoadMasked:Image( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap )

I (surely) missed this piece of code

Monkey

Class Image Extension

1	Class Image Extension

It seems new to me!
I mean, I know this

Monkey

Class X Extend B

1	Class X Extend B

but no the ‘Extension’ thing (seems quite clear what it does… but I would know better!)

[nerobotParticipant]

 but no the ‘Extension’ thing (seems quite clear what it does… but I would know better!)

Extensions are awesome part of language!

It’s very useful to everybody learn it.

You can open monkey2 folder as a project in Ted2Go and right-click on the root and choose Find..., then find by Extension keyword. And see what monkey2 already have.

Class SomeClassName Extension is familiar for me, but I found something new:

Monkey

Class cpBody Extends Void Property Type:cpBodyType() Extension="cpBodyGetType" Setter( type:cpBodyType ) Extension="cpBodySetType" ....... End

1 2 3 4 5 6 7

Class cpBody Extends Void   Property Type:cpBodyType() Extension="cpBodyGetType" Setter( type:cpBodyType ) Extension="cpBodySetType"   ....... End

It looks like a magic.

PS. I was surprised c# does not support operators overloading via extensions but monkey2 do that !

Attachments:

1. 

   ted2go_extension.png
   

[nerobotParticipant]

There is an updated code for MaskedImage:

Monkey

Class MaskedImage Extends Image Function Create:MaskedImage( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap ) Local pixmap:=Pixmap.Load( imagePath,Null,True ) If Not pixmap Return Null Local shader:=mojo.graphics.Shader.GetShader( "sprite-masked" ) Local image:=New MaskedImage( pixmap,textureFlags,shader ) Local tex:=mojo.graphics.Texture.Load( maskPath,textureFlags ) image._mask=tex image.MaskEnabled=True Return image End ' you can override any (all) constructor of Image class Method New( pixmap:Pixmap,textureFlags:TextureFlags=TextureFlags.FilterMipmap,shader:Shader=Null ) Super.New( pixmap,textureFlags,shader ) End Property Mask:Texture() Return _mask Setter( value:Texture ) _mask=value If _mask Shader=Shader.GetShader( "sprite-masked" ) Material.SetTexture( "MaskTexture",_mask ) Else Shader=Shader.GetShader( "sprite" ) Endif End Property MaskEnabled:Bool() Return _maskEnabled Setter( value:Bool ) _maskEnabled=value If _maskEnabled And _mask Shader=Shader.GetShader( "sprite-masked" ) Material.SetTexture( "MaskTexture",_mask ) Else Shader=Shader.GetShader( "sprite" ) Endif End Private Field _mask:Texture Field _maskEnabled:Bool 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

Class MaskedImage Extends Image Function Create:MaskedImage( imagePath:String,maskPath:String,textureFlags:TextureFlags=TextureFlags.FilterMipmap ) Local pixmap:=Pixmap.Load( imagePath,Null,True ) If Not pixmap Return Null Local shader:=mojo.graphics.Shader.GetShader( "sprite-masked" ) Local image:=New MaskedImage( pixmap,textureFlags,shader ) Local tex:=mojo.graphics.Texture.Load( maskPath,textureFlags ) image._mask=tex image.MaskEnabled=True Return image End ' you can override any (all) constructor of Image class Method New( pixmap:Pixmap,textureFlags:TextureFlags=TextureFlags.FilterMipmap,shader:Shader=Null ) Super.New( pixmap,textureFlags,shader ) End Property Mask:Texture() Return _mask Setter( value:Texture ) _mask=value If _mask Shader=Shader.GetShader( "sprite-masked" ) Material.SetTexture( "MaskTexture",_mask ) Else Shader=Shader.GetShader( "sprite" ) Endif End Property MaskEnabled:Bool() Return _maskEnabled Setter( value:Bool ) _maskEnabled=value If _maskEnabled And _mask Shader=Shader.GetShader( "sprite-masked" ) Material.SetTexture( "MaskTexture",_mask ) Else Shader=Shader.GetShader( "sprite" ) Endif End Private Field _mask:Texture Field _maskEnabled:Bool End

Full code is here: https://www.dropbox.com/s/x7uvftczs7ie9pg/masked-image2.zip?dl=0

Attachments:

1. 

   masked2.jpg
   

[degacParticipant]

Ok, I’ve noticed in the source code the keyword Extension, and I could ‘translate’ it as a ‘bridge’ to other function/field/etc in external libraries.
But in your first example – maybe I’m wrong – it seems to tell to compiler
Class Image has ‘new’ function added now.. In this case LoadMasked().
Is it the right interpretation?

So, basically, instead to create/extend the base Class (in this case Image) (your last post) it will be possible to ‘extends’ the entire class with this keyword.
It’s like to write something like Class Image Extends Image ?!?
Handy!

Quick question: you could use Class Image Extension many times or there’s a limit to use it ONCE, for all the ‘new features’?
Honestly I looked (following your hint) at the Monkey2 code, but it seems that this keyword (maybe because is a recent feature?) is not used normally, excluded in the case to ‘use external library’ (ie: Json, Bullet etc)

[nerobotParticipant]

But in your first example – maybe I’m wrong – it seems to tell to compiler
Class Image has ‘new’ function added now..

Not quite. Extension members are translated into global functions but allow us to use ‘dot’ to get access to them.

Monkey

Class Image Extension Method Crop( r:Recti ) ..... End End ' converted version is like this: Function Crop( me:Image,r:Recti ) ..... End

1 2 3 4 5 6 7 8 9

Class Image Extension   Method Crop( r:Recti )   .....   End End ' converted version is like this: Function Crop( me:Image,r:Recti )   ..... End

Quick question: you could use Class Image Extension many times or there’s a limit to use it ONCE, for all the ‘new features’?

Many times, in different files.

More info:

http://monkeycoder.co.nz/forums/topic/possible-to-add-method-to-rect-with-extention/

http://monkeycoder.co.nz/forums/topic/class-extensions/

Let’s continue discussion in topics above.

[degacParticipant]

Thanks!
September 2016 and I discovered just now!

[Author]

Posts