FREE: PlayCanvas Editor Extension v1.4.3


#1

I’ve released a small editor extension for PlayCanvas that can be installed on Chrome from the Chrome App Store using this link: https://chrome.google.com/webstore/detail/playcanvas-editor-plus/ebedfcjmndjbaboecddbbjjjoleddfap

It makes a few changes that fit my team’s working style (usually lots of stock assets with long complicated file names that we need to see in colour!)

PlayCanvas Editor Plus

A set of extensions for the PlayCanvas editor. Implemented as a Google Chrome extension.

Features

  • Decimate models right in the asset window
  • Downsize textures with a high quality resample.
  • Copy and Paste components and scripts between entities
  • Copy and Paste between projects (experimental)
  • Colour model view in the assets panel and preview window (no more grey shadows!)
  • See whole of asset name in the asset panel
  • Bake together meshes to reduce draw calls and improve performance
  • Quickly select the Root node and collapse others
  • Quickly select the parent of an entity
  • Powerful search with RegEx, supports component names, entity names etc and returns all matches (unlike the normal hierarchy search)
  • Drop to root - enables items being dropped from the asset panel to be located at the position of the selected entity but then parented to the root - stops accidental creation of complicated deep structures when designing scenes
  • Snap to grid - snaps one or more entities that are already in the scene to
    the current grid interval - normal snapping in PlayCanvas does not round
    the existing position, but only moves items by grid increments.
  • Snap Rotation - snaps the Y rotation of one or more entities to a 90 degree increment. Useful for laying out levels.

Keyboard Shortcuts

The plugin adds some shortcut keys:

T - snap the current entity or entities to the snap increment

R - select the root scene node (collapsing others)

U - select the parent of the current entity (or the first entity selected)

G - activate the search window

Copy & Paste

When you select an entity there will be an extra panel in the Inspector that lets you select the components and scripts you want to copy. Check the box next to each and then press the Copy button. Now select the target entity and the box will show which things can be pasted. You can’t paste a component or script that already exists, so they will not appear (delete the existing ones if you want to overwrite them).

Copy & Paste Between Projects (Experimental)

When you select one or more entities in the scene or the hierarchy a copy button will appear on the Ixion toolbar. Press this, then open your other project in a different tab and then press the paste button.

Clicking paste will:

  • Import all missing assets from the other project including models, scripts, animations, sounds and textures etc
  • Create the same hierarchy in your new project assigning all of the correct components
  • If an asset already exists it should be used and not re-imported

This may all take some time. You may see duplicated items appearing during the operation, they should be cleared up at the end.

Mesh Decimator - LOD level creator

The mesh decimator allows you to reduce the number of faces in your models to optimise them or create LODs (Levels Of Detail) to use when the item is far from the camera.

When you select a model in the assets window, a new panel will appear in the Inspector called DECIMATE. You can select the target triangle count with a slider and then hit the “Decimate” button. This may take some time, an overlay will show you that it is working.

The decimator will hit it’s target goal of triangles - but that may not be a good idea for your mesh. Experiment with different settings for different meshes and make sure you review the model from a variety of angles and ranges before deciding to use it.

Decimator outputs models with millimeter precision to reduce the file size. This means you should get a good download speed improvement from just re-saving the model using Decimate with no face removal at all - presuming you can live with millimeter accuracy.

Downsize Textures

When you select a texture asset a new panel will appear in the inspector allowing you to choose a size to which you would like to resize the image. You may also choose to replace references to the current texture with the new one.

New texture files are created with a name of “Resized_XXXX_OLD_FILE_NAME” they are also tagged as “Resized” and the size to which they were resized.

Baking Meshes

The plugin allows you to bake together meshes to save draw calls and improve performance.

You select one or more entities in the tree and then they and their children are combined based
on the materials used in their meshes.

A new asset is added to the project with the baked mesh and an entity is added to the
scene which uses this mesh. Existing entities that were baked are disabled.

Baking can take a while and the resulting model is automatically imported into
PlayCanvas and this will take additional time, with the normal orange import progress
bar showing at the bottom right of the window. No new entities will be added and no
entities disabled until this process is complete. So don’t leave the editor until
it finishes.

You can specify options for the resulting meshes - for instance their lightmapping
and shadow settings. You can also choose to ignore meshes with more than a
vertex limit you specify. You get the biggest performance improvements when you
bake many meshes with few vertices, but you can also leave this option turned off if
you prefer and just bake everything.

There is a limit on the number of vertices in a mesh of 62,000. If the number of
vertices exceeds this a second mesh is automatically created and added as a
further mesh instance. This process is repeated so there is no practical limit.

