Skip to main content

Images

Overview

You and your players can upload images to the cloud. On-the-fly resizing, a modern format and a global CDN will allow you to fastly get pictures.

For VK and OK platforms, internal hosting is used, but the image will also be available in the GamePush panel. By default, image uploads by players are disabled. You can enable it with the Allow players to upload images switch:

tip

Please be aware that uploading images allows unscrupulous players to upload prohibited images. You can always remove these images through the GamePush panel and disable this option at any time.

Vkontakte platform

tip

All images are uploaded to the platform to the player in an album with the name of the game.

The first time the image is uploaded, the player will be asked for the necessary permissions.

No additional developer action is required.

Odnoklassniki platform

tip

All images are uploaded to the platform to the player in an album with the name of the game.

In order to use uploading pictures in Odnoklassniki, you must:

  1. In order to use uploading pictures in Odnoklassniki, you need to: Go to the platform settings in GamePush and specify the game's public key in the "Public Key" field. It is required to work with the Odnoklassniki API.
  2. Go to the game settings in Odnoklassniki and in the section "Permissions" set the permissions "Change photos and photo albums (PHOTO_CONTENT)" to "Optional".

The first time the image is uploaded, the player will be asked for the necessary permissions.

Upload Image

+1 Request

To upload an image, you need to call the method with the desired file of the image:

/**
* @type {File} file - desired image file
*/
gp.images.upload({ file: myFile });

Not many game engines provide the ability to work with JavaScript and the DOM API directly.

Therefore, if you do not specify a file, a file selection window will open with the image type (jpeg/png).

The image will then be uploaded to the server.

gp.images.upload();

When uploading, you can tag the image. Additionally, the image is assigned the UGC tag.

gp.images.upload({
tags: [
'screenshot',
'level7',
'valentinesday',
]
});

Upload events

// Image uploaded successfully
gp.images.on('upload', (image) => {});

/**
* An error occurred while uploading
* @type {
* 'player_not_found' - player account has not been created yet
* 'project_not_found' - did not match the game ID or the game does not exist
* 'origin_not_allowed' - forbidden origin
* 'access_not_granted' - the player on the platform did not grant permission
* 'not_permitted' - it is forbidden to upload images
* 'internal_error' - something went wrong
* other - any error not related to the service
* }
*/
gp.images.on('error:upload', (error) => {});

Upload by URL

+1 Request

The method is similar to the previous one, only a URL is used instead of a file. To upload an image, you need to call the method with the desired image URL:

/**
* @type {string} url - desired image URL
*/
gp.images.uploadUrl({ url: 'https://gamepush.com/img/ogimage.png' });

The method is mostly needed to upload screenshots and graphics via blob and Base64 Data URI.

Game engines allow you to save a screenshot of the canvas and return a blob link or Data URI. You can paste them into the url field and upload the image to the server.

// upload blob
gp.images.uploadUrl({ url: 'blob:https://example.com/123e4567-e89b-12d3-a456-426614174000' });

