Posted on Leave a comment

Phaser 3.50 Released

The open source cross platform HTML5 game framework just got a major update, Phaser 3.50. We’ve long been a fan of Phaser, going back to Phaser 2 with our Complete Phaser Game tutorial as well as our Phaser 3 tutorial video. The Phaser 3.50 release is called the single biggest Phaser release yet.

Details from the Phaser blog:

After 13 beta releases, over 200 resolved issues, thousands of lines of new code and the culmination of over 6 months incredibly hard work, Phaser 3.50 is finally here.

It’s not hyperbole or exaggeration when I say that Phaser 3.50 is the single biggest point release ever in the history of Phaser. There are quite literally hundreds of new features to explore, updates to key areas and of course bug fixes. I did actually try counting all the changes, but gave up after I’d reached 900 of them! Thankfully, they are, as always, meticulously detailed in the Change Log. The changes for 3.50 actually grew so large that I had to split them out from the main Change Log and put them into their own file.

However, don’t let this overwhelm you. A massive number of the changes are purely internal and while there are absolutely some API breaking changes in this release (hence the large version number jump), we’ve kept them as sensible as possible. We already know of lots of devs who have upgraded with minimal, or no, changes to their actual game code. We cannot guarantee that for everyone, of course, but depending on how complex your game is, the chances are good.

This release comes with several new examples and all of the existing examples have been audited to guarantee they are compatible with version 3.50. Major new features from Phaser 3.50 include an improved post processing effect pipeline, 3D Mesh game objects, multi texture support, isometric and hexagonal maps directly from Tiled support, Aseprite export support with animations, point lighting game objects and much much more.

Full details of the hundreds of changes in this release can be found in the release notes. Phaser is an open source project under the MIT source license and is available on GitHub. You can learn more about the Phaser 3.50 release in the video below.

Posted on Leave a comment

GDevelop Game Engine Revisted

We first looked at the GDevelop game engine back in 2017 in our Closer Look Game Engine series. In the intervening years, GDevelop 5 has come a long way, bringing more and more features to this impressive open source cross platform 2D game engine. In the past year there have been over a dozen new beta releases to the engine including several community contributions. There have also been some updates as a result of the 2020 Google Summer of Code. While many of these releases aren’t large enough to justify a video, taken as a whole it is certainly time to revisit this game engine and the improvements it has seen.

Some of the highlights of recent releases include:

  • add support for a new asset store with hundreds of ready made game objects
  • new analytics system without requiring a third party solution
  • better support for right to left languages
  • support for dynamic 2D lights
  • customizable keyboard shortcuts
  • peer to peer communication extension
  • live preview (hot reloading) support
  • command palette for quickly launching editors
  • new editor themes

These are just a few highlights of the dozens of releases over the last few months. If you are interested in checking out GDevelop it’s available for Windows, Mac, Linux and Online. It is also an open source project with the source code available on GitHub under the MIT open source license. If you want to learn more or run into problems, be sure to check out their Discord server. You can learn more about GDevelop and see it in action in the video below.

Posted on Leave a comment

PCUI — UI Framework Powering PlayCanvas Engine Open Sourced

Yesterday PCUI, an open source UI framework for creating game tools and other web applications, was open sourced. PCUI is named as such because it is the UI layer powering the battle tested PlayCanvas game engine. It provides over a dozen controls, as well as implementing logic such as the Observer pattern for making binding your UI to your data. PCUI is open source under the liberal MIT license with the source code available on GitHub.

Details from the PlayCanvas blog:

Today, PlayCanvas is launching PCUI: a new, open source front-end framework for the web.

PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the PlayCanvas Editor – the world’s most powerful WebGL production tool.

Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI’s observer system, that makes it easy to synchronize the state of your application’s UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.

In addition to the PlayCanvas game engine, PCUI is used to power the PlayCanvas GLTF viewer project as well, a project which is open source and shows you a real-world example of using PCUI in a TypeScript application. PCUI is also extremely well documented with several examples available. If you are interested in learning more about PlayCanvas be sure to check out two part tutorial. You can learn more about the PCUI release in the video below.

Posted on Leave a comment

Using Fedora to implement REST API in JavaScript: part 2

In part 1 previously, you saw how to quickly create a simple API service using Fedora Workstation, Express, and JavaScript. This article shows you the simplicity of how to create a new API. This part shows you how to:

  • Install a DB server
  • Build a new route
  • Connect a new datasource
  • Use Fedora terminal to send and receive data

Generating an app

Please refer to the previous article for more details. But to make things simple, change to your work directory and generate an app skeleton.

 
$ cd our-work-directory
$ npx express-generator –no-view –git /myApp
$ cd myApp
$ npm i

Installing a database server

In this part, we’ll install MariaDB database. MariaDB is the Fedora default database.

$ dnf module list mariadb | sort -u ## lists the streams available
$ sudo dnf module install mariadb:10.3 ##10.4 is the latest

Note: the default profile is mariadb/server.

For those who need to spin up a Docker container a ready made container with Fedora 31 is available.

$ docker pull registry.fedoraproject.org/f31/mariadb
$ docker run -d --name mariadb_database -e MYSQL_USER=user -e MYSQL_PASSWORD=pass -e MYSQL_DATABASE=db -p 3306:3306 registry.fedoraproject.org/f31/mariadb

Now start the MariaDB service.

