Animations in Xamarin Forms (XF)

December 19, 2018 4 Comments

(Part 7 of the Panzer General Portable Project)

Granted, there are not a lot of animations in Panzer General – which is one of the reasons I thought it would be a good candidate for Fabulous and XF.  However, there is 1 place where there is a 6 frame animation – when there is a battle and a unit takes damage.  The images look like this:

explode

and animated like this

When I did Panzer General in Windows Phone 6/7 using WPF, it was very simple to use a a storyboard and an ObjectAnimation class like this

 1 <Storyboard x:Name="ExplodeStoryboard">
 2   <ObjectAnimationUsingKeyFrames 
 3     Storyboard.TargetName="ExplodeTranslateTransform" 
 4     Storyboard.TargetProperty="X" Duration="0:0:1" Completed="ObjectAnimationUsingKeyFrames_Completed">
 5       <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
 6       <DiscreteObjectKeyFrame KeyTime="0:0:.2" Value="-60" />
 7       <DiscreteObjectKeyFrame KeyTime="0:0:.4" Value="-120" />
 8       <DiscreteObjectKeyFrame KeyTime="0:0:.6" Value="-180" />
 9       <DiscreteObjectKeyFrame KeyTime="0:0:.8" Value="-240" />
10       <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100" />
11    </ObjectAnimationUsingKeyFrames>
12 </Storyboard>

In XF, it looks like there is only 1 timer available so I need to hook into it like this

 1 module ChickenSoftware.PanzerGeneral.ExplodeDemo
 2 
 3 open Xamarin.Forms
 4 
 5 let addContent (layout:AbsoluteLayout) =
 6     let image = new Image()
 7     image.Source <- ImageSource.FromResource("explode0")
 8     let x = 50.0 
 9     let y = 50.0
10     let height = 50.0 
11     let width = 60.0 
12     let rectangle = new Rectangle(x,y,width,height)
13     layout.Children.Add(image , rectangle)
14 
15     let mutable index = 1
16     let callback = new System.Func<bool>(fun _ -> 
17         match index with 
18         | 1 -> image.Source <- ImageSource.FromResource("explode1"); index <- 2
19         | 2 -> image.Source <- ImageSource.FromResource("explode2"); index <- 3
20         | 3 -> image.Source <- ImageSource.FromResource("explode3"); index <- 4
21         | 4 -> image.Source <- ImageSource.FromResource("explode4"); index <- 5
22         | 5 -> image.Source <- ImageSource.FromResource("explode0"); index <- 99
23         | _ -> ()
24         true)
25     Device.StartTimer(System.TimeSpan.FromSeconds(20.25),callback)
26 
27 let populateImage =
28     let layout = new AbsoluteLayout()
29     layout.HeightRequest <- 5000.0
30     layout.WidthRequest <- 5000.0
31

The key lines is 16, where I create the callback function that gets called each time the timer triggers and then line 25 when the Device class has a method called “StartTimer”

This works

image

since there is no other animation in the game, I *think* this will work.  I guess I will see soon enough

Filed under F#, Xamarin

Handling User Interaction Using Xamarin Forms (XF)

December 13, 2018 2 Comments

(Part 6 of the Panzer General Portable Project)

Now that I have a rudimentary board in place, I need to understand basic user interaction with the board. The most common gesture is the tap. When I creted the Windows Phone 6/7 version of this game using native WPF, it was very easy to work with these concepts. The Xamarin Forms (XF), not so much.

In XF, capturing a user’s tap on the screen is done via the TapGestureRecognizer class. For example, to see if a person taps on an given game hex you can write some code like this (lines 1 and 19 are the important ones below):

 1 let tapRecognizer = new TapGestureRecognizer() 
 2 
 3 let getTerrainFrame (tile: Tile) (scale:float) =
 4     let baseTile = getBaseTile tile
 5     let baseTerrain = getBaseTerrainFromTerrain baseTile.Terrain
 6     let tileId = baseTerrain.Id
 7     let locatorPrefix = 
 8         match baseTerrain.Condition with 
 9         | LandCondition.Dry -> "tacmapdry"