Downsides of baking

Baking meshes may end up messing with culling and having more triangles drawn than if
they weren’t baked. This is a CPU/GPU balancing issue. In general I pretty much
always bake meshes for static items, but you should be aware that this may
significantly increase the number of triangles rendered and assess yourself whether
your application is GPU or CPU bound.

Baked meshes can be large. You can bake meshes at runtime to get the same performance boost
without downloading the files. The choice here is between how long it will take to
bake the mesh at runtime compared to downloading a prepared mesh. A runtime version
of the mesh baker is included in the project source files.

Searching

The search tool searches entities in the current scene. You can use regular expressions for searches.

The entities are searched by name, components attached and the names of scripts. If
you need to differentiate between them then you can prepend a special character - but
this must then be followed by the start of the name, script or component.

  • : Name of the entity. e.g. :player
  • = Name of the component. e.g. =collision
  • # Name of the script. e.g. #follow

You can follow a search term with an @ to indicate that there should be no more characters in the match.
e.g. :man@ searches for entities that are called ‘man’ but will omit ‘manual’ etc.

History

v1.4.3

  • Fixed a bug in baking with no UV2
  • Fixed a bug in decimation where the decimation panel would not appear

v1.4.1

  • Added per sub mesh settings for decimation as an advanced option
  • Added mesh output precision

v1.4

  • Added copy and paste between projects
  • Added mesh decimation
  • Fixed a bug in colour assets

v1.3

  • Added texture downsizing.

v1.2

  • Copy & Paste for scripts and components

v1.1.4

  • Fixed a few faults in the CSS - especially buttons in the properties window
  • Added a settings dialog to configure which buttons are displayed by default

v1.1.3

  • Added an @ symbol after search terms (name, component, script) to enable searching for exact matches

e.g. #blend@ searches for all entities that have a script called ‘blend’ but not ‘blender’ etc

v1.1.2

  • Fixed a bug with searching for Scripts 2.0 scripts

v1.1.1

  • Fixed a CSS bug with the assets window

v1.1

  • Added Bake for meshes
  • Improved selectivity of search terms with # : and =
  • Added a checkbox to specify search scope
  • Search has a hot key and reacts to ENTER

This is the second version, expect more powerful features in the future. If you would like to build it yourself or add your own functionality then the github project for it is here:


Asset window : List / details text view
Future of Playcanvas
#2

Hi, thanks for your extension, it’s extremely useful!

I found little issue probably. When I try to search something. I can’t submit form by pressing enter and “GO” works only after second click.

Since you have pointer cursor over the whole search panel, I think it would be better to make clickable area little bit bigger.


#3

Fixed that - enter works now. Plus there is scope for searching.


#4

NEW VERSION 1.1

Includes in Editor mesh baking with lightmap support!

Improved searching with search scope and the ability to find entities with specific scripts. plus differentiate between names, scripts and components.


#5

Thanks so much for this @whydoidoit! This might be the beginning of an editor extensions scene and at some point, why not, official support.


#6

Yes I really hope so to both of those points. The project on GitHub could certainly act as a template for people wanting to build their own extensions or add things to this one.


#7

Thanks for efficiency!

One more:


#8

Ooops… Yeah I’ve removed the height restriction, is that folder all showing? I think they are just stretching to fill empty space right?


#9

Seems like, yes.

Probably better would be add align-items: flex-start instead of auto height?

Also, box-sizing: border-box makes labels look better


#10

I need the height to be unrestricted or it won’t show the full height of the asset name. I’ll fiddle and do something to make sure it’s just that which grows.

Ah I see you have. Thanks!


#11

Fixed and on its way through the publishing workflow @mikefinch


#12

NEW VERSION 1.1.2

Fixed a bug with searching for scripts by name in the new scripting system


#13

NEW VERSION 1.1.4

  • Improved searching
  • Fixed some CSS bugs
  • New Settings option to configure which items overlay the editor window.

#14

NEW VERSION 1.2

  • Added ability to copy scripts and components between entities

Also open call for anything people would like to see added. I can try :slight_smile:


#15

I know it’s possible but haven’t got round to implementing it myself: downsize textures which is useful, when optimising the project size.


#16

Good point, that’s a good one!


#17

Makes me think actually. I have a mesh decimator I built for Unity, could also dust that off some time and add LOD level creation for meshes… But yeah, textures first :slight_smile:


#18

An automatic mesh decimator would be awesome!!


#19

NEW VERSION 1.3

  • Added texture downsizing

#20

NEW VERSION 1.4

  • Added copy and paste between projects
  • Added mesh decimation
  • Fixed a bug in colour assets