Skip to content
This repository was archived by the owner on May 4, 2020. It is now read-only.

Using Plugins

Jump to bottom
EliteAsian edited this page Oct 5, 2019 · 38 revisions

This is a list of all* plugins and how to use them. It also includes how to setup noa-plus-plugins.

*All plugins made by EliteAsian123

Setup

Clone this repository and move the all-plugins folder into your project (Make sure you have Noa Engine installed in that same project!) then in the index.html file, add these lines of code above bundle.js:

<script type="text/javascript" src="all-plugins/noa-plus-plugins-base.js"></script>
<script type="text/javascript" src="all-plugins/example-plugin.js"></script>

Yep! No npm! This is done to make it easier to develop plugins for noa-plus-plugins, because you don't have to compile it everytime! To setup noa-plus-plugins, go into you index.js (that'll compile into your bundle.js) and add:

// Init noa-plus-plugins
var nppb = new NoaPlusPlugins(noa, BABYLON);
  
// Add the ExamplePlugin and make it say "Hello World" (You can delete this)
var examplePlugin = new ExamplePlugin(nppb, "Hello World!");
nppb.addPlugin(examplePlugin);

// Add any other plugins here

Note that BABYLON is the legacy BABYLON variable, and can be gotten like this:

import * as BABYLON from '@babylonjs/core/Legacy/legacy'

Using NoaPlusPluginsBase

Import using: <script type="text/javascript" src="all-plugins/noa-plus-plugins-base.js"></script>

NoaPlusPluginsBase, is a object you created when doing:

var nppb = new NoaPlusPlugins(noa, BABYLON);

It comes with some extra features that are really useful! For example the new block registry system! Let's say you have a block, but you want all blocks to... Have a nickname, I guess. Now normally you'd have to modify the engine or create a array, but that's all done for you! So instead of this:

var dirtID = noa.registry.registerBlock(1, { material: "dirt" });

Do this:

var dirtID = nppb.registerBlock(1, { material: "dirt" }, { nickname: "Mr. Dirt" });

Now it looks pretty much the same, except for a extra array at the end. That array can have anything you want in it. To get info from that array is simple. Just do this:

console.log(nppb.getBlockCustomOptions(dirtID, "nickname"));

In this case, we are just printing what the nickname of dirt is. But you can do whatever you want with this. How is this useful? Well every block can have a nickname and when you click on it, it says its nickname in the console. A more practical thing would be hardness. Every block would have a hardness, and if you break a block it takes longer depending on how much the hardness is.

Remember that this is per block ID not per block. So every dirt block will have the same properties.

NoaPlusPluginsBase also includes a Decal system. Read about it here.

Using ExamplePlugin

Import using: <script type="text/javascript" src="all-plugins/example-plugin.js"></script>

ExamplePlugin is a super small plugin that prints out what you pass in. It makes sure that noa-plus-plugins is working! To add it type:

var examplePlugin = new ExamplePlugin(nppb, message);
nppb.addPlugin(examplePlugin);

message is what it writes in the console. nppb is a reference the the noa-plus-plugins object. If you want it to type things in the console on demand, use this:

examplePlugin.say(message);

Again, message is what it writes in the console.

Using NoaTerrainGen

Import using: <script type="text/javascript" src="all-plugins/noa-terrain-gen.js"></script>

This plugin uses simplex-noise.js but it is included.

This is good to use as a testing ground but it is recommended you make a terrain generator yourself for full customizability.

NoaTerrainGen is a plugin that does terrain generation for you. To setup do this:

var noaTerrainGen = new NoaTerrainGen(nppb, seed);
nppb.addPlugin(noaTerrainGen);

nppb is the NoaPlusPlugins object, and seed is the seed for pseudorandom generation.

Now this it self does nothing as you need to tell it when to generate terrain, so in the worldDataNeed event, do this:

// worldDataNeeded Event
noa.world.on("worldDataNeeded", function (id, data, x, y, z) {
    data = noaTerrainGen.genSimpleTerrain(id, data, x, y, z, [grassID, dirtID, stoneID], "simplex");
    // Tell noa the chunk's terrain data is now set
    noa.world.setChunkData(id, data);
});