10         | LandCondition.Frozen -> "tacmapfrozen"
11         | LandCondition.Muddy -> "tacmapmuddy"
12     let frame = new TileFrame(tile)
13     let terrainImageLocator = locatorPrefix + tileId.ToString()
14     let image = getImage terrainImageLocator
15     image.Scale <- (scale + 0.6)
16     frame.BackgroundColor <- Color.Transparent
17     frame.BorderColor <- Color.Transparent
18     frame.Content <- image
19     frame.GestureRecognizers.Add(tapRecognizer)
20     frame 
21

The getTerrainFrame is called for each hex that is created for the game board

Since there can be multiple frames layered on top of the base terrain image (like units, nation flags, etc..) we need a way for those frames to not capture the tap event. Enter the InputTransparent property (line 8 below)

 1 let getSingleUnitFrame (iconId:int) (scale:float) =
 2     let frame = new Frame()
 3     let path = "tacicons" + iconId.ToString()
 4     let image = getImage path
 5     image.Scale <- (scale + 0.6)
 6     frame.BackgroundColor <- Color.Transparent
 7     frame.BorderColor <- Color.Transparent
 8     frame.InputTransparent <- true
 9     frame.Content <- image
10     Some frame 
11

With each hex’s base frame now wired up to this tap recognizer, I need a way to send data into the event and a way to get the data out of the event.

My first thought was to use the eventArgs – which is the way I have done it 100% of the time before this project. I was thinking code like this:

1 type TapEventArgs(tileId:int) = 
2           inherit EventArgs()
3           member this.TileId = tileId
4

Where I have an custom event type that inherits from EventArgs and can can put whatever data I want into the additional properities – in this case the unique Id for the Hex/Tile

I could then create an event handler that handles the event and gets the needed data from the event args:

1 let handleTapEvent (sender:Object) (e:TapEventArgs) =   
2     app.MainPage.DisplayAlert(e.TileId.ToString(), "OK") |> ignore
3     () 
4

And then to wire things together, I would use an EventHandler class

1 let tapEventHandler = new EventHandler<TapEventArgs>(handleTapEvent)
2 tapRecognizer.Tapped.AddHandler(tapEventHandler :> EventHandler<EventArgs>) 
3

Unfortunately, this does not work!  When doing a simple cast, I get

The type ‘EventArgs’ is not compatible with the type ‘TapEventArgs’

and if I try and force it into the event handler

1 let tapEventHandler = new EventHandler<TapEventArgs>(handleTapEvent)

I get this error

This expression was expected to have type ‘EventHandler’ but here has type ‘EventHandler<TapEventArgs>’

You can see my trail of tears on stack overflow here

So instead of spending my time fighting with the compiler, I decided to use the other event arg: object

1 let handleTapEvent (sender:Object) (e:EventArgs) =
2         let tileFrame = sender 😕> TileFrame
3         let tile = tileFrame.Tile
4         let baseTile = getBaseTile tile
5         let tileId = baseTile.Id.ToString()
6         app.MainPage.DisplayAlert("Tile Pressed", tileId, "OK") |> ignore
7         () 
8

with the TileFrame inheriting from Frame like so

1 type TileFrame(tile:Tile) =
2     inherit Frame()
3     member this.Tile = tile 
4

and I get what I need

image

Filed under F#, Xamarin

removing files part of a later-added git ignore

December 10, 2018 Leave a comment

Dear Future Jamie

When you add a gitignore to an existing project, to force git to release the files you don’t want, run the following from the directory where the project is located (note the extra period at the end of the 2st two commands)

1 git rm -r –cached .
2 
3 git add .
4 
5 git commit -am "Remove ignored files"
6

Love

Past Jamie

Filed under Git