Xefni Abstract Platformer- MVI (devlog)

Inspired by a couple GDC talks this week. Doing a 'sprint' to release a game 'vignette'. In the spirit of doing a Minimum Viable Interaction' (based on the idea of a Minimum Viable Product (MVI)), I am mocking up an interaction based on this, scaling back and removing art just to get the mechanic down and see if it's interesting. The main interaction is jumping and flipping block states (ala Qbert.)

Playable: Revision 009 [Stones rotate again, after solving normal map rotation issue]

Previous

Revision 007 [Change to rounded stones and petals, petals fade on touch]

Revision 006 [Add cherry tree branches, change start platform to a tree branch]

Revision 005: http://www.mopsothoth.com/xefnirel/005/ [update to 'art' add cherry blossoms falling via particle effects]

Revision 004: http://www.mopsothoth.com/xefnirel/004/ [block degrade and dust particle effect]

Revision 002: http://www.mopsothoth.com/xefni002/ [added level editor]

Revision 001: http://www.mopsothoth.com/xefni001/ [added 11 levels]

I stripped down my existing platformer code to the bare minimum, removed the animations and placed a bunch of blocks. I added one more event to give the player a goal when a block is touched, it changes color (via changing animation to a block of a different color.) I left in the mechanics of double jump and wall jump. If the player falls, the 'level' restarts. It was fun to play with for a little bit and nice to have a goal (changing all the blocks to be the same color.) The blocks are animated with random sine behavior for V and H, they are randomly spawned within a constrained range. Next, let's add some more levels with different behavior (reminds of different levels of Jumpman Jr. - which all had a fun title.) The large translucent rectangles at the bottom are for touch controls (platform controls on touch are generally pretty bad, hopefully keeping these very simple will make them usable.)

Inspirations:

GDC Talk 2017

Hitchhikers Guide to Rapid Prototyping! (Mark Barrett)

Todd Hamish: Geometric Viruses

Jason Rohrer: Game Worlds

https://mitpress.mit.edu/books/game-worlds-jason-rohrer

Experimental Gameplay Workshops at GDC

http://www.experimental-gameplay.org/

Added level editor/tester, does not save yet. Can see interesting levels generated by this.

Level Design

Done through parameters which generate the initial blocks and some behavior:

Level attributes

* 00 Level Number

* 01 Name of Level

* 02 Number of blocks

* 03 Blocks Size

* 04 SineHMag

* 05 SineHMagRandom

* 06 SineVMag

* 07 SineVMagRandom

* 08 Animation start

* 09 Animation end

* 10 H random top

* 11 H random bottom

* 12 V random top

* 13 V random bottom

* 14 Vector Enable

* 15 Vector Animation Cure

* 16 Vector Animation Infect

Example level file, JSON object loaded through AJAX objects and events from local storage (may change to cached cloud storage model later)

{
"c2array":true,
"size":[11,17,1],
"data":[[
[0],
["Explore"],
[20],
[1],
[10],
[5],
[10],
[5],
["A0"],
["A1"],
[1024],
[0],
[600],
[625],
[0],
["A0"],
["A1"]
],[
[1],
["Shrinkage"],
[25],
[1],
[10],
[5],
[10],
[5],
["A0"],
["A2"],
[1024],
[0],
[600],
[720],
[0],
["A0"],
["A1"]
],[
[2],
["A Little Faster"],
[25],
[1],
[100],
[50],
[100],
[50],
["A0"],
["A1"],
[1024],
[0],
[600],
[720],
[0],
["A0"],
["A1"]
],[
[3],
["A Little Faster Shrinkage"],
[25],
[1],
[100],
[50],
[100],
[50],
["A0"],
["A2"],
[1024],
[0],
[600],
[720],
[0],
["A0"],
["A1"]
],[
[4],
["PeeWee"],
[25],
[0.3],
[100],
[50],
[100],
[50],
["A0"],
["A1"],
[1024],
[0],
[600],
[720],
[0],
["A0"],
["A1"]
],[
[5],
["Deep"],
[35],
[1],
[100],
[50],
[100],
[50],
["A0"],
["A1"],
[1024],
[0],
[400],
[768],
[0],
["A0"],
["A1"]
],[
[6],
["Mongo"],
[12],
[2],
[100],
[50],
[100],
[50],
["A0"],
["A1"],
[1024],
[0],
[400],
[768],
[0],
["A0"],
["A1"]
],[
[7],
["Above"],
[25],
[1],
[100],
[50],
[50],
[25],
["A0"],
["A1"],
[1024],
[0],
[400],
[600],
[0],
["A0"],
["A1"]
],[
[8],
["Tower"],
[25],
[1],
[100],
[50],
[50],
[25],
["A0"],
["A1"],
[524],
[500],
[200],
[760],
[0],
["A0"],
["A1"]
],[
[8],
["Vector"],
[25],
[0.5],
[100],
[50],
[50],
[25],
["A0"],
["A1"],
[0],
[1024],
[200],
[760],
[1],
["A0"],
["A1"]
],[
[8],
["Triplets"],
[3],
[1],
[500],
[200],
[0],
[0],
["A0"],
["A1"],
[0],
[1024],
[740],
[760],
[0],
["A0"],
["A1"]
]]
}
[/code:3l2zj9st]

Some feedback I got that was lost, when the thread got erased.

From Pandadoor:

