Re: Appman v0.3

Mr-Dang-MSFT · ‎04-08-2019

Here's another incomplete app that I will not get to for a while.

I think I got the hard parts down. And since I won't get to it for a while, why don't you pick it up?

Here's what you can do next:

Implement life gain and loss
Implement PowerUps and scoring for PowerUps
Implement bonus targets
Implement warp across the map for mobs (it's already in place for avatar)
Detect winning conditions and advance to the next round
Rename and restyle the app
Add more settings

There's a lot of goodness in this app to check out regardless of whether or not you continue:

Components: there are very few objects in the tree view. That's because everything's been simplified into components!
- Besides the components for games, there's a header/footer component that is flexible in use.
Custom properties: THERE'S LOTS OF THESE. See what I pick out.

AlexN · ‎04-15-2019

If any of you in countries with commas as decimal signs want to make the app work, there are two places where the code has to be changed:

On the "ScreenGame" screen, replace the code in the ImageMobs control with the following:

// For performance, don't render this picture until loading is complete and the user is on this screen.
If(And(!IsEmpty(coordinatePlane);!load;App.ActiveScreen=ScreenGame);
    "data&colon;image/svg+xml," & 
    EncodeUrl("
        <svg width='"& Substitute(Text(ImageMobs.Width);",";".") &"' height='"& Substitute(Text(ImageMobs.Height);",";".") &"' viewBox='0 0 "& Substitute(Text(ImageMobs.Width);",";".") &" "& Substitute(Text(ImageMobs.Height);",";".") &"' 
            xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>" &
            Concat(mobs;
                // Create a rectangle for the walls.
                "<rect 
                    x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' 
                    y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' 
                    width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                    height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                    rx='"& 0 &"' 
                    ry='"& 0 &"' " &
                    "fill='"& color &"' " &
                    "fill-opacity='.5' " &
                    "stroke='"& color &"' 
                    stroke-width=''
                />" 
            ) &
        "</svg>"
    )
)

On the same screen, replace the code inside the ImageTiles control with the following code:

// For performance, don't render this picture until loading is complete and the user is on this screen.
If(And(!IsEmpty(coordinatePlane);!load;App.ActiveScreen=ScreenGame);
    "data&colon;image/svg+xml," & 
    EncodeUrl("
        <svg width='"& Substitute(Text(ImageTiles.Width);",";".") &"' height='"& Substitute(Text(ImageTiles.Height);",";".") &"' viewBox='0 0 "& Substitute(Text(ImageTiles.Width);",";".") &" "& Substitute(Text(ImageTiles.Height);",";".") &"' 
            xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>" &
            Concat(coordinatePlane;
                /*
                If(id exactin blocks.id,
                    "<image xlink:href='data&colon;image/png;base64," & Input.ImageTile & 
                        "' x='"& (x-1)*Input.SpriteWidth &"' 
                        y='"& (y-1)*Input.SpriteWidth &"' 
                        width='"& Input.SpriteWidth &"' 
                        height='"& Input.SpriteWidth &"'/>",

                        "<image xlink:href='data&colon;image/png;base64," & Input.ImageBlocker & 
                        "' x='"& (x-1)*Input.SpriteWidth &"' 
                        y='"& (y-1)*Input.SpriteWidth &"' 
                        width='"& Input.SpriteWidth &"' 
                        height='"& Input.SpriteWidth &"'/>"
                )
                */

                // Create a rectangle for the walls.
                "<rect 
                    x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' 
                    y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' 
                    width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                    height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                    rx='"& 0 &"' 
                    ry='"& 0 &"' " &

                    // Change the color for blockers, and walking paths
                    "fill='"& If(id exactin blockers.id;"rgb(116,39,116)";"black") &"' " &
                    "stroke='"& If(id exactin blockers.id;"rgb(116,39,116)";"black") &"' 
                    stroke-width=''
                />" & 

                // Create a circle for each dot and pellet.
                If(And(id exactin dots.id;!(id exactin score.id));
                    "<circle 
                        cx='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth+ComponentInput.SpriteWidth/2);",";".") &"' 
                        cy='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth+ComponentInput.SpriteWidth/2);",";".") &"' 
                        r='"& Substitute(Text(ComponentInput.SpriteWidth*If(id exactin ComponentGameData.PowerUps.id;35%;10%));",";".") &"' 
                        fill='yellow'
                    />"
                ) &

                If(And(id exactin ComponentGameData.Items.id;ComponentGameData.Visible);
                    // Create a rectangle ad hoc.
                    "<rect 
                        x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' 
                        y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' 
                        width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                        height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' 
                        rx='"& 0 &"' 
                        ry='"& 0 &"' " &

                        // Change the color under different conditions
                        "fill='firebrick' " &
                        "stroke='firebrick' 
                        stroke-width=''
                    />"
                )
            ) &
        "</svg>"
    )
)

The only change to the original code is the substitution of the decimal sign. In the original code, due to the regional setting, all values contain a comma as decimal sign, which the svg can't handle.

Unfortunately this might have an impact on the performance, so the fps will drop a bit I guess. But it's still playable

Mr-Dang-MSFT · ‎04-15-2019

Thanks @AlexN, we could probably even store the decimal/comma as a custom property in a component. Does SVG not have regional settings itself?

Anonymous · ‎10-08-2019

You're a madman. This is awesome