Facebook API
*Войдите через Facebook, чтобы увидеть свои фотографии в 3D-скульптуре*PlayCanvas - идеальный партнер для создания WebGL-игр и приложений для Facebook. Facebook - отличное место для поиска большой аудитории для ваших игр, а PlayCanvas позволяет создавать быстрые и производительные игры, оптимизированные для веба.
В этом уроке мы покажем вам, как интегрировать API Facebook в ваше приложение PlayCanvas. Как только у вас будет доступ к API Facebook, возможностей будет множество. Например, делиться играми с друзьями, публиковать истории на Facebook и многое другое. Ознакомьтесь с проектом учебника.
Плагин Facebook
Плагин для интеграции Facebook доступен на github. Это упрощает
работу с загрузкой JavaScript SDK Facebook. Просто прикрепите скрипт плагина lib/facebook-setup.js
к объекту Entity в вашей сцене и
слушайте событие fb:init
, и вы узнаете, что API готов. Более подробные инструкции доступны на странице github.
this.app.on("fb:init", function () {
// использовать API
FB.login();
}, this);`
Вход в Facebook
В этом примере мы реализовали пользовательский интерфейс, который позволяет вам входить и выходить из своей учетной записи Facebook в приложении.
Это код в fb-ui.js
.
var FbUi = pc.createScript('fbUi');
// инициализация кода, вызываемая один раз для каждой сущности
FbUi.prototype.initialize = function() {
var self = this;
this._ready = false;
// Когда FB SDK готов, начните с проверки статуса входа
this.app.on("fb:init", function () {
this._ready = true;
FB.getLoginStatus(self.loginChangeFn);
}, this);
this._loginHandler = null;
this._logoutHandler = null;
this.loginChangeFn = this.loginChangeFn.bind(this);
};
// Этот метод вызывается при проверке или изменении статуса входа
FbUi.prototype.loginChangeFn = function (response) {
if (response.status === "connected") {
this.showLogout();
this.hideLogin();
this.app.fire("app:fblogin");
} else {
this.showLogin();
this.hideLogout();
this.app.fire("app:fblogout");
}
};
// Показать диалог с кнопкой входа
FbUi.prototype.showLogin = function () {
var self = this;
var login = document.querySelector(".fb-login");
if (login) {
login.style.display = "block";
if (!this._loginHandler) {
// войти в FB при нажатии кнопки
this._loginHandler = function () {
FB.login(self.loginChangeFn, {
scope: 'public_profile, user_photos'
});
};
var button = login.querySelector(".fb-button");
button.addEventListener("click", this._loginHandler);
}
}
};
// Скрыть диалог с кнопкой входа
FbUi.prototype.hideLogin = function () {
var login = document.querySelector(".fb-login");
if (login) {
login.style.display = "none";
}
};
// Показать диалог с кнопкой выхода
FbUi.prototype.showLogout = function () {
var self = this;
var logout = document.querySelector(".fb-logout");
if (logout) {
logout.style.display = "block";
// выйти из FB при нажатии кнопки
if (!this._logoutHandler) {
this._logoutHandler = function () {
FB.logout(self.loginChangeFn);
};
var button = logout.querySelector(".fb-button");
button.addEventListener("click", this._logoutHandler);
}
}
};
// Скрыть диалог с кнопкой выхода
FbUi.prototype.hideLogout = function () {
var logout = document.querySelector(".fb-logout");
if (logout) {
logout.style.display = "none";
}
};
В этапе инициализации этого кода мы прослушиваем событие fb:init
от плагина Facebook. Как только это событие произойдет, мы знаем,
что SDK Facebook загружен и готов к использованию. Мы используем три функции SDK Facebook. FB.getLoginStatus()
сообщает, вошел ли
пользователь в Facebook через ваше приложение, FB.login()
открывает диалоговое окно входа для пользователя, а
FB.logout()
выходит из вашего приложения и из Facebook.
Функция loginChangeFn
- это обратный вызов, который используется для реагирования на изменения в состоянии входа в систему, и с
помощью четырех функций показа/скрытия мы показываем соответствующее диалоговое окно в зависимости от состояния.
Обратите внимание, что мы также запускаем собственные события приложения app:fblogin
и app:fblogout
, чтобы сообщить
другим частям приложения о том, что статус Facebook изменился.
Доступ к API Facebook
Файл face-photo.js
использует API Facebook для получения списка фотографий пользователя и отображения их в 3D-мире.
var FacePhoto = pc.createScript('facePhoto');
FacePhoto.attributes.add('template', {
type: 'entity'
});
// инициализация кода, вызываемого один раз для каждой сущности
FacePhoto.prototype.initialize = function() {
this.textures = [];
// Настройка загрузчика текстур для запроса кросс-доменных изображений
this.app.loader.getHandler("texture").crossOrigin = "anonymous";
// слушаем событие, которое сигнализирует о том, что мы вошли в Facebook
this.app.on("app:fblogin", this.reset, this);
};
FacePhoto.prototype.reset = function () {
var self = this;
var app = this.app;
var path = pc.string.format("{0}/photos", FB.getUserID());
var done = function () {
var camera = app.root.findByName("Camera");
if (camera && camera.script.camera) {
camera.script.camera.setBestCameraPositionForModel();
}
};
// запрашиваем самые последние фотографии из аккаунта пользователя на Facebook
FB.api(path, function (lists) {
for (var i = 0; i < lists.data.length; i++) {
count = lists.data.length;
var photoId = lists.data[i].id;
path = pc.string.format("/{0}?fields=images", photoId);
// запрашиваем дополнительную информацию, включая исходный URL-адрес фотографий
FB.api(path, function (photo) {
// создаем текстурный ассет с использованием URL-адреса изображения
var asset = new pc.Asset(photo.id, "texture", {
url: photo.images[0].source
});
app.assets.load(asset);
asset.ready(function (asset) {
self.createPhoto(asset.resource);
count--;
done();
});
});
}
});
};
FacePhoto.prototype.createPhoto = function(texture) {
// клонируем шаблон сущности изображения
var e = this.template.clone();
e.enabled = true;
var mesh = e.model.meshInstances[0];
// переопределяем карту излучения на экземпляре сетки для отображения текстуры фотографии
mesh.setParameter("texture_emissiveMap", texture);
this.app.root.addChild(e);
var MIN = -2.5;
var MAX = 2.5;
// случайным образом размещаем фотографию и устанавливаем соотношение сторон такое же, как у текстуры
e.translate(pc.math.random(MIN, MAX), pc.math.random(MIN, MAX), pc.math.random(MIN, MAX));
e.rotate(90, 0, 0);
var aspect = texture.width / texture.height;
e.setLocalScale(aspect, 1, 1);
};
Некоторые ключевые части этого скрипта.
this.app.loader.getHandler("texture").crossOrigin = "анонимный";
Эта строка необходима для того, чтобы загрузчик ресурсов мог загружать текстуры с другого источника (URL), чем местоположение, где размещено приложение (т.е. `playcanv.as).
this.app.on("fb:login", this.reset, this);
Эта строка прослушивает событие входа из нашего файла fb-ui.js
. Когда пользователь входит в систему, мы начинаем процесс загрузки
фотографий.
// запросить самые последние фотографии из аккаунта пользователя на Facebook
FB.api(path, function (lists) {
for (var i = 0; i < lists.data.length; i++) {
count = lists.data.length;
var photoId = lists.data[i].id;
path = pc.string.format("/{0}?fields=images", photoId);
// запросить дополнительную информацию, включая исходный URL фотографий
FB.api(path, function (photo) {
// создать текстурный Asset с использованием URL изображения
var asset = new pc.Asset(photo.id, "texture", {
url: photo.images[0].source
});
app.assets.load(asset);
asset.ready(function (asset) {
self.createPhoto(asset.resource);
count--;
done();
});
});
}
});
В этом разделе кода мы используем API Facebook для доступа к их Graph API. В данном случае мы загружаем список фотографий от авторизованного пользователя, а затем запрашиваем каждую фотографию, чтобы получить URL изображения.
После получения URL мы создаем новый ассет texture
и загружаем изображение.
FacePhoto.prototype.createPhoto = function(texture) {
// клонировать шаблон сущности изображения
var e = this.template.clone();
e.enabled = true;
var mesh = e.model.meshInstances[0];
// переопределить карту излучения на экземпляре сетки для отображения текстуры фотографии
mesh.setParameter("texture_emissiveMap", texture);
this.app.root.addChild(e);
var MIN = -2.5;
var MAX = 2.5;
// случайным образом разместить фотографию и установить соотношение сторон такое же, как у текстуры
e.translate(pc.math.random(MIN, MAX), pc.math.random(MIN, MAX), pc.math.random(MIN, MAX));
e.rotate(90, 0, 0);
var aspect = texture.width / texture.height;
e.setLocalScale(aspect, 1, 1);
};
Наконец, после загрузки текстурного ассета, мы создаем новую сущность Photo и переопределяем эмиссионную текстуру нашей новой загруженной фототекстурой.
Больше идей
Это руководство показывает вам, как загрузить API Facebook и получить доступ к данным Facebook из вашего приложения PlayCanvas. Есть еще много вещей, которые вы можете попробовать с использованием API Facebook. Например, попробуйте делиться историями Facebook, когда происходят игровые события, например, побить рекорд. Или используйте список друзей пользователя, чтобы предложить им бросить вызов своим друзьям в игре.
Наша игра SWOOOP демонстрирует некоторые из этих возможностей. Попробуйте ее на Facebook сейчас.