$ sudo systemctl start mariadb

If you’d like the service to start at boot, you can also enable it in systemd:

$ sudo systemctl enable mariadb ## start at boot

Next, setup the database as needed:

$ mysql -u root -p ## root password is blank
MariaDB> CREATE DATABASE users;
MariaDB> create user dbuser identified by ‘123456‘;
MariaDB> grant select, insert, update, create, drop on users.* to dbuser;
MariaDB> show grants for dbuser;
MariaDB> \q

A database connector is needed to use the database with Node.js.

$ npm install mariadb ## installs MariaDB Node.js connector

We’ll leverage Sequelize in this sample API. Sequelize is a promise-based Node.js ORM (Object Relational Mapper) for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server.

$ npm install sequelize ## installs Sequelize

Connecting a new datasource

Now, create a new db folder and create a new file sequelize.js there:

const Sequelize = require('sequelize'), sequelize = new Sequelize(process.env.db_name || 'users', process.env.db_user || 'dbuser', process.env.db_pass || '123456', { host: 'localhost', dialect: 'mariadb', ssl: true
}) module.exports = sequelize

Note: For the sake of completeness I‘m including a link to the related Github repo: https://github.com/vaclav18/express-api-mariadb

Let‘s create a new file models/user.js. A nice feature of a Sequelize model is that it helps us to create the necessary tables and colums automatically. The code snippet responsible for doing this is seen below:

sequelize.sync({
force: false
})

Note: never switch to true with a production database – it would drop your tables at app start!

We will refer to the earlier created sequelize.js this way:

const sequelize = require('../db/sequelize')

Building new routes

Next, you’ll create a new file routes/user.js. You already have routes/users.js from the previous article. You can copy and paste the code in and proceed with editing it.

You’ll also need a reference to the previously created model.

const User = require('../models/user')

Change the route path to /users and also create a new post method route.

Mind the async – await keywords there. An interaction with a database will take some time and this one will do the trick. Yes, an async function returns a promise and this one makes promises easy to use.

Note: This code is not production ready, since it would also need to include an authentication feature.

We‘ll make the new route working this way:

const userRouter = require('./routes/user')
app.use(userRouter)

Let‘s also remove the existing usersRouter. The routes/users.js can be deleted too.

$ npm start

With the above command, you can launch your new app.

Using the terminal to send and retrieve data

Let’s create a new database record through the post method:

$ curl -d 'name=Adam' http://localhost:3000/users

To retrieve the data created through the API, do an HTTP GET request:

$ curl http://localhost:3000/users

The console output of the curl command is a JSON array containing data of all the records in the Users table.

Note: This is not really the usual end result — an application consumes the API finally. The API will usually also have endpoints to update and remove data.

More automation

Let‘s assume we might want to create an API serving many tables. It‘s possible and very handy to automatically generate models for Sequelize from our database. Sequelize-auto will do the heavy lifting for us. The resulting files (models.js) would be placed and imported within the /models directory.

$ npm install sequelize-auto

A node.js connector is needed to use this one and we have it already installed for MariaDB.

Conclusion

It‘s possible to develop and run an API using Fedora, Fedora default MariaDB, JavaScript and efficiently develop a solution like with a noSQL database. For those used to working with MongoDB or a similar noSQL database, Fedora and MariaDB are important open-source enablers.


Photo by Mazhar Zandsalimi on Unsplash.

Posted on Leave a comment

Using Fedora to quickly implement REST API with JavaScript

Fedora Workstation uses GNOME Shell by default and this one was mainly written in JavaScript. JavaScript is famous as a language of front-end development but this time we’ll show its usage for back-end.

We’ll implement a new API using the following technologies: JavaScript, Express and Fedora Workstation. A web browser is being used to call the service (eg. Firefox from the default Fedora WS distro).

Installing of necessary packages

Check: What’s already installed?

$ npm -v
$ node -v

You may already have both the necessary packages installed and can skip the next step. If not, install nodejs:

$ sudo dnf install nodejs

A new simple service (low-code style)

Let‘s navigate to our working directory (work) and create a new directory for our new sample back-end app.

$ cd work
$ mkdir newApp
$ cd newApp
$ npx express-generator

The above command generates an application skeleton for us.

$ npm i

The above command installs dependencies. Please mind the security warnings – never use this one for production.

Crack open the routes/users.js

Modify line #6 to:

res.send(data);

Insert this code block below var router:

let data = { '1':'Ann', '2': 'Bruno', '3': 'Celine' }

Save
the modified file.

We modified a route and added a new variable data. This one could be declared as a const as we didn‘t modify it anywhere. The result:

Running the service on your local Fedora workstation machine

$ npm start

Note: The application entry point is bin/www. You may want to change the port number there.

Calling our new service

Let‘s launch our Firefox browser and type-in:

http://localhost:3000/users

Output

It‘s also possible to leverage the Developer tools. Hit F12 and in the Network tab, select the related GET request and look at the side bar response tab to check the data.

Conclusion

Now we have got a service and and an unnecessary index accessible through localhost:3000. To get quickly rid of this:

  1. Remove the views directory
  2. Remove the public directory
  3. Remove the routes/index.js file
  4. Inside the app.js file, modify the line 37 to:
    res.status(err.status || 500).end();
  5. Remove the next line res.render(‘error’)

Then restart the service:

$ npm start