[EDIT : RELEASED !] What about a code generator for the Playground?

Completed Features
1

Hello :slight_smile:

For my personal usage, I have been working on what, I think, could be a nice feature to add on the official playground : a procedural code generator !

Screenshot from 2024-05-08 19-10-00
Screenshot from 2024-05-08 19-10-00788×456 36.7 KB

I added in the top command bar a “Code Generator” drop-down menu.

  • RUN : Generates code, replaces in the editor, and restart the playground (Like the existing “New” button)
  • RUN AUTO : Runs when a param is changed

Then, about params, the idea is to be able to chose :

  • Camera type (Arc Rotate, Free, etc…)
  • Light type (Hemi, Directionnal, Point, etc…)
  • Shadow Caster
  • Default Meshes (Ground, Sphere, Box, etc…)
  • Animations (Dude, Dummy, etc…)
  • Particles (A few simple particles settings from the existing playgrounds)
  • etc, etc… Any idea is welcome

Here is a demo of the current progress :

What do you think ? :slight_smile:

++
Tricotou

13 Likes
2

I love it so much!!

I mentioned it to @PirateJC and @PatrickRyan

3

You may press Ctrl+Space while being in the text field of the Playground to open the Code Snippets panel, which has some of the nice functions you’ve mentioned :slight_smile:

image
image1920×1080 212 KB

2 Likes
4

I find this brilliant. It’s much more intuitive and complete than what exists with CTRL+Space which I never think to use, because I don’t see it, so don’t think about it.
On the other hand, integrate it into a menu, we see it and we are more likely to use it.

2 Likes
5

This would be a great time saver. :+1: I am not sure how to setup this up (string parameter) but one useful code generator might be “load gltf from string”. Every time I want to do that I need to google the Babylon forum post, click the link, wait for the playground to load, realise it is the wrong playground, re-google…

…ohh, you know what: idea for the next interation: code node editor like Unreal Engine Blueprints :star_struck:

6

@Tricotou, this is great! Can you use this icon in the bar for your new menu? This fits with the rest of the icon system and is appropriate for your feature. Nice work!

ic_fluent_code_block_24_regular.zip (611 Bytes)

1 Like
7

Yeah I had in mind to do the animations (Dude, Dummy, etc) but indeed this could be a set of GLTF load examples

Ahah. I don’t know if it makes sense for BJS, honestly. Is it planned already ?
To me, Blueprints have been added to UE in order to try to solve a huge problem in GameDev : Few coders are artists, few artists are coders. And it’s a big deal when it comes to designing games.

So to say, I feel like blueprint is meant to be used by people who cannot, or worse, don’t want to code. Assembling 15 nodes just to move an object under a condition… Seems odd to me :grin: I think nobody from BJS community is “alergic” to code, it’s pretty much the opposite… But it’s my opinion, maybe I’m wrong :smiley:

++
Tricotou

2 Likes
8

Nice. I just wish we had copilot. I feel so alone when I code in the PG now. :smiley:

9

@ericwood73, while it’s not integrated into the monaco editor, you still have access and can copy/paste from the Copilot sidebar in Edge. It’s not going to suggest code based on what you are writing, but you can ask it to write chunks of code for you… validation necessary as always.

image
image1906×1217 226 KB

2 Likes
10

I think that’s a great idea - it makes it more discoverable! Despite using ctrl-space all day long – I hadn’t noticed the ctrl-space before, but also it is cluttered with valid code completion from intellisense.

would be great if the two ways somehow shared the same feature to keep functional parity.

11

Done :white_check_mark:

New version including new lights (spot light system, etc), animated characters (.glb and .babylon loaders), some default particles systems :

Agreed. My plan is to setup a Json-based configuration file. First I feel like JS code as a string in a JS file is very ugly :grin:… Second, it will be a good way to make future edits simpler.

I just need to work on a smart structure in order to guarantee executable code and avoid collisions.
For example : shadowGenerator cannot work with Hemi light, etc…
I’m thinking about some kind of key in the json such as needs and avoids, which would be empty by default, but when exists, would define a needed or avoided relationship with another piece of code :

{
    "key": {
        "title": "TITLE",
        "tooltip": "TOOLTIP",
        "doc:": "DOC_URL",
        "code": "SOME CODE;",
        "needs": "anotherKey",
        "avoids": "yetAnotherKey"
    },
    "etc...": {

    }
}

Or something like this…

++
Tricotou

1 Like
12

Awesome idea. Just to want to make sure you do not forget to implement the ‘MUST HAVE’ code generator. It should read something like “Instantly create a great game” :joy:

2 Likes
13

You put it on the table as a joke, but honestly, I was thinking about something similar :joy:

What I mean is, it would be great to work together on the “must have” basic template for Game Dev.
It would include :

  • Keyboard + Mouse basic controls
  • Basic Babylon-based UI
  • Template for assets loading (Initial + on the fly)
  • Basic physics engine setup
  • Etc

And then it would be declined into various “kinds” such as :

  • Platformer
  • First Person Shooter
  • Race Game
  • WebXR Arcade Game

Etc…
I’m sure already, HUNDREDS of nice Playgrounds exist… It’s just a matter of doing the mega mashup :grin:

2 Likes
14

Wow. Didn’t think you would take this seriously (I did add the emoticon, didn’t I? :face_with_hand_over_mouth: :rofl:)

