Polish up demos

[Geokureli]

Some demos aren't meant for html5, others seem like they weren't verified on html5. I'd like to compile a list of quick fixes that could make the demo page look a little better

Non-HTML5 demos listed

De-list the website's demos that showcase features for flash or some other target. if we can do this automatically, that'd be good but I'd like to check them all individually to see if they are easily fixed

• BlendModeShaders - The flixel logo is not blended into the background
• BlendModes - REMOVED
• DynamicShadows - recreate the old effect using shaders #317
• FileBrowse - Enable FileBrowse on HTML5. (#288) #291
• Flixius - Flixius HTML5 Fix #295
• FlxBloom - REMOVED
• FlxBlur - REMOVED
• NeonVector - REMOVED
• Transitions

Demos with issues on html5

• Filters - grain doesn't work
• FlxPexParser
  • make FlxPexParser prettier and work on mobile #320
  • show more examples? (is pex still used, maybe remove demo)
• FlxSpriteFilters
  • make them rotate when clicked
  • fix drop shadow
• HeatmapPathfinding - better controls, allow mobile
• Particles blend modes don't work
• PixelPerfectCollision
  • Calc rotation #290
  • fix initial spawn grouping to the right
  • quad trees?
• Tooltips - some tooltips are the wrong size
• Save - Save demo HTML5 fix #294
• FlxMouseEvent - FlxMouseEventManager HTML5 target visual error #296
• BSPMapGen - BSPMapGen maps are aliased on HTML5 #300
• FlipRotationAnimationTiles - Some tile's aren't showing up
• FlxBitmapText - Fix crash in FlxBitmapFont demo flixel#3029
• Transitions - flixel-ui causes it to freeze for like 5 seconds whenever a new FlxState is created

Bad window size

increase window size of small demos, we can double the window size and keep the FlxGame to the same dimesnions

• CollisionAndGrouping
• FlxLightPuzzle
• FlxSkewedSprite - FlxSkewedSprite: bigger hd grass graphics #312
• Save
• FlxBitmapText - Project is set to 800x600, and the demo page is smaller

Misc

• FlxFSM
  • fix jump after superjump pickup, add groundpound pickup #323
  • Add sounds?
• FlxAtlas This demo just sucks
• Colors Pretty ugly, this would be a lot better as a handbook page
• BSPMapGen better tilemap graphics (Use Kenney Assets in some of the demos #314 ?) and skip right to the play state (maybe an option to show the BSP?)
• FlxInvaders Terrible rendition of Space invaders

[ninjamuffin99]

As far as I've tested, flixius seems to work fine on HTML5. The one issue I had when running locally is that the preloader didn't really like "hit.png". That's because it was actually picked up by my adblocker, and it was blocked from loading.

[ninjamuffin99]

The Save demo can be fixed by creating an array, and then setting the save data to that array.

old (throws this._gameSave.data.boxPositions[a] is undefined or can't convert undefined to object)

_gameSave.data.boxPositions = new Array();

for (box in _boxGroup)
{
	_gameSave.data.boxPositions.push(FlxPoint.get(box.x, box.y));
}

working

var boxPositions = new Array();

for (box in _boxGroup)
{
	boxPositions.push(FlxPoint.get(box.x, box.y));
}

_gameSave.data.boxPositions = boxPositions;

An assumption I'd make is that maybe along the way there was some Haxe update that changed the way you'd access and modify Dynamic variables? Not so sure on that though. Just what's in my brain right now

PR #294

[ninjamuffin99]

just from testing locally, i think the Transitions demo works on HTML5? Was there a specific error?

[ninjamuffin99]

Also I believe FlxBitmapText seems to be broken? I just get black screen after the splash screen

[Geokureli]

Also I believe FlxBitmapText seems to be broken? I just get black screen after the splash screen

Fixed via HaxeFlixel/flixel#3029

[SeiferTim]

As far as I've tested, flixius seems to work fine on HTML5. The one issue I had when running locally is that the preloader didn't really like "hit.png". That's because it was actually picked up by my adblocker, and it was blocked from loading.

This cost me HOURS of lost time trying to figure out why something wouldn't load because I had a file named "boomerang.png" in it.

[ninjamuffin99]

The bug with FlxSpriteFilters demo where they fly off screen has a fix in this PR
(drop shadow still looks wonky, but can put that as a new task)
#349

[ninjamuffin99]

also, anyone opposed to renaming the FlxSpriteFilters demo to FlxFilterFrames?
There exists no class actually named FlxSpriteFilters (the demo page claims there is one!), the main class used in the demo is FlxFilterFrames, I even mistakenly referred to it as FlxFilterFrames demo in my PR lol !

[ninjamuffin99]

Increased the window size of the Save demo, doubled it from 400x300 to 800x600. Can preview on dev.haxeflixel.com

[Geokureli]

nice, there should be a release soon to coincide with flixel 5.9.0

[ninjamuffin99]

[Particles] blend modes don't work

Certain BlendModes do work. With the particles demo it's hard to see though since they're on a black background. The current BlendMode is INVERT, so i don't think it has much effect on a black background. Most of the blendmodes are only noticeable on colored particles, with something like ADD or SCREEN.

[ninjamuffin99]

Fixed the Grain shader in the Filters demo 🤝
It was just doing math related to the luminance of the sprite, and in general was set to be super subtle, just bumped up some values to make the shader more noticable

[ninjamuffin99]

FlxLightPuzzle, FlxBitmapText, and CollisionsAndGrouping demos should be updated sizes now

[ninjamuffin99]

Fixed the PixelPerfect demo where all the aliens would spawn to the right

Their spawning code was based off the camera's scroll.x, but since it was being called in create(), the camera didn't have proper scroll info yet. I just call FlxG.camera.update(FlxG.elapsed); in the create() and it seemed to fix the issue!

[ninjamuffin99]

Added sounds and music to the FlxFSM demo!

[ninjamuffin99]

@Geokureli the Transitions demo works in HTML5, would that be checked off as completed?

[Geokureli]

@Geokureli the Transitions demo works in HTML5, would that be checked off as completed?

I hadn't check this because that demo has a performance issue on html5, so I added a new task to the "Demos with issues" section