// upload base64 data URI
gp.images.uploadUrl({ url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4...' });

When uploading, you can tag the image. Additionally, the image is assigned the UGC tag.

gp.images.uploadUrl({
url: 'https://gamepush.com/img/ogimage.png',
tags: [
'screenshot',
'level7',
'valentinesday',
]
});

Upload events

// Image uploaded successfully
gp.images.on('upload', (image) => {});

/**
* An error occurred while uploading
* @type {
* 'empty_url' - no image URL specified
* 'player_not_found' - player account has not been created yet
* 'project_not_found' - did not match the game ID or the game does not exist
* 'origin_not_allowed' - forbidden origin
* 'access_not_granted' - the player on the platform did not grant permission
* 'not_permitted' - it is forbidden to upload images
* 'internal_error' - something went wrong
* other - any error not related to the service
* }
*/
gp.images.on('error:upload', (error) => {});

Choose file

FREE

You can ask the player to choose a file without uploading it to the server. For example, for applying effects, drawing, preprocessing before loading, or mechanics associated with a picture. The method will return the file and a temporary blob link to it.

const result = await gp.images.chooseFile();

const {
/**
* Image file
* @type {File}
*/
file,
/**
* Temporary image link
* (only available from the current browser)
* @type {string}
*/
tempUrl
} = result;

Later you can upload this link or file to the server:

const { file, tempUrl } = await gp.images.chooseFile();

// file
gp.images.upload({ file });
// temporary link
gp.images.uploadUrl({ url: tempUrl });

File choosing events:

// File choosed
gp.images.on('choose', (result) => {});

/**
* An error occurred during choosing
* @type {
* 'cancelled' - the file picker window has been closed
* other - any error not related to the service
* }
*/
gp.images.on('error:choose', (error) => {});

Image fetch

+1 Request

Fetch images sorted by newest:

const result = await gp.images.fetch();

const {
/**
* Image array
* @type {ImageInfo[]}
*/
items,
/**
* Check to see if you can upload more
* @type {boolean}
*/
canLoadMore
} = result;

Fetch images from a special collection by tag. The set of tags searches through AND: if you specify the tags screenshot and valentinesday - images that have both of these tags will be found:

gp.images.fetch({
tags: ['screenshot', 'valentinesday']
});

Fetch images created by a specific player:

// own images
gp.images.fetch({ playerId: gp.player.id });

// another player
gp.images.fetch({ playerId: 16977410 });

Fetch a certain number of images at a time with the desired offset:

// First 100 images
gp.images.fetch({
limit: 100,
offset: 0,
});

// Images 101 to 200
gp.images.fetch({
limit: 100,
offset: 100,
});

Fetch events

// Successful fetch
gp.images.on('fetch', (result) => {});

/**
* Error while fetching
* @type {
* 'player_not_found' - player account has not been created yet
* 'project_not_found' - did not match the game ID or the game does not exist
* 'origin_not_allowed' - forbidden origin
* 'internal_error' - something went wrong
* other - any error not related to the service
* }
*/
gp.images.on('error:fetch', (error) => {});

Fetch more

+1 Request

Fetch the next batch of images with the desired settings:

// default behavior
const result = await gp.images.fetchMore();

const {
/**
* Image array
* @type {ImageInfo[]}
*/
items,
/**
* Check to see if you can upload more
* @type {boolean}
*/
canLoadMore
} = result;

// next batch with screenshot tag,
// only uploaded by my player,
// load 10 items
gp.images.fetchMore({
tags: ['screenshot'],
playerId: gp.player.id,
limit: 10
});

Fetch more events

// Successful fetch
gp.images.on('fetchMore', (result) => {});

/**
* Error while fetching
* @type {
* 'player_not_found' - player account has not been created yet
* 'project_not_found' - did not match the game ID or the game does not exist
* 'origin_not_allowed' - forbidden origin
* 'internal_error' - something went wrong
* other - any error not related to the service
* }
*/
gp.images.on('error:fetchMore', (error) => {});

Image fields

/**
* Image ID
* @type {string}
*/
image.id

/**
* ID of the Player who posted the image or 0
* @type {number}
*/
image.playerId

/**
* Source link
* @type {string}
*/
image.src

/**
* Original width
* @type {number}
*/
image.width

/**
* Original height
* @type {number}
*/
image.height

/**
* Tags array
* @type {string[]}
*/
image.tags

Resize

FREE

For GamePush-hosted image links, you can request any image size and it will be transformed.

const url = 'https://cdn.eponesh.com/static/images/97d/ddb/97dddbe1cde68de40bf637349b31f44a.webp';
const url128x128 = gp.images.resize(
// image link
url,
// required width
128,
// required height
128,
// true - crop to size
// false - resize without cropping
true,
);

// https://cdn.eponesh.com/static/128x128crop/images/97d/ddb/97dddbe1cde68de40bf637349b31f44a.webp
gp.player.avatar = url128x128;

Stay in Touch

Other documents of this chapter available Here. To get started, welcome to the Tutorials chapter.

GamePush Community Telegram: @gs_community.

For your suggestions e-mail: [email protected]

We Wish you Success!