I mean, yes, it might look feasible in the text and Yes, there are PGs existing for pretty much everything. But then, everything’s depending on context and everything’s imbricated at some point. Going this route I believe would be something bold. And despite for all the efforts and ingenuity you would put in it to select from the context and the available ‘templates’, I’m afraid that there will always be gaps and particular conditions that will not make the method or the final assembly relevant for whatever x-project. It’s actually a bit of the same as with the Editors to create a game (like i.e.: realmCrafting).

On the other hand, providing with a small part of ‘code base’ for what you listed above (instead of wandering through, as you say, dozens or hundreds of PGs) would be real cool and useful. Worth giving it a second thought, I believe :thinking: :face_with_monocle:

Meanwhile, have a great day :sunglasses:

15

Love it so much.

Personal request to add FullScreen Advanced Dynamic textures in. CTRL+Space has no concept of it.

1 Like
16

@Tricotou, I was speaking with @Deltakosh, and we think there is one addition that could make this even better if you are willing to tackle it. In looking at the user flow of your feature, it’s great to set up an initial template to then start editing. However, if you have already generated a template with this feature and are deep into writing code to customize it before realizing you want to add something else like a shadow generator, you cannot use this feature to add it without all of your custom code being replaced.

So, what I am suggesting is that you take over the ctrl + space feature and tie it to your feature. Your feature would be for setting up an initial template for the PG. Later in the process after custom code is written, ctrl + space comes into play to insert one of your code blocks at the cursor point. This means there isn’t auto replace of the editor content and ctrl + space works as it does today, but rather than being a separate feature generating code independently, it would reference your code blocks and insert those. This would also ladder up to improving the code blocks available in ctrl + space as both features would have parity in the available code blocks. This way the user can use either or both as their preferences dictate.

Does this make sense? Would you be willing to tackle this with your feature?

1 Like
17

Yes, totally. To be honest, that’s the idea I had in mind when @brianzinn said :

To me the idea would be to

  • Rewrite everything as new code snippets, include them in the CTRL+SPACE feature. Json-Based.
  • Camera, Lights, Meshes, Assets Loads, Particles Settings, GUI templates, etc…
  • Rewrite the Code Generator so that is basically proposes to build an initial scene using a categorized choice among all the above code snippets
  • Conserving anyway the Safe Mode and the fact that it’s clear that this menu is to be used at creating a PG project since it’s erasing the code content. Eventually forcing a warning (even if not “safe mode”) if the Code Generator Run button is triggered after the code has been manually modified, either by typing or using CTRL+SPACE

Then, for when, I don’t know. The current state I could push quite soon, it’s pretty much ready, and it’s been wrapped the correct way either for JS or TS.
Reworking the CTRL+SPACE stuffs, I cannot estimate work right now, since I had no time yet to deep dig into its code. And, (reminder :grin: ) I’m working on my free time, and even if I appear quite active on the forum, I see a notification, boom, I answer it… But at the end, for now in total I don’t have that much time per day to allocate :grin:

2 Likes
18

I solved that maybe not super clean, but I put that these support shadow (if the className starts with a string). It was a bit hacky, but it works for now:

switch (className) {
  case 'DirectionalLight':
  case 'PointLight':
  case 'SpotLight':
  case 'ShadowLight': // I think it's abstract.  Anyway, it can still be created.
  case 'CascadedShadowLight': // I think it's abstract.  Anyway, it can still be created.
     isShadowLight = true
     break;
}

I end up using that to detect the light to apply to the shadow generator, since you need to connect the dependent light at construction time. ie:

const LATE_BOUND_CONSTRUCTOR_PARAMETERS: Map<string, string[]> = new Map<string, string[]>([
  ['ShadowGenerator', ['light']],
  ['CascadedShadowGenerator', ['light']],
  ...
])

You’ll run into that again, if you start Physics, Sprites, etc.

19

@Tricotou, we realize most contributors are doing those contributions on whatever little free time they have so we have no expectations around timing and would never demand a certain delivery timeline. I think we were more interested in bringing it up so that you could make any necessary changes - like how you mentioned modifying your code block to snippet compatible code so the any future integration would be easy. Better to +1 the idea now than come back later after the feature is live and suggest large changes. But we love what you are doing and will be happy with the addition whenever you are able to contribute! Thanks for all your hard work!

2 Likes
20

Cool! :muscle: It would be even cooler if I could save the existing PG code as a template and I could reuse it whenever I want. Honestly I had this idea years ago but it was dismissed because babylon.js doesn’t want to store anything on the users machine. If this has changed I would very welcome this feature.

However honestly what we first need to add is Autoformat on Run/Save :crazy_face: I can see so many badly formatted or unformatted PGs that it’s ridiculous LOL

I do believe I am not the only one always struggling to find the PG I was working on so having a browsable list of my PGs with a thumbnail and with an AI generated description (nobody fills the description field - nice to have functionality) what the PG does would be a game changer. :smiley: I started to mark all my PGs with adding a comment at the first line so I can look them up with the search function of the PG but it’s not the right solution to the problem.

Guys, isn’t the playground intended to just play around and try out things? I don’t believe this is a viable idea. You just can’t make serious development in the playground at least you should not :slight_smile:

What about an AI prompt to generate the Playground code?

1 Like