Introduction

CloudArcade is a lightweight CMS specifically for HTML5 Games. CloudArcade is not an addons or extension, it's a standalone CMS based on PHP 7.

With CloudArcade CMS, you can create your own Web Arcade or HTML5 Game Portal easily!

Requirements:

  • Web server
  • PHP 7 support
  • MySql

Setup

Setup CloudArcade CMS to your Server.

Upload files

Open "cloudarcade" folder, then you will find these files

Upload all files to your root domain (server).

Note: If you can't modify uploaded files on your server, you can change CHMOD 777 for all files and folders.

Installation

After all files are uploaded, you need to install it by visit http://yourdomain.com/unpack.php

Fill these input fields with your mysql database details (you need to create a new database for CloudArcade CMS)

After successfully connected into database, then you need to create admin user.

Note: Currently there are no feature to restore your password, in case if you forget it.

After setup are completed, you can start manage your site.

Admin dashboard

You can access admin dashboard by visit http://yourdomain.com/admin.php or http://yourdomain.com/login/

On this sample, I already add a few games on it.

Dashboard

A sort list of most played or visit games and visitor statistics.

Game List

You can manage all of your games here.

Add game

There are 4 different method to add a new games.

  • Upload game
  • Fetch games
  • Remote add
  • JSON Importer

Upload Game

This is a regular way to add a game, you need to have game files, then upload it here.

All options are required, except for instruction form.

Game filesmust be zipped and have "index.html", "thumb_1.jpg" and "thumb_2.jpg" on root of it. Supported file format for thumbnails is .png, .jpg and .jpeg

Is recommended to use 512x384px image size for "thumb_1", and 512x512px for "thumb_2", actually these size are not required, just to follow gamedistribution standard, in case if you also combine your game list with gamedistribution games.

You need to add a new category if not exist, except if you use "fetch games".

Note: Uploaded games is stored on "/games" folder, delete uploaded game also delete its game files. This action can't be undo.

Fetch games

You can import free games from game distibutor. There are a few options you can choose.

Each game distributor have different rules, please read their Publisher program page for more info.

Pick your collection, then click "fetch games",wait a seconds until game list are loaded and shown.

Click "add game" to add a game into your game list, or you can add all listed games by clicking "add all" button on the bottom of the list.

You don't need to worried about categories, system will create a new category if fetched game categories is not exist.

Your already added fetched games will still shown on "fetch games" list, if you add it again or in case "add all", existing game will not be posted and no duplication are happened.

Remote add

Similar with the first one (upload method), the difference is you just need to provide link or URL for thumbnails and game.

Game URL must be pointed into index.html or have index on it.

Ex: http://cdn.yourdomain.com/games/game-title/index.html, http://cdn.yourdomain.com/games/game-title/

This can be useful if you want to add a game from another source or if you already have games on other domain or server.

JSON Importer

With this option, you can bulk import games from JSON data.

You can also "preview" the game list from JSON data by clicking "preview" button.

Sample JSON data:

[
	{
		"title": "Sample Game Title 1",
		"slug": "sample-game-title-1",
		"description": "This is game description",
		"instructions": "Click any object to move",
		"url": "https://redfoc.com/games/game1/",
		"width": 720,
		"height": 1080,
		"thumb_1": "https://redfoc.com/games/game1/thumb_1.jpg",
		"thumb_2": "https://redfoc.com/games/game1/thumb_2.jpg",
		"category": "Puzzle,Arcade,Action",
		"source": "json-importer"
	},
	{
		"title": "Sample Game Title 2",
		"slug": "sample-game-title-2",
		"description": "This is game description",
		"instructions": "Click any object to move",
		"url": "https://redfoc.com/games/game2/",
		"width": 720,
		"height": 1080,
		"thumb_1": "https://redfoc.com/games/game2/thumb_1.jpg",
		"thumb_2": "https://redfoc.com/games/game2/thumb_2.jpg",
		"category": "Puzzle,Arcade,Action",
		"source": "json-importer"
	},
	{
		"title": "Sample Game Title 3",
		"slug": "sample-game-title-3",
		"description": "This is game description",
		"instructions": "Click any object to move",
		"url": "https://redfoc.com/games/game2/",
		"width": 720,
		"height": 1080,
		"thumb_1": "https://redfoc.com/games/game2/thumb_1.jpg",
		"thumb_2": "https://redfoc.com/games/game2/thumb_2.jpg",
		"category": "Puzzle,Arcade,Action",
		"source": "json-importer"
	}
]

"slug" is optional, others is required. you can fill "source" with another info, it work as an identifier where the origin of the game from.

Categories

List all your game categories. delete a category that have games on it also delete games on its category.

Collections

Collections is a feature to create a specific list of games, such as featured games, promoted games.etc

Put game id list and separate it by comma, you can see game id on "Game list".

Note: This feature require coding to show game list. Read developer documentation for more info about collections.

Pages

Page can be useful to store "about", "info" or similar.

For security reason, page content output are filtered by HTML Purifier (more info http://htmlpurifier.org/), so you can't put any script and a specific HTML element on page content.

You can edit or delete your page here.

Click "Add page" to create new one, HTML are allowed here.

Settings

On this page, you can change site title, site description, theme, site logo and more.

General settings

Advanced settings

Themes

CloudArcade have Theme feature, so you can change site design easily. You can't add a new theme here, but you can create custom theme manually, read developer documentation for more info.

Plugins

With plugins, you can add extra features for your site.

You can upload your custom plugin or load free plugins from Plugin repository, plugins that listed here is created by CloudArcade developer.

Style editor

Style editor can edit current selected theme style.css

Use "Theme Editor" plugin for better code editor.

Layout editor

Layout editor are also updated current selected theme php file, if you put a wrong php code, it may break the site.

Not all element is shown here, just some part of theme files, if you want to change something that are not listed here, you need to edit directly into theme folder/files, theme folder path is "/templates/".

Additional information

( Content )

Re-install CMS

Delete "connect.php" file, then visit installation page.

Nginx server

If you're using Apache server, you're fine! CloudArcade is using .htaccess to perform pretty URL.

Actual page URL is "yourdomain.com/index.php?viewpage=game&....". With pretty URL it will be "yourdomain.com/game/game-title/"

Since .htaccess are not work with Nginx, you need to update your Nginx rewrite rules configuration to match CloudArcade pretty url structure or you can turn off "pretty URL"

Settings > Advanced > PRETTY URL

Follow this tutorial to modify your Nginx config https://cloudarcade.net/tutorial/pretty-url-on-nginx-server/

HTTPS / SSL

By default, CloudArcade is using HTTP

If your website is run over HTTPS, but you're using HTTP configuration, go to Settings > Advanced > Use HTTPS.

Unicode characters

If you're using non Latin characters, example if your site language is Arabic, Russian or Chinese. and also use it's Unicode characters into Game title, Category name. You need to set "CUSTOM_SLUG" to "true".

Basically slug are generated automatically with it's title, but it will not work with Unicode characters, so, you need to set slug manually to make it works.

Slug characters must be Latin.

Settings > Advanced > Custom Slug

Update: Since v1.2.4, you can use unicode characters on your slug or category path (URL) by activating "UNICODE SLUG".

Sub-folder install

(Updated since v1.2.4) To be able to use CloudArcade on sub-folder, you need to modify "sub-folder.php" ("includes/sub-folder.php")

Change "your_folder" to your folder name. basically it's just add URL path.

Don't forget to put a "/" after folder name.