I Wish I Knew How To… Program the Canvas Control with Xojo Desktop is the latest book of Eugene Dakin in his excellent I Wish I Knew How To… series.
If you ever wondered how stuff is done with the canvas control in Xojo, this is the book you need to have on your virtual shelf. In his well known swift (no pun intended) style, Eugene has written the reference manual for you. Alwaysbusy’s Corner did some humble contributions to the more advanced topics.
For the novice Xojo user, you quickly can get started and learn about the basics of graphics. Step by step you learn more and more when you move through the more advanced topics. This 400 page volume covers a lot of interesting chapters and includes a lot of useful examples with source code:
Topics included in the book:
Text
Chart Fundamentals
Objects
2D Objects
Graphics
Blurring
Cropping
Gaussian Blur
Building basic controls
Animation
and there are two games with step-by-step code explanations to help you build your own.
So head over to Eugene’s Personal Website and get your copy. Also check out his other books in the series on topics like SQLite, XML, PostgreSQL, Office etc…
It has been a while since I’ve written a new article on this blog because it have been busy months both at work and in my personal life. One of the things I wanted to do was writing an easy to use Game Engine for B4A. I have written the ABPhysics engine in the past and recently Informatix pointed out I had started another engine (ABGameEngine) before that. Development on ABGameEngine was stopped early for several reasons: time was one of them, but also because several other developers were working on an engine themselves. It seemed a little bit pointless to continue.
However, the other engines were not further developed either. Until recently Erel came up with the GameView. This is an excellent View that will cover the needs of a lot of beginning programmers. I definitely would like to urge starting game developers to take a look at this. Registered users of B4A can download the GameView lib from here.
But still, I wanted something more. I looked at ABgameEngine again, as it had some great ideas like layers, animated sprites, gamepads etc. But it was also very old code and not written very well. And it crashed all the time 🙂
I decided to restart from scratch a couple of weeks ago. Some weekends and evenings later ABPlay was born! And with a lot of goodies!
Here is a small demo video of what I got so far. it demonstrates the following:
1. Layers
(Layer 1) the moving background with the Odies as animated sprites
(Layer 2) the black foreground layer with a weird dancing creature that passes now and then
2. Animated sprites, not bound to a layer
(our hero Garfield is back!)
3. A sprite can have different animations.
(like one for standing, one for walking, one for fighting, etc)
4. A sprite can have different predefined 'Walks'
(A walk can be build like you would build a path. It's a sequence of lines, bezier curves, wait periods etc. It's like a simple flash movie)
5. Gamepad controls
(the 'joystick' pad on the left)
(the 'action' pad on the right)
(the 'direction' pad as an alternative to the joystick, not shown in this video)
6. In the demo I cannot demonstrate it with a mouse, but it is completely multi touch
(You can control Garfield AND press the Action button X AND do a swipe anywhere at the same time)
But let’s have a look (beware this is running on the Emulator. On a real device it is much smoother):
I’m actually very pleased with the result. The graphics and handling is very smooth.
Above all, it’s still very easy to program. Here is the whole code for the demo app:
#Region Project Attributes
#ApplicationLabel: ABPlayTest
#VersionCode: 1
#VersionName:
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: landscape
#CanInstallToExternalStorage: False
#End Region
#Region Activity Attributes
#FullScreen: true
#IncludeTitle: false
#End Region
Sub Process_Globals
End Sub
Sub Globals
Dim myPlay As ABPlay
' the panel that will hold the ABPlay
Dim myPanel As Panel
' a background and foregroud layer
Dim bgLayer As ABLayer
Dim fgLayer As ABLayer
' some colors to show the multi touch points in the demo
Dim myColors() As Int = Array As Int(Colors.Red, Colors.Green, Colors.Blue, Colors.Cyan, Colors.Yellow, Colors.Gray, Colors.White, Colors.Magenta, Colors.LightGray, Colors.DarkGray)
' our hero
Dim Hero As ABSprite
' our enemies
Dim Enemies As List
' param to set the set the speed
Dim Speed As Float = 0.2
' some variables to hold the current state of the hero
Dim currentAction As String
Dim currentDirection As String
Dim currentIsStanding As Boolean
End Sub
Sub Activity_Create(FirstTime As Boolean)
' initialize ABPlay with myPanel
myPanel.Initialize("")
Activity.AddView(myPanel, 0,0,100%x,100%y)
myPlay.Initialize(myPanel, "myPlay")
'////////////// BEGIN loading sprite sequences
' Load Sprite Sequences
myPlay.LoadSpriteSequence("GarStandingLeft",LoadBitmap(File.DirAssets, "garleftstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingLeft",LoadBitmap(File.DirAssets, "garleftstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingRight",LoadBitmap(File.DirAssets, "garrightstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingLeft",LoadBitmap(File.DirAssets, "garleft.png"),8, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingRight",LoadBitmap(File.DirAssets, "garright.png"),8, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingLeftFight",LoadBitmap(File.DirAssets, "garleftstillfight.png"),2, 1, 250)
myPlay.LoadSpriteSequence("GarStandingRightFight",LoadBitmap(File.DirAssets, "garrightstillfight.png"),2, 1, 250)
myPlay.LoadSpriteSequence("GarWalkingLeftFight",LoadBitmap(File.DirAssets, "garleftfight.png"),7, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingRightFight",LoadBitmap(File.DirAssets, "garrightfight.png"),7, 1, 1000)
' and the ones for Odie
myPlay.LoadSpriteSequence("OdieStandingLeft", LoadBitmap(File.DirAssets, "odieleftstill.png"),7,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieStandingRight", LoadBitmap(File.DirAssets, "odierightstill.png"),7,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieWalkingLeft", LoadBitmap(File.DirAssets, "odieleft.png"),5,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieWalkingRight", LoadBitmap(File.DirAssets, "odieright.png"),5,1,Rnd(800,1200))
' and the one for the creature
myPlay.LoadSpriteSequence("CreaturePassToRight", LoadBitmap(File.DirAssets, "creature.png"), 3, 4, 1200)
'////////////// END loading sprite sequences
'////////////// BEGIN building the Hero Garfield
' initialize the hero
Hero.Initialize("Hero", 50%x, 50%y)
' add sprite sequences
Hero.AddSpriteSequence("GarStandingLeft")
Hero.AddSpriteSequence("GarStandingRight")
Hero.AddSpriteSequence("GarWalkingLeft")
Hero.AddSpriteSequence("GarWalkingRight")
Hero.AddSpriteSequence("GarStandingLeftFight")
Hero.AddSpriteSequence("GarStandingRightFight")
Hero.AddSpriteSequence("GarWalkingLeftFight")
Hero.AddSpriteSequence("GarWalkingRightFight")
Hero.StartSpriteSequence("GarStandingLeft", True)
currentDirection="LEFT"
'////////////// END building the Hero Garfield
'////////////// BEGIN building the background layer with Odies
' initalize a background layer
bgLayer.Initialize("background", 0,0)
bgLayer.SetBackground(LoadBitmap(File.DirAssets, "bga.jpg"), 1.0)
myPlay.AddLayer(bgLayer)
' initialize some enemies
Enemies.Initialize
Dim a As Int
For a = 1 To 10
Dim Odie As ABSprite
' initialize an Odie with some animation sequences
Odie.Initialize("Odie" & a, Rnd(10%x,90%x), Rnd(10%y, 90%y))
' add multiple sprite sequences
Odie.AddSpriteSequences(Array As String("OdieStandingLeft","OdieStandingRight","OdieWalkingLeft","OdieWalkingRight"))
' create a random walk to the right
Dim WalkRight As ABSpriteWalk
WalkRight.Initialize("ToTheRight", True)
Dim newX As Int = Odie.x+Rnd(20%x, 80%x)
WalkRight.AddLine("OdieWalkingRight",Odie.x, Odie.y, newX, Odie.y, Rnd(90,100))
WalkRight.AddWait("OdieStandingRight",newX, Odie.y, Rnd(10,50))
WalkRight.AddLine("OdieWalkingLeft",newX, Odie.y, Odie.x, Odie.y, Rnd(90,100))
WalkRight.AddWait("OdieStandingLeft",Odie.x, Odie.y, Rnd(10,50))
Odie.AddWalk(WalkRight)
' create a random walk to the left
Dim WalkLeft As ABSpriteWalk
WalkLeft.Initialize("ToTheLeft", True)
Dim newX As Int = Odie.x-Rnd(20%x, 80%x)
WalkLeft.AddLine("OdieWalkingLeft",Odie.x, Odie.y, newX, Odie.y , Rnd(90,100))
WalkLeft.AddWait("OdieStandingLeft",newX, Odie.y, Rnd(10,50))
WalkLeft.AddLine("OdieWalkingRight",newX, Odie.y, Odie.x, Odie.y, Rnd(90,100))
WalkLeft.AddWait("OdieStandingRight",Odie.x, Odie.y, Rnd(10,50))
Odie.AddWalk(WalkLeft)
' pick random a walk, left or right
Dim GoLeft As Int = Rnd(0,2)
If GoLeft = 0 Then
Odie.StartWalk("ToTheRight")
Else
Odie.StartWalk("ToTheLeft")
End If
bgLayer.AddSprite(Odie)
Next
'////////////// END building the background layer with Odies
'////////////// BEGIN building the foreground layer with creature
' initalize a foreground layer
Dim fgLayer As ABLayer
fgLayer.Initialize("foreground", 0,0)
fgLayer.SetBackground(LoadBitmap(File.DirAssets, "fga.png"), 100%y/400)
myPlay.AddLayer(fgLayer)
' and a weird creature...
Dim creature As ABSprite
creature.Initialize("creature", -100%x, 100%y-240)
creature.AddSpriteSequence("CreaturePassToRight")
' with a walk
Dim pass As ABSpriteWalk
pass.Initialize("DanseToTheRight", True)
pass.AddLine("DansingRight",creature.x, creature.y, 200%x, creature.y, 300)
creature.AddWalk(pass)
' and start the walk
creature.StartWalk("DanseToTheRight")
' add the creature to the foreground layer
fgLayer.AddSprite(creature)
'////////////// END building the foreground layer with creature
'////////////// BEGIN Add game pads
' initialize and start a Joystick Gamepad
myPlay.InitializeJoystickPad(18, 100%y-210, 192, 192 , LoadBitmap(File.DirAssets, "joystick_bg.png"),LoadBitmap(File.DirAssets, "joystick.png"))
myPlay.ShowJoystickPad(True)
' initialize and start a Action Gamepad
myPlay.InitializeActionPad(100%x-210, 100%y-210, 192, 192 , LoadBitmap(File.DirAssets, "action_active.png"),LoadBitmap(File.DirAssets, "action_inactive.png"),LoadBitmap(File.DirAssets, "action_mask.png"),True, False, True, False)
myPlay.ShowActionPad(True)
'////////////// END Add game pads
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
' NEEDED FOR THE MOMENT TO CATCH THE HOME KEY, RESUME/PAUSE NOT YET SUPPORTED!
myPlay.StopAndRecycle
Activity.Finish
End Sub
Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
Select Case KeyCode
Case KeyCodes.KEYCODE_BACK
' NEEDED: stop the drawing thread and recycle stuff
myPlay.StopAndRecycle
Activity.Finish
Return True
Case KeyCodes.KEYCODE_HOME
Return True
End Select
End Sub
Sub myPlay_Draw(c As Canvas, State As ABState)
' the actual drawing, do NOT set a debug stop in here!
'////////////// BEGIN Calculation stuff
' calculate hero stuff depending on what buttons we pressed on the gamepad
currentAction = ""
If State.UsingActionPad Then
' go into fight state
If State.ACTION_X Then
currentAction = "X"
End If
' go back to center
If State.ACTION_Y Then
Hero.SetPostition(50%x,50%y)
End If
End If
Dim XMovement As Int
Dim YMovement As Int
If State.UsingJoystickPad Then
XMovement = State.JOYSTICK_X*Speed
YMovement = State.JOYSTICK_Y*Speed
' update the hero's position and direction
If XMovement<0 Then
currentDirection = "LEFT"
Else
currentDirection = "RIGHT"
End If
Hero.SetPostition(Hero.x+XMovement, Hero.y+YMovement)
currentIsStanding = False
Else
currentIsStanding = True
End If
' set the animation type
Select Case currentDirection
Case "LEFT"
Select Case currentAction
Case "X"
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingLeftFight", False)
Else
Hero.StartSpriteSequence("GarWalkingLeftFight", False)
End If
Case Else
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingLeft", False)
Else
Hero.StartSpriteSequence("GarWalkingLeft", False)
End If
End Select
Case "RIGHT"
Select Case currentAction
Case "X"
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingRightFight", False)
Else
Hero.StartSpriteSequence("GarWalkingRightFight", False)
End If
Case Else
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingRight", False)
Else
Hero.StartSpriteSequence("GarWalkingRight", False)
End If
End Select
End Select
' update the hero animation
Hero.Update
' move our backgrounds, does not make sense but shows the possibilities
Dim newX, newY As Int
Dim newMovementX, newMovementY As Int
newMovementX=Min(Abs(XMovement),1)
newMovementY=Min(Abs(YMovement),1)
If currentIsStanding = False Then
If currentDirection = "LEFT" Then
newX = bgLayer.ViewX
newY = bgLayer.ViewY
If newX-newMovementX >= 0 Then
newX = newX-newMovementX
End If
If newY-newMovementY >= 0 Then
newY = newY-newMovementY
End If
bgLayer.SetLayerPostion(newX, newY)
Else
newX = bgLayer.ViewX
newY = bgLayer.ViewY
If newX+newMovementX <= bgLayer.OuterWidth - myPlay.Width Then
newX = newX+newMovementX
End If
If newY+newMovementY <= bgLayer.OuterHeight - myPlay.Height Then
newY = newY+newMovementY
End If
bgLayer.SetLayerPostion(newX, newY)
End If
End If
'////////////// END Calculation stuff
'////////////// BEGIN Drawing stuff
'ok, all the calulations are done, let's draw!
' draw the background layer with all its sprites on it and advance all sprite animations and walks
myPlay.DrawLayer("background", c)
Dim a As Int
' draw the multitouch points that are not on the gamepad, no action here but just to show the possibilities
For a = 0 To State.touchPoints.Size - 1
Dim tmpP As ABTouchPoint
tmpP = State.touchPoints.GetValueAt(a)
c.DrawCircle(tmpP.X, tmpP.Y, 50dip, myColors(tmpP.id), True, 1dip)
Next
' draw the hero
Hero.Draw(c)
' draw the foreground layer with all its sprites on it and advance all sprite animations and walks
myPlay.DrawLayer("foreground", c)
'////////////// END Drawing stuff
' NEEDED: very last line of the Draw event. Let ABPlay know it may process touches again!
myPlay.DrawDone()
End Sub
I’m not there yet, but it’s a good start. It needs a lot more testing and a lot of new features.
I’ve added the Camera object to the ABExtDrawing library for Basic4Android. This object must not be confused with the hardware camera. There are other libraries available for that. The new version 1.1 of the library can be downloaded from the B4X website.
The camera I’m talking about is a nice feature you can use to do 3D effects on the canvas without using OpenGL. The picture above is just a noral B4A canvas where we did some rotations and translations on. It simulates a scrolling list where the listitems rotate around their axe.
Additional, I shows other features of the ABExtDrawing library to do some lighting effects.
We create a new type item3D. This will hold one item in the list.
Sub Process_Globals
Type item3D (bmp As Bitmap, Top As Int, Left As Int, Width As Int, Height As Int)
End Sub
We also have to declare some variables. Note our mCamera variable which will do the 3D conversions and some constants for our lighting effects. On a Paint object we can set color filters which will affect the color values of what we draw with that Paint object. SetLightingColorFilter takes care of that. A LightingColorFilter takes two colors that are used to modify the colors that we are drawing. The first color will be multiplied with the colors we draw, while the second one will be added to the colors we draw. The multiplication will darken the color and adding will make it brighter so we can use this class to model both shadows and highlights. It would have been even better if instead of adding it would have implemented the screen blend mode, but add works OK.
To actually calculate the light we’ll use a simplified version of Phong lighting.
Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim items As List
Dim HalfHeight As Float
Dim SCALE_DOWN_FACTOR As Float: SCALE_DOWN_FACTOR = 0.15
Dim DEGREES_PER_SCREEN As Int: DEGREES_PER_SCREEN = 270
' Ambient light intensity
Dim AMBIENT_LIGHT As Int: AMBIENT_LIGHT = 55
' Diffuse light intensity
Dim DIFFUSE_LIGHT As Int: DIFFUSE_LIGHT = 200
' Specular light intensity
Dim SPECULAR_LIGHT As Float: SPECULAR_LIGHT = 70
' Shininess constant
Dim SHININESS As Float: SHININESS = 200
' The Max intensity of the light
Dim MAX_INTENSITY As Int: MAX_INTENSITY = 0xFF
Dim CurrentRotation As Int
Dim CurrentTop As Int
Dim MyCanvas As Canvas
Dim ScreenTop As Int: ScreenTop = 1
Dim Panel1 As Panel
Dim ExDraw As ABExtDrawing
Dim mCamera As ABCamera
Dim mMatrix As ABMatrix
Dim mPaint As ABPaint
Dim PI As Double: PI= 3.141592653589793238462643383279502884197
Dim ClearRect As Rect
Dim CurrY As Int
End Sub
In the Activity_Create sub we initialize mCamera and the other variables like mPaint which we will also need for our lighting. Also our pictures are preloaded.
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("1")
MyCanvas.Initialize(Panel1)
HalfHeight = Activity.Height / 2
Dim backbmp As Bitmap
backbmp.Initialize(File.DirAssets, "background.png")
Dim backbmp2 As Bitmap
backbmp2.Initialize(File.DirAssets, "background2.png")
Dim backbmp3 As Bitmap
backbmp3.Initialize(File.DirAssets, "background3.png")
Dim conbmp As Bitmap
conbmp.Initialize(File.DirAssets, "contact_image.png")
Dim conbmp2 As Bitmap
conbmp2.Initialize(File.DirAssets, "contact_image2.png")
Dim conbmp3 As Bitmap
conbmp3.Initialize(File.DirAssets, "contact_image3.png")
items.Initialize
Dim i As Int
Dim random As Int
For i = 0 To 19
random = Rnd(0,3)
If random = 0 Then
items.Add(CreateNewItem(backbmp, conbmp, "Colleague " & i, "Name of colleague " & i, 25, i*175, Activity.Width - 50, 120))
Else
If random = 1 Then
items.Add(CreateNewItem(backbmp2, conbmp2, "Friend " & i, "Name of friend " & i, 25, i*175, Activity.Width - 50, 120))
Else
items.Add(CreateNewItem(backbmp3, conbmp3, "Client " & i, "Name of the client " & i, 25, i*175, Activity.Width - 50, 120))
End If
End If
Next
CurrentRotation = -(DEGREES_PER_SCREEN * ScreenTop) / Activity.Height
ClearRect.Initialize(0,0,Activity.Width, Activity.Height)
mCamera.Initialize
mMatrix.Initialize
mPaint.Initialize
mPaint.SetAntiAlias(True)
mPaint.SetFilterBitmap(True)
DrawMe
End Sub
The sub CreateNewItem() is used to make one list item. Default B4A canvas drawing functions are used to show how well they work together with the ABExtDrawing functions.
Sub CreateNewItem(Background As Bitmap, icon As Bitmap, Subj As String, desc As String, Left As Int, Top As Int, Width As Int, Height As Int) As item3D
Dim item As item3D
Dim c As Canvas
item.Initialize
item.bmp.InitializeMutable(Width, Height)
c.Initialize2(item.bmp)
' background
Dim dstR As Rect
dstR.Initialize(0,0,Width,Height)
c.DrawBitmap(Background,Null, dstR)
' draw Icon
dstR.Initialize(15,15, icon.Width, icon.Height)
c.DrawBitmap(icon, Null, dstR)
c.DrawText(Subj, 100, 30,Typeface.DEFAULT_BOLD,16, Colors.White,"LEFT")
c.DrawText(desc, 100, 60, Typeface.DEFAULT,16, Colors.White,"LEFT")
item.Top = Top
item.Left = Left
item.Width = Width
item.Height = Height
Return item
End Sub
In the drawItem() sub all calculations are done for one item in the list. Each item will be a block that will rotate around its X-axis and look like it is rolling on the ground when the list stars to scroll. Each block will be as wide as the item normally is and the depth will be the same as the height. We’ll use the same bitmap for all the sides.
So what do we need to do to achieve this effect? In order to draw the blocks we need to draw the bitmap two times (since we will almost always see two sides of the block). We also need to have some kind of rotation variable to keep track of the main rotation. Since the blocks should rotate when the user scrolls the list and the blocks should have the same rotation (so that they all face up at the same time, see further).
Sub DrawItem(item As item3D)
Dim CenterX As Float
Dim CenterY As Float
' get centerX AND centerY
CenterX = item.Width / 2
CenterY = item.Height / 2
' get scale
Dim distFromCenter As Float
distFromCenter = (item.Top + CenterY - HalfHeight) / HalfHeight
Dim scale As Float
scale = (1 - SCALE_DOWN_FACTOR * (1 - Cos(distFromCenter)))
' get rotation
Dim RotationX As Float
RotationX = CurrentRotation - 20 * distFromCenter
RotationX = RotationX Mod 90
If (RotationX < 0) Then
RotationX = RotationX + 90
End If
' draw it
If (RotationX < 45) Then
drawFace(item, CenterX, CenterY, scale, RotationX - 90)
drawFace(item, CenterX, CenterY, scale, RotationX)
Else
drawFace(item, CenterX, CenterY, scale, RotationX)
drawFace(item, CenterX, CenterY, scale, RotationX - 90)
End If
End Sub
Finally, DrawFace is called and this is where the magic happens. Worth noting is that the code that will draw one face of the block is the same, it just depends on the rotation, so it’s extracted to a method. To draw a complete block we then simply draw two faces 90 degrees apart at the same place.
To draw a face we first translate the camera so that the face will be drawn closer to us. Then we rotate it and after that we translate it back so we don’t scale it. Keep in mind that the calls to the camera, just like the rotate, translate and scale methods on Canvas, needs to be written in reversed order, so to speak. In the code below, it is the last line that translates the face towards us, then we rotate it, and finally, with the first line, we translate it back.
The rest of drawFace is not that hard. It gets the matrix from the camera, pre and post translates the matrix and then draws the bitmap with the matrix.
This code will draw each item as if placed in the origin in 3D space and then we move the items to the correct place on the screen using pre and post translate on the matrix. This moves what we draw in 2D space without changing the perspective. We could apply the translation in X and Y on the camera instead, then the translation would be in 3D space and it would affect the perspective. We’re not doing that here because I want the appearance of a larger field of view than the fixed field of view of the camera. Instead, we fake it by slightly rotating and scaling the items depending on the distance from center of the screen.
We calculate the light and create a LightingColorFilter that we can set to our Paint object.
Sub drawFace(item As item3D, CenterX As Float, CenterY As Float, scale As Float, RotationX As Float)
' save the camera state
mCamera.save
' translate AND Then rotate the camera
mCamera.translate(0, 0, CenterY)
mCamera.rotateX(RotationX)
mCamera.translate(0, 0, -CenterY)
' get the matrix from the camera AND Then restore the camera
mCamera.getMatrix(mMatrix)
mCamera.restore()
' translate AND scale the matrix
mMatrix.preTranslate(-CenterX, -CenterY)
mMatrix.postScale(scale, scale)
mMatrix.postTranslate(item.left + CenterX, item.top + CenterY)
' set the light
Dim cosRotation As Double
cosRotation = Cos(PI * RotationX / 180)
Dim intensity As Int
intensity = AMBIENT_LIGHT + (DIFFUSE_LIGHT * cosRotation)
Dim highlightIntensity As Int
highlightIntensity = (SPECULAR_LIGHT * Power(cosRotation,SHININESS))
If (intensity > MAX_INTENSITY) Then
intensity = MAX_INTENSITY
End If
If (highlightIntensity > MAX_INTENSITY) Then
highlightIntensity = MAX_INTENSITY
End If
Dim light As Int
light = Colors.rgb(intensity, intensity, intensity)
Dim highlight As Int
highlight = Colors.rgb(highlightIntensity, highlightIntensity, highlightIntensity)
mPaint.SetLightingColorFilter(light, highlight)
' draw the Bitmap
ExDraw.drawBitmap4(MyCanvas, item.bmp, mMatrix, mPaint)
End Sub
The DrawMe() sub is the overall function to draw all the items.
Sub DrawMe()
Dim i As Int
ExDraw.save2(MyCanvas, ExDraw.MATRIX_SAVE_FLAG)
MyCanvas.DrawRect(ClearRect, Colors.Black, True, 1dip)
'MyCanvas.DrawBitmap(FormBack, Null, formR)
For i = 0 To items.Size - 1
DrawItem(items.Get(i))
Next
ExDraw.restore(MyCanvas)
Panel1.Invalidate
End Sub
And in the Panel1_Touch sub we’ll animate our list. Note that it is here that we make sure all boxes face the same. This is done by the lines:
Doing like this will make the blocks rotate DEGREES_PER_SCREEN degrees when the user scrolls the list an entire screen no matter the pixel-height of the screen.
Here is the full sub:
Sub Panel1_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
Dim DeltaY As Int
Select Action
Case Activity.ACTION_DOWN
CurrY = Y
'Log("down")
Case Activity.ACTION_MOVE
DeltaY = Y - CurrY
CurrY = Y
Dim i As Int
Dim it As item3D
For i = 0 To items.Size - 1
it = items.Get(i)
it.Top = it.Top + DeltaY
items.Set(i, it)
Next
ScreenTop = ScreenTop + DeltaY
CurrentRotation = -(DEGREES_PER_SCREEN * ScreenTop) / Activity.Height
DrawMe
'Log("move")
Case Activity.ACTION_UP
'Log("up")
End Select
Return True
End Sub
ABExtDrawing is a library I wrote to access more from the Android Drawing classes in B4A. It extends the B4A canvas so you can also use all Paint, Matrix, Region, ColorMatrix and Path functionalities.
Several sub objects are included: ABPaint: a wrapper for thePaint class ABMatrix: a wrapper for the Matrix class ABRegion: a wrapper for the Region class ABColorMatrix: a wrapper for the ColorMatrix class ABRgbFunctions: several functions to manipulate RGB values
Also two extended classes ABRectF: a wrapper around the RectF class. B4A contains the Rect class, but to use some of the functions of this library I needed the float version of Rect. ABPath: a full wrapper for the Path class. B4A contains the Path class but only exposes LineTo. ABPath exposes all functions (like addArc, addOval, etc…)
The main object is ABExtDrawing. You pass the B4A canvas to each function:
Sub Globals
Dim ExDraw As ABExtDrawing
Dim MyCanvas As Canvas
Dim Panel1 as Panel
end Sub
Sub Activity_Create(FirstTime As Boolean)
If FirstTime Then
Activity.LoadLayout("2")
MyCanvas.Initialize(Panel1)
End If
drawRim(MyCanvas)
End Sub
Sub drawRim(Canv As Canvas)
' first, draw the metallic body
ExDraw.drawOval(Canv, rimRect, rimPaint)
' now the outer rim circle
ExDraw.drawOval(Canv, rimRect, rimCirclePaint)
End Sub
The fun part is you can create all kind of Paints:
' the linear gradient Is a Bit skewed For realism
rimPaint.Initialize
rimPaint.SetFlags(rimPaint.flag_ANTI_ALIAS_FLAG)
rimPaint.SetLinearGradient2(1,0.40, 0.0, 0.60, 1.0, Colors.RGB(0xf0, 0xf5, 0xf0),Colors.RGB(0x30, 0x31, 0x30),rimPaint.ShaderTileMode_CLAMP)
rimPaint.DoShaderSingle(1)
rimCirclePaint.Initialize
rimCirclePaint.SetAntiAlias(True)
rimCirclePaint.SetStyle(rimCirclePaint.Style_STROKE)
rimCirclePaint.SetColor(Colors.ARGB(0x4f, 0x33, 0x36, 0x33))
rimCirclePaint.SetStrokeWidth(0.005)
You can also use the Save and Restore functions of the canvas:
Sub drawScale(Canv As Canvas)
ExDraw.drawOval(Canv, scaleRect, ScalePaint)
ExDraw.save2(Canv, ExDraw.MATRIX_SAVE_FLAG)
Dim i As Int
Dim y1 As Float
Dim y2 As Float
Dim value As Int
Dim valueString As String
For i = 0 To totalNicks
y1 = scaleRect.top
y2 = y1 - 0.020
ExDraw.drawLine(Canv, 0.5, y1, 0.5, y2, ScalePaint)
If (i Mod 5 = 0) Then
value = nickToDegree(i)
If (value >= minDegrees AND value <= maxDegrees) Then
valueString = value
ExDraw.drawText(Canv, valueString, 0.5, y2 - 0.015, ScalePaint)
End If
End If
ExDraw.rotate2(Canv, degreesPerNick, 0.5, 0.5)
Next
ExDraw.restore(Canv)
End Sub
And write filters like this GreyScale filter:
Sub GrayScale(bmp As Bitmap) As Bitmap
Dim bmpGrayscale As Bitmap
bmpGrayscale.InitializeMutable(bmp.Width, bmp.height)
Dim c As Canvas
c.Initialize2(bmpGrayscale)
Dim paint As ABPaint
paint.Initialize
Dim mat As ABColorMatrix
mat.Initialize
mat.SetSaturation(0)
paint.SetColorMatrixColorFilter2(mat)
ExDraw.drawBitmap2(c, bmp, 0, 0, paint)
Return bmpGrayscale
End Sub
Because of all the possibilities this library has, I may do some more articles on this blog.
Some people asked me what the output of 12Scan looks like. Well, it’s a plain TXT file with the matrix in it. A zero if it is not checked, A one if the user checked it. Any other program can then use this data how they want.
I’ll post some of my projects I made at One-Two (http://www.one-two.com). We make Time, Job and tracking programs. As you will see, I love the Canvas!
They are written in RealBasic as this is our main programming language. I’m not very interested it writing ‘normal’ looking programs. I like designing new experimental interfaces to make it very intuitive to work with the software.
So here they come:
12Time: A program to track the time (by using a time clock)
12Work: A Program to track jobs with an alternative GUI (with handheld scanners)
12School: A program to track a school (reception, classes, meals)
if you like my work
Alwaysbusy's Corner 