• Watch for playable by color blind [Agree need to make accessible.]
• Anti-virus [Agree, original name was infex, but was cute and reversed that, because I like the theme being curing]
• Change from red to green [Yes in the spirit of curing]
• Jump sfx occurs, even if jumping is not possible [Yes, should change the sound to an aborted jump]

Changes:

• Level does not reset everytime you die, you have 6 chances before reset level. I will probably make the lives per level a level parameter (so it can change).
• When you die, you change, become smaller, jump strength goes down but you become faster, you degrade and upgrade
• When you return to starting position, you float up from the bottom and you can still change blocks that you pass through.
• If you die 6 times, level restarts

So getting amusingly philosophical for this very simple game, I was thinking about Wabi-Sabi and some of the tenets of Buddhism around impermanence and continuity.

• I like that your player can also change/degrade over time (impermanence), in fact, I want to make the background fade as the blocks and the player trace over it, creating a unique background for your game over time.
• Some continuity - you can revive in the same level with your work intact, or you can full resurrect, but there is no end, you stop playing when you want (which might be really fast if you don't like the game, so need to make levels interesting and rev up the programmer art engine.)
• When you die and come back you can have an unintended benefit - blocks you pass through can still turn.

Haha, too much thought going into this simple game vignette, but I am enjoying it. Iterate!

I saw the nice tutorial on particles and tossed that in to start adding some atmosphere, I also want to start changing the colors to be softer in a Monument Valley like pastel palette. I also have added to level the option to shrink the blocks by a certain amount. Currently, this is applied on all levels but will change it to be varied. With the shrink of blocks, the blocks become interesting and imperfect/impermanent. Wabi-Sabi style!

Release 005 - Some Art

• Add some 'art', I want elements of Zen garden. So granite stone, bamboo, cherry blossom petals falling and the player is a Jizo statue
• I like the cherry blossoms falling (generated via particles with a warp).
• The stone looks ok, but to be honest, when shrunk down starts to look like 'toast'.
• The change to bamboo is too abrupt, perhaps change to something different.
• Gameplay is too fast and hectic for Zen garden, perhaps slow it down some.

Added cherry tree branches at the top, to complete where blossoms are coming from. Added some 'warp' effects to the branch sprites to make them appear to sway in the wind along with the falling cherry blossoms. In the playable, there is a slider to adjust the petal particle output.

Time to get rid of the horrible toast and bamboo. Change to rounded stones of varying size, add a little sine rotation, make the transform into a petal and make the petals fade away after landing on them (they wear away... so wabi-sabi, man.

Now the game is looking a little mesmerizing to me, something to just watch unfold as you jump around.

I ran across this great tutorial and couldn't help but try it out: Dynamic Lighting.

First results (definitely need tweaking, stones looks like they are covered with moss (which is not horrible, but not intended.)). The 'light source' is in the lantern.

I bought a copy of DLight Sprite (recommended in the tutorial) and it worked really well, since it was one-click to normal maps and I did not have to draw shadow maps.

I used the recommended shader (Normal Map Extended, which worked well.

There is a lot to tweak in the effect and I think I will need to do it live, so I can play with it quickly (via sliders in game).

The lamp just has a glow with a sine for changing the angle and the origin point move to the top of the sprite and a particle attached insider it.

The tree branches are not lit. so they seem really bright, so thinking about what to do there.

The normal maps are baked in terms of orientation, so when I had the stones rotate the lighting was very incorrect as the normal maps rotated. I could leave them non-rotating or could look at the effect / shader and see if there is way to change it based on the rotation / orientation of the normal map vs the 'light'. That would be the better 'universal' fix, a big hack which may show roughly correct results would be to also rotate the location of the light as the stones / normal maps spin, but would have to be done separately for each stone, which is a pain (right now, the stone and player normal maps are all in one family with a common normal map extended effect and a common light position.)

The effect has two more lights to play with, so I may add a little blue will-o-wisp (like something from Totoro, like soot sprites floating around) and also a stone lantern near the ground with a red colored fire.

I wanted the stones to rotate again, so I did a quick hack to make the object rotation with normal maps work well enough. Here is the result:

For each rotating object, I change the location of the light X,Y so, that the light location rotates around the object/normal map in the opposite direction with a fixed distance. Using some basic trig to figure out the formulas for the X,Y location of the light, I got this effect, which looks pretty good. Generally, the shadows are on the bottom of the stones and the lit portions are on the top. This models uniform moonlight (not the point light of the lantern) coming from above the stones. Using x=R*cos(angle), y=R*sin(angle) to define the circle trajectory (with adjustments for 90 being coming from above and 180 to make it on the correct side.) I think there is a good chance I can make it look better by adjusting and changing the normal maps themselves (in Sprite Dlight.)

Event snippet (must do adjustment separately for each stone since they are rotating differently, on creation, I capture the UID of each normal map associated with each stone diffuse texture.)

From your events snip shot I realize that we can create local variables under every tick condition.

Added some more parameters to the level description:

• How 'full' the trees are in terms of blossoms (e.g. from full blossom to bare branches, done through Animation of the branch sprite)
• How many petals fall (so, few blossoms in tree, fewer blossoms falling.)
• Added light mask over lamp, so trees are roughly lit based on distance from lamp
• Overall looks a little dark so tweaking that.
• I have a very rough narrative: start with full branches, lots of petals, go to less full branches and fewer petals, now working on an 'end' level, which will cap the 'narrative.'

Branches with fewer blosssoms:

really cool man....