(in very early development)
Gaming in the web browser? Yes!! That's what we do now. ascend! is an embryo of a Javascript library, that for the moment is able to create a big open world terrain, optimized for lightweight games that start fast in the web browser. It's fully based on the 3D library three.js, which makes it easy to add your own 3D objects and extend the functionality to fit your needs. Here is an example of how it can look:
HOW TO GET STARTED:
You need 3 files, ascend.js (our open world library), three.js (an open source 3D library) and the main HTML file that runs the game (I call it example.html), and some kind of web server to put the files on (why do you need a server?). Then place the 3 files in the same folder on your server.
So shortly, download these 3 files and put them on your server:
• ascend.js
• three.js (LICENSE)
• example.html (code is shown with explanations below):
<!---------------------->
<!---- example.html ---->
<!---------------------->
<!-- Start of HTML file (<body> must exist becaue that's where we create the graphics) -->
<html>
<body></body>
<!-- Include three.js (3D library) and ascend.js in the project -->
<script src="three.min.js"></script>
<script src="ascend.js"></script>
<!-- Javascript code -->
<script>
// Textures - Change these to your own files! (Right now they're pointing at textures on my website, but you it's better to start with local files on your server.
ascend_texture_roof = "https://kbrecordzz.com/f/texture_roof.jpg";
ascend_texture_house = "https://kbrecordzz.com/f/texture_house.jpg";
ascend_texture_terrain = "https://kbrecordzz.com/f/texture_terrain.jpg";
ascend_texture_water = "https://kbrecordzz.com/f/texture_water.jpg";
ascend_texture_skybox = "https://kbrecordzz.com/f/texture_skybox.jpg";
ascend_texture_trees = "https://kbrecordzz.com/f/texture_tree.png";
// This creates the actual world, which is done in a few seconds before the game starts.
// Replace 0.543243 it with a random number between 0 and 1 to get another world!
ascend_init(0.543243);
// This is the main game loop. everything inside the render() function runs every frame
function render()
{
// This maintains the world and creates more of the world as you move
ascend_loop();
// SAMPLE CODE to move the camera through the world and
// write the object and height values to the console.
// Change this to something else and control the camera with keyboard, etc.
// See kbrecordzz.com/ascend/objectcodes for more object info
let current_object = ascend_getobject(camera);
let current_height = ascend_getheight(camera);
camera.position.z += 0.04;
camera.position.x += 0.02;
camera.position.y = highlevel+5;
camera.rotation.x = 0.1*Math.PI;
camera.rotation.y = Math.PI;
console.log("OBJECT: " + current_object);
console.log("TERRAIN HEIGHT: " + current_height);
}
render();
<!-- End of Javascript code -->
</script>
<!-- End of HTML file -->
</html>
Then, change example.html to fit your needs, and try new things! Pro tip, google how to do stuff with keyboard and mouse in Javascript so you can control the camera and actually make a game that someone can play. Right now world generation can only be done by changing the seed value as seen in the code above, but more detailed editing could be added in the future.
If you have any questions, write to me on Twitter!
I know ascend! is buggy, but bare with me, it will get better! Thanks Desperado for the name, grelf for the terrain generation, and the three.js Slack channel for optimization help!