The first parameters in the genSimpleTerrain function, are just passing through id, data, x, y, z but the last parameter (we'll talk about second last in a second) is the type of terrain we should generate. Here is a list of the terrain types:

  • flat - a flat world generation
  • default - the default Noa generation
  • simplex - pseudorandom generation using simplex noise

The second last are the block ids used for generation. Here is a list for what each id in the array means for each generation type:

  • flat - 0: top layer, 1: middle layer, 2: bottom layer
  • default - 0: top layer, 1: bottom layer
  • simplex - 0: top layer, 1: middle layer, 2: bottom layer

This function returns data, so make sure you set data equal the function.

Next function is genAdvancedTerrain which is used like this:

var terrainOptions = {
    a_zoom: 100,
    a_height: 7,
    b_zoom: 50,
    b_height: 3,
    c_zoom: 500,
    c_height: 10
};

// worldDataNeeded Event
noa.world.on("worldDataNeeded", function (id, data, x, y, z) {
    data = noaTerrainGen.genAdvancedTerrain(id, data, x, y, z, [grassID, dirtID, stoneID], terrainOptions);
    // Tell noa the chunk's terrain data is now set
    noa.world.setChunkData(id, data);
});

This function generates pseudorandom terrain with some parameters in terrainOptions which is a object. Here are the following options you can set in terrainOptions:

  • a_zoom: (float) the zoom of the first height map.
  • a_height: (float) the amplitude of the first height map.
  • b_zoom: (float) the zoom of the second height map.
  • b_height: (float) the amplitude of the second height map.
  • c_zoom: (float) the zoom of the third height map.
  • c_height: (float) the amplitude of the third height map.

These three height maps are layered on top of each other, giving this terrain generation a more natural look. You can mess around with the settings and get many cool and funny results. Have fun!

This function returns data, so make sure you set data equal the function.

Using NoaChunkSave

Import using: <script type="text/javascript" src="all-plugins/noa-chunk-save.js"></script>

If you used Noa a lot, you probably realized that once a chunk unloads, all the data in the chunk disappears. So if you build something, go somewhere else, and come back, everything is gone. This plugin solves that issue. This is how you set it up:

var voxelCrunch = require("voxel-crunch");

// ...

var noaChunkSave = new NoaChunkSave(nppb, voxelCrunch);
nppb.addPlugin(noaChunkSave);

Now, you might realize the that this plugin requires voxel-crunch. voxel-crunch is a library that compresses chunks, so it doesn't take up as much space. To install it, go into your command prompt and go to your project's directory, and type npm install voxel-crunch and you are all good. Soon, I'll make a version of this plugin that includes voxel-crunch.

Now NoaChunkSave needs to know when to save and load chunks so here is the code you have to put in the chunkBeingRemoved event:

// chunkBeingRemoved Event
noa.world.on('chunkBeingRemoved', function(id, array, userData) {
    noaChunkSave.chunkSave(id, array);
});

chunkSave is a simple function the compresses and saves the chunk to a variable in the plugin. You just have to pass id and array. Now for the loading. This is a bit more complex. So in the worldDataNeeded event type this:

// worldDataNeeded Event
noa.world.on("worldDataNeeded", function (id, data, x, y, z) {
	if (noaChunkSave.isChunkSaved(id)) {
		data = noaChunkSave.chunkLoad(id, data);
	} else {
                // Terrain generation code. If you are using NoaTerrainGen do this:
		// data = noaTerrainGen.genTerrain(id, data, x, y, z, [grassID, dirtID, stoneID]);
	}
    // Tell noa the chunk's terrain data is now set
    noa.world.setChunkData(id, data);
});

So here isChunkSaved checks if a chunk with a id is saved into the save data. If it is then we set the data to chunkLoad uncompresses and returns the chunk data. Else, we generate the chunk. chunkLoad returns data, so make sure you set data equal the function.

Using NoaEnvironment

Import using: <script type="text/javascript" src="all-plugins/noa-environment.js"></script>

Special Thanks to levlups for giving me the code for this.

NoaEnvironment is a plugin that adds effects to the game like fog and clouds. To setup this plugin, type this:

var noaEnvironment = new NoaEnvironment(nppb, "textures/clouds.png");
nppb.addPlugin(noaEnvironment);

nppb is a reference to the noa-plus-plugins object and the string after that is the texture for the clouds (We will get to that in a second).

First let's cover fog. To setup fog type this:

setFogOptions(babylonFogMode, babylonColorFog, density);

The parameter babyloneFogMode has to be a babylon fog mode, here is a list of them, pulled from the babylon documentation:

  • BABYLON.Scene.FOGMODE_EXP - the fog density is following an exponential function.
  • BABYLON.Scene.FOGMODE_EXP2 - same as above but faster.
  • BABYLON.Scene.FOGMODE_LINEAR - the fog density is following a linear function.

Now these reference fog density, the last parameter, which is just the density of the fog.

The babylonColorFog parameter, is the color of the fog. Here is how you'd do that:

// The color that I recommend
new BABYLON.Color3(0.9, 0.9, 0.85);

The color is just RGB (Decimal).

Next for the clouds. Like I said before, the second parameter in the constructor is the path to the texture. The texture isn't the texture of the actual cloud, rather all the clouds in a flat plane. I made a texture in the test-game so you can take a look at that (The color of the clouds are white! You might not see the texture!). Next we need to tell the plugin the properties of the clouds. To do that do this:

noaEnvironment.setCloudOptions(opacity, color, height);

opacity is the opacity of the clouds. color is the tint of clouds, same format as the fog color. height is the height the clouds are from y level 0.

Now to make the clouds move and infinite, type this:

// Ran before each render
noa.on('beforeRender', function(dt) {
	noaEnvironment.moveClouds(dt / 1000000, 0);
});

The moveClouds function, make the clouds follow the player, and scrolls the uvs to make it infinite and the appearance of movement. The first parameter is the scrolling on the U axis (X), and the second is scrolling on the V axis (Z). This function is in the beforeRender event, which is ran before rendering on every frame.

If you want to disable the fog or the clouds mid-game use these:

noaEnvironment.disableFog();
noaEnvironment.disableClouds();

Using NoaBlockBreak

NoaBlockBreak allows you to break blocks like in Minecraft survival mode. To do this you need 8 frames of breaking animation and the following code to setup.

var glvec3 = require("gl-vec3");
var texturesArray = [
    "textures/break_decal_0.png",
    "textures/break_decal_1.png",
    "textures/break_decal_2.png",
    "textures/break_decal_3.png",
    "textures/break_decal_4.png",
    "textures/break_decal_5.png",
    "textures/break_decal_6.png",
    "textures/break_decal_7.png"
];
var noaBlockBreak = new NoaBlockBreak(nppb, glvec3, texturesArray);
nppb.addPlugin(noaBlockBreak);

This plugin needs gl-vec3 which is a library that Noa needs so you shouldn't need to install it. Everything in the texturesArray are the 8 frames of breaking animation. Next to make it actually work do this in the fire key event.

noa.inputs.down.on("fire", function () {
    noaBlockBreak.fireDown();
});

noa.inputs.up.on("fire", function () {
    noaBlockBreak.fireUp();
});

This tells the plugin when you press and release the fire button. Next in the beforeRender event do this:

noa.on('beforeRender', function(dt) {
    // noaEnvironment.moveClouds(dt / 1000000, 0); if you are using NoaEnvironment
    noaBlockBreak.render(dt, 1);
});

dt is delta time which is important for making the break speed consistent and the 1 after that is the modifier for break speed. 0.5 is half the speed and 2 is double the speed. It is also very important that all blocks have the custom option hardness to indicate how long it will take to break a block. It would be something like this

var dirtID = nppb.registerBlock(1, { material: "dirt" }, { hardness: 2 });

If you want to add a hook for when the block is broken, do this:

function onBlockBreak(block) {
	console.log(block);
}
noaBlockBreak.addHook(onBlockBreak);

noa-plus-plugins wiki. noa-plus-plugins by EliteAsian123. Noa Engine by Andy Hall.

Clone this wiki locally