PerlinDrawer2D and how to use it peroperly

24 views
Skip to first unread message

Marco Franke

unread,
Sep 24, 2020, 8:08:48 AM9/24/20
to excaliburjs
Actually I'm new to execalibur and just experimenting with some basics. Currently I'm trying the PerlinDrawer2D to generate a procedual map for my game. This is essentially working with this code with one problem:

var noise = new ex.PerlinGenerator({
      seed: 515,
      octaves: 15,
      frequency: 2,
      amplitude: .5,
      persistance: .5
    });

    const drawer = new ex.PerlinDrawer2D(
      new PerlinGenerator(noise),
      // this.colorResolver
    );

    drawer.draw(engine.ctx, 0, 0, 800, 800);

At the end there is no drawn map. If I set a debugger after .draw() I see a map. If I continue the execution the map is not shown. 

This is seen on my StackBlitz (within the map.ts):
https://stackblitz.com/edit/typescript-excalibur?file=ui/map.ts

Additionally the PerlinGenerator doesn't respect the setting "displayMode: DisplayMode.FullScreen".

The doc lacks totally about this topic :-(

Erik Onarheim

unread,
Sep 26, 2020, 10:51:06 AM9/26/20
to excaliburjs
Hi Marco,

Apologies, the docs for this are well hidden :( I'll make an issue to improve this experience and offer some reference implementations and usages. I think we can improve the experience here for sure.

Noise generation docs

I've put together a codesandbox https://codesandbox.io/s/perlin-noise-w3c86?file=/src/index.ts with a perlin generator and some fullscreen strategies.

     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="perlin-noise"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>


The DisplayMode.Fullscreen only drawing applies to the engine resolution and viewport. DisplayMode.Fullscreen actually sets the resolution & viewport of the game canvas to match the visible window (really it's more like dynamic aspect ratio), in order to use that you will likely need redraw the perlin noise to match the new resolution on resize which might be CPU intense.

Another strategy might be to have a pre-generated perlin map at a fixed size and use a DisplayMode.Fixed set a specific resolution and viewport size, and request the browser fullscreen API mode on user gesture (like a click) with `game.screen.goFullScreen()` (unfortunately the fullscreen api doesn't seem to work in codesandbox but it does work)

I've also included a way to do a more fully featured fullscreen by changing the viewport based on the aspect ratio specified in the original resolution (which I think is what you're after).

Let me know if this helps or if you have any more questions!

Marco Franke

unread,
Sep 29, 2020, 4:11:48 PM9/29/20
to excaliburjs
Hi Erik, thank you for your detailed example, really appreciate it :-)

will go through it within the next few days and gonna report back when I tested it :-)

Besides that, are there any plans to get a Discord-Channel up and running for excalibur for smal questions? IMHO google groups is a really "old way" to communicate problems or only have a chat with you.

Kind regards from Germany
Marco

DaVince

unread,
Sep 30, 2020, 7:24:09 AM9/30/20
to excaliburjs
I agree with the above sentiment. Discord is one of those chat programs I always have open and as I've been wrestling with the new ECS functionality I've been too forgetful to make a thread about it over here. It works more nicely for a casual, quick chat about much more minor things as well.

Op dinsdag 29 september 2020 om 22:11:48 UTC+2 schreef disan...@gmail.com:

Kamran Ayub

unread,
Sep 30, 2020, 12:25:15 PM9/30/20
to excaliburjs
We can't promise a Discord community since that involves extra commitment that we aren't 100% sure about yet (our availability, moderation, etc.). But we have opened up the new beta Discussions feature in our GitHub repository:

https://github.com/excaliburjs/Excalibur/discussions

We haven't "closed" this group yet but we plan to pin some posts and update all our links to point there instead. Tracking questions and participating like this will be easier for everyone over there!

Cheers,
Kamran

DaVince

unread,
Oct 1, 2020, 2:45:26 AM10/1/20
to excaliburjs
I like this, keeps things nice and unified. Thanks!

Op woensdag 30 september 2020 om 18:25:15 UTC+2 schreef Kamran Ayub:
Reply all
Reply to author
Forward
0 new messages