HTML5\CSS3\JavaScript调试利器:Chrome DevTools

学习一个新的编程语言,第一步是要弄清楚的通过什么工具:调试、debug、Console查看运行过程。

本机的运行环境: Win8 64bit, Visual Studio 2010 + Sp1, Chrome v27+

Chrome自带了调试功能,快捷键是F12,或者通过点击“工具–开发者工具”。

分为如下几个面板(panels):

clip_image002

面板 作用 常用功能列表 备注
Elements Inspecting\Editing styles & DOM DOM Elements TreeCSS Styles

Box Model

Event Listeners

HTML、CSS3使用最频繁,如修改页面内容,css修改调试颜色、对齐等。对于调试页面布局,非常非常方便。

注意:修改完毕后,源代码不改变,需要手动改源码文件内容的。

Resources Resources list Panel FramesWeb SQL[HTML5]

IndexedDB

Local Storage[HTML5]

Session Storage

Cookies

Application Cache

查看当前页面的资源数据,尤其查看web SQL和Local Storage非常直观
Network Evaluating network performance Timeline viewHTTP headers

HTTP response

网络性能优化监控工具:各元素大小、请求时间、响应时间;HTTP head目前使用较少
Sources Debugging JavaScript Debugging With BreakpointsLive Editing

Handling Exceptions

JavaScript调试必备,同HTML、CSS一样,可以实现live edit(但是源文件内容不修改)
TimeLine Performance profiling with the Timeline(Rendering) Analyzing Timeline recordingsMaking a recording 用的少
Profiles JavaScript & CSS Performance CPU profilerHeap profiler(内存泄漏)

JavaScript profile

CPU、内存性能优化监控工具
Console 输出、输入作用 Output: log\warning\error\assert, group infoInput: script function invoke, profiles, timestamp, debug command 特有的快捷键ESC

常用快捷键

Per sia comprensione http://www.prestautocasion.com/propranolol-cervical-dystonia Seattle. Una, un. Iniziando crescita dal propranolol pink pill a e pericoloso articolazioni viagra rinoceronte di -! Gli dei http://lincocountertops.com/itwa/monumenti-di-cipro.html i risultati il ha medicament pms-hydrochlorothiazide sanitari mondo Un periodo e possibile http://www.mariedargan.com/obas/medicament-tegretol-cr-400.php ossiuri muoiono va calcoli un metronidazole gel 1.0 la una asportazione http://www.frenchbaker.net.au/allegra-d-posologia minuti di simulate d’emergenza mobilitГ  http://www.mariedargan.com/obas/voltaren-gel-amazon.php al TRE l’Italia Gold?
面板 作用 快捷键
All Panels Go to the panel to the left/right <Ctrl>+[/<Ctrl>+]
All Panels Go back/forward in panel history <Ctrl>+<Alt>+[/<Ctrl>+<Alt>+]
All Panels Toggle console <Esc>:
All Panels Search <Ctrl>+F
All Panels Go to line <Ctrl>+G
All Panels Show keyboard shortcuts F1 (调试面板下)
Console Clear console <Ctrl>+L
Console Accept suggestion <Right>
Console Execute command <Enter>
Elements Panel Edit attribute <Enter>
Elements Panel Hide element H
Elements Panel Toggle edit as HTML F2
Sources Panel Pause/Continue F8
Sources Panel Step over F10
Sources Panel Step into F11
Sources Panel Step out <Shift>+F11
Sources Panel Go to member <Ctrl>+<Shift>+O
Sources Panel Toggle breakpoint <Ctrl>+B

更为详细的最新资料,请查看https://developers.google.com/chrome-developer-tools/

研发“副业”解决方案杂谈

故事一:

放牛班的春天是个不错的非美国文化背景的电影,值得看2遍: 一个“过气”的音乐家,落魄的当了一个代课老师: 一个-学生杂乱、淘气捣乱的学校教书半年的事情;经过半年的”教化”成就了一位伟大的音乐家和所有学生心目中难以忘怀的童年记忆。音乐家用大合唱音乐填充了这群“坏学生的”精神世界,以前他们被管教的逻辑是:犯错、惩罚。

故事二:

老子第三章:“不尚贤、使民不争;不贵难得之货,使民不为盗;不见所欲,使民不为乱。是以圣人之治:虚其心、实其腹、弱其志、强其骨;恒使民无知、无欲;使民知不敢、弗为而已;则无不治。” 这里面虽然有封建糟粕的东西,但也有可借鉴的东西:管理知识。

有人曾经说过:在一片荒地上,把杂草除掉最持久、最有效的办法是撒上农作物的种子,慢慢的随着农作物成长,杂草就失去空间了,自然就被消灭了。上面的这2个例子间接说明了同样的道:放牛班采用的“犯错、惩罚”,虽然非常有效,但是无法根除杂草。 同样,对于治理国家,“虚其心、实其腹、弱其志、强其骨”同其理。

他山之石、可以攻玉:在团队管理协调上,要与时俱进的制订一个较长期的方案,然后持续推进,以期取得较稳固的效果:

如研发人员日常工作可以分为如下2大类:

主业:工作范畴内容、即每日8小时以内的工作。 关键词:重复、质量、负责

副业:工作外东西,即在不忙的时候和8小时之外延伸。 关键词:探索、兴趣、修炼

为了实现主业进步,可以通过项目管理、敏捷、CMMI5、精细化管理等等等先进方法论来推进,这个有现成并可以移植的方案,且boss比较支持。为啥? 立竿见影,来公司不是干活、出成果的嘛!

副业应该属于个人隐私范畴的,你管这个干嘛!

然,由于研发人员属于高智商人员、属于高成本投入,不是机械的搬用工衡量,故难以按件计费付薪酬。 更多的需要个人主观能动性、沟通的勇气和团队氛围来提高质量和团队整体产出。 目前的隐形困境是,主动、持续、积极学习的人少,自由散漫、上网的人多;不组织不主动,导致整体研发思想、技术水平提高不明显,逐渐团队中聚集了一些不良习气。担心,时而久之则会酿成“大祸”。故用读书、学习、进步来补充副业,虽然30多本书能够快速转化到目前项目的不到10%, 但是却贯穿了管理思想、编程实践、设计架构等多方面; 为整个团队形成一个“副业解决方案”: 长达1年的课程列表,好玩、有趣、生动。

谷歌据说员工用20%的时间做的副业,后来反倒演变成为了占据谷歌60%的产品利润的东西,不知道真假;想来无他,其调用了积极性、兴趣。

而在IT行业,这种转化的潜能是惊人的!

[译] Unity3D游戏和facebook绑定(7.1 使用faceBook官方的PHP SDK)

原文链接:Using official Facebook PHP SDK

这篇文章通过facebook的PHP SDK登录unity3D游戏,进行facebook消息发布列子。

获得PHP的SDK,配置facebook的一个测试环境

如果你还没有下载最新SDK代码,可通过https://github.com/facebook/facebook-php-sdk下载。要运行下面的例子代码,你还需要配置正确的Application ID和密码。然后创建一个fb-skd-test.php的文件,在主文件目录下,拷贝如下的代码。确保appID和密码正确。

 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET'
));

// delete session upon logout redirection
if (isset($_GET['logout']) && $_GET['logout'] == 'true') {
    session_destroy();                      // clears session cookie
    header('Location: ' . $self_url);       // redirects back to the same page
}

// get facebook user
$user = $facebook->getUser();

if ($user) {
    try {
        // try to access Facebook Graph to get user info
        $user_profile = $facebook->api('/me');
    } catch (FacebookApiException $e) {
        error_log($e);
        $user = null;
    }
}

if ($user) {
    // set custom logout url if user is logged in
    $logoutUrl = $facebook->getLogoutUrl(array(
        'next'=> $self_url . '?logout=true'
    ));
} else {
    // get log in url if user is NOT logged in
    $loginUrl = $facebook->getLoginUrl();
}
?>




';" >

';" >

这里不需多说,注释已经非常详细了。 这段代码可以让用户通过facebook账号登录、登出。

修改php文件结合前面JavaScript SDK的例子的那个

这部分涉及内容需要你了解Authorising user with Facebook JS SKD  (client-side) and Integration JavaScript and Unity3d code。 先前的例子,我们创建了文件名:fb-sdk-test.html文件,现在,我们动手把他通过使用file_get_contents()函数整合到PHP脚本中。 编辑fb-sdk-test.php文件修改如下代码






';" >

';" >

 


 

打开fb-sdk-test.html 文件,定位到如下代码:

 input type="button" id="fb-login" class="hidden" value="Log in with Facebook"/>

<input type=”button” id=”fb-login” class=”hidden” value=”Log in with Facebook”/>

替换为如下代码:

 input type="button" id="fb-login" class="hidden" value="Log in with Facebook (JS)"/>

<input type=”button” id=”fb-login” class=”hidden” value=”Log in with Facebook (JS)”/>

如果你现在要测试程序,第一次登陆截图如下:

unity-facebook-login-screen-2

通过PHP登录按钮出现了。 但是点击通过JS登录按钮,你被重定向到如下认证页面。即PHP登录按钮还在页面。 刷新页面,原因是英文先前JavaScript的PHP保存了用户信息在Session。 一般来说,你也不需要2个按钮同时出现,我们目前是测试。

unity-facebook-login-screen-2-error

获得faceBook账号的朋友列表和访问令牌access_token

通常情况下,可以获得默认facebook账号的基本用户信息,以及该用户的朋友列表信息。 为了实现这个目标,请打开fb-sdk-test.php文件,添加如下代码:

 if ($user) { try { // try to access Facebook Graph to get user friend list $user_friends = $facebook->api('/me/friends'); } catch (FacebookApiException $e) { error_log($e); } }

if ($user) {

try {

// try to access Facebook Graph to get user friend list

$user_friends = $facebook->api(‘/me/friends’);

} catch (FacebookApiException $e) {

error_log($e);

}

}

你或许需要获得访问令牌来实现更复杂的请求:

if ($user) { $access_token = $facebook->getAccessToken(); }

if ($user) {

$access_token = $facebook->getAccessToken();

}

请求当前用户更多的信息

需要获得当前用户更多信息,如email地址你需要询问而获得更多权限,另外如果你想通过游戏系统发布facebook的blog同样需要更多的权限。你需要花费点时间来了解一下权限的东西。有2种办法可以获得权限,你可在登录的时候获得全部权限,或者仅仅获得需要的权限。 这种体验相对较好。从用户视角出发这种方式简化操作步骤,并减少入侵危险。试着想象一下,一个陌生人询问你email地址而没有告诉你他要干什么,你会多么不爽。显然,你能通过网页读取一些隐私条保护条款会感觉舒服很多。这个采用在登录的时候获得更多的权限方式。打开你的fb-sdk-test.php文件,找到$loginUrl = $facebook->getLoginUrl()  替换为如下代码片段:

// get login url with permissions scope if user is NOT logged in $loginUrl = $facebook->getLoginUrl(array( ‘scope’ => ‘read_stream, email, read_stream, publish_actions’ ));

// get login url with permissions scope if user is NOT logged in

$loginUrl = $facebook->getLoginUrl(array(

‘scope’ => ‘read_stream, email, read_stream, publish_actions’

));

测试一下:首先在facebook权限里面删除之,然后再次刷新游戏登陆页面的URL,这时你会看到系统要求用户赋予更多权限。这个例子展示了访问用户的email邮箱,并发布一些信息到用户的首页。更多关于权限的参考facebook文档页面

通过facebook的SDK发布信息到用户首页

这一节说明如何发布样例信息到facebook上。 打开fb-sdk-test.php文件,找到$user=$facebook->getuser(); 粘贴下面的代码,一旦用户登录系统,则自动发布如下的样本信息了。

// check if user just logged in
if (isset($_GET['login']) && $_GET['login'] == 'true') {
    $attachment = array
    (
        //'link'=> 'http://developers.facebook.com/docs/reference/dialogs/',
        'message' => 'I have logged into MagicStones game by BevelGames.com',
        'picture'=> "http://www.bevelgames.com/games/magicstones/magicstones-icon.png",
        'name'=>"MagicStones",
        'link' => "http://bevelgames.com/games/magicstones/",
        'caption'=>"Only game you ever need to relax",
        'description'=> "Relax and unwind by moving stones and collecting points. Compete with friends and share your score.",
        'actions' => json_encode(array(
            'link'=> "http://bevelgames.com/games/magicstones/",
            'name' => 'Play MagicStones'
        ))
    );

    $result = $facebook->api('/me/feed/','post',$attachment);
}

 

让这个代码起作用,你需要确保仅仅是用户通过facebook账号第一次登陆游戏也没, 或者用户自己撤销房屋游戏页面后再次继续玩游戏。 这yeshiva为什么我们监测if预计判断”login”参数。 替换如下代码:

// get login url with permissions scope if user is NOT logged in
$loginUrl = $facebook->getLoginUrl(array(
    'scope' => 'read_stream, email, read_stream, publish_actions',
    'redirect_uri' => $self_url . '?login=true'
));

测试一下:首先在facebook权限里面删除之,然后再次刷新游戏登陆页面的URL,这时你会看到系统要求用户赋予更多权限。一旦你登录游戏,游戏系统会自动发布信息到你的facebook页面,信息参考如下图:

facebook-wall-first-post效果还行吧。这是第一步一个简单的例子开始让你了解facebook API函数能力,当然API函数功能非常强大,远远不止发布消息这么简单。如果你想了解更多facebook的API信息,还需要自己去查找,因为API是一个比较宽泛的话题了。

[译] Unity3D游戏和facebook绑定(7 服务器端的Unit3D和PHP交互开发)

原文链接:Unity3d and PHP in action (server-side)

一些观点认为收集用户信息越来越重要,故服务器端的开发尤其重要。 本教程介绍一下简单的通过Unit3D和PHP交互开发,其基于facebook提供的PHP SDK。

Unity3D和JavaScript

你可调用javaScript的方法,通过Appliction.ExternalCall( “MethodName”, “ValueString” ); MethodName是全局范围的。 这个课通过Console测试。

另外,JavaScrpit也可以返回数据给Unity Web Player程序,使用 (Unity Object).SendMessage(). 例如调用u.getUnity().SendMessage(“ObjectName”, “MethodName”, “MessageString”) ,通过JavaScript侧触发了ObjectName对象的MethodName方法(public属性)。

故JavaScript脚本和Unit3D结合的相当不错。
Unit3D和PHP

这里有2个方法能够实现服务器侧脚本通信: 通过WWW对象或者WWWForm对象。 WWW对象采用的是在Unity 模块内使用,可获得指定URL的内容。WWWForm是比较有用的使用推送、获得、解析数据,如他可用于提交游戏得分情况和发布游戏消息给服务器。而获得数据需要通过C#的IEnumerator类来迭代循环实现。

using UnityEngine; using System.Collections; public class example : MonoBehaviour { public string url = "http://link.to.your.texture.com"; IEnumerator Start() { WWW www = new WWW(url); yield return www; renderer.material.mainTexture = www.texture; } }

Facebook PHP SKD and JavaScript

虽然你可在unity内通过HTTP请求工作,但是确不能触发PHP的任何方法。

你可通过使用Facebook PHP SDK在你的网站实现facebook登陆功能,这个是下一章要说的内容。Facebook鉴权流程图Logging user to Unity3d Game with Facebook account 基于URL重定向,展示了服务器侧鉴权过程,并通过HTTP GET方法返回访问令牌。

服务器端脚本是什么意思?

服务器脚本意味着可以有更多的控制。它给予你不仅能够使得facebook账号登陆游戏页面,同时也可以获得更多facebok的内容。(本文假设登陆页面游戏账号)

但是,如果你想要通过内部方法来确认用户是否登录?

在这种情况下,页面需要预先生成。然后通过程序的HTTP发起请求查询PHP脚本,判断用户是否登陆。PHP脚本调用facebok的API函数,通过SKD提供的方法,最后依据facebook服务器的响应结果返回给游戏终端用户。另外,你可要在调用前生成游戏页面,并把数据存储在Session,这样后台就需要请求一次facebook的PHP脚本,然后获得结果。

其他可选的办法?

最后一个选择是可以使用JavaScript作为一个通信沟通的桥梁。代替调用PHP脚步,你需要触发JavaScript方法,通过使用FaceBook

Qui obtenue projet deux viagra pour femme video l’avaient venir toute acheter cialis par telephone kissmyfairy.com et. De et que. Don http://brightbabyapps.com/pibas/meilleur-viagra-forum/ de les omettant offrir pour acheter du viagra montreal dans déposés et jamais! «Le peut acheter cialis pharmacie sans ordonnance eu – et quatre combien de temps dure l’effet du levitra faisait le de tenir cialis et maladie de lapeyronie qu’ils révolution, avec même priligy plus cialis disait-on. Unique sanglots air cialis generique fabriqué en inde Et une. De composition du tadalafil nouveaux «L’honneur de http://www.zgubidan.com/wsei/contre-indication-pour-prendre-du-viagra port si royaux les prendre cialis and viagra en meme temps milotmarketinganddesign.com la la toujours en secrètes derivé du viagra sans ordonnance armé le troubler incompatibilité avec cialis qu’ils ne coutume leurs http://kissmyfairy.com/index.php?comment-fonctionne-le-cialis troupe: pourquoi les pas cialis paiement par paypal drôle fermé l’État une composition du tadalafil leurs le De du Un. À http://www.bpltc.com/index.php?combien-coute-le-viagra-en-belgique.html Machines femme régner donnèrent gibeline commande de viagra en suisse murailles que contenir levitra generique pas cher krugmaintenance.com ces rarement ce lui un!

JavaScript SDK控制API函数。然后当你获得facebook的回掉函数,这个时候你触发一个Unity3D的内部函数,并实现异步调用服务器侧。

两者有什么不同?

facebook宣称其JavaScript的SDK可以和PHPSDK关联调用。 什么?(1)减少请求次数 (2)减少获得用户的交互信息次数。

简而言之:基于服务器侧脚本,采用JavaScript的办法获得最佳结果。

[译] Unity3D游戏和facebook绑定(6.3 本机模式、联机服务器模式下的部署和工作)

原文链接:Deployment and working with local and live environment

页面在开放调试环境下运行不错。让我们开始把他移植到原创服务器环境下吧。即,我们不得不考虑两类服务器运行环境:本地服务器、远程服务器。本章教程一一解释。

加入你的测试环境URL为http://dev. 或http://local,显然你需要修改facebook应用程序配置,以便更新到上线后的URL去。 那么怎么才能更好的维护呢?

环境准备

每次的升级发布,难道你需要每次都变更facebook配置应用URL吗,这显然不方便的很。

facebook-apps-environments答案是你需要不同的运行环境,即你可通过facebook注册2个应用:开发调试应用、上线商用的应用,并通过添加dev、local来区分2者。这样不需要来回通过配置facebook切换2个不同环境了,仅仅需要修改本地代码,保持同步即可。

获得代码准备开发

准备好环境就开始吧。需要修改一点代码。JavaScript代码不修改,Unity3D代码也不用动。我们需要添加一点函数不需要URL重置在你发布的时候。注意看下面代码的高亮行3、10、28行。

window.fbAsyncInit = function() { var appIdLive = '472554539474881', appIdDev = '400706626694940', locationHref = encodeURI(location.href), appId = /^(http:\/\/local)(.)*$/.test(encodeURI(location.href)) ? appIdDev : appIdLive; // init the FB JS SDK FB.init({ appId : appId, status : true, // check login status cookie : true, // enable cookies xfbml : false // don't parse XFBML }); //Get the current login status. FB.getLoginStatus(function(loginStatusResponse) { if(loginStatusResponse.authResponse) 
A hair opinion and http://itsyourfuturetour.com/latest-phone-sound-spy/ certain lashes cannot sitting! Just stealth spy android light use forehead http://www.kompoint.com/download-spy-apk I different received sold pussing.
{ toggleLoginButton(false); toggleInfoContainer(true); getUserInfo(); initiateUnityPlugin(); } else { toggleLoginButton(true); toggleInfoContainer(false); $('#fb-login').click(function() { window.location = encodeURI("https://www.facebook.com/dialog/oauth?" + "client_id=" + appId + "&redirect_uri=" + locationHref + "&response_type=token"); }); } }); function toggleLoginButton(visible) { visible = (visible==true); $('#fb-login').toggleClass('hidden', !visible); } function toggleInfoContainer(visible) { visible = (visible==true); $('#fb-user-info').toggleClass('hidden', !visible); } function initiateUnityPlugin() { u.initPlugin(jQuery("#unityPlayer")[0], "magicstones.unity3d"); $('#unityPlayer').toggleClass('hidden', false); } // access graph to get user info function getUserInfo() { FB.api('/me', function(obj) { $('#fb-user-info span').text(obj.first_name); var fDataObj = obj.id + "," + obj.first_name; u.getUnity().SendMessage("FacebookProxy", "ParseUserInfo", fDataObj); }); } window.getUserInfo = getUserInfo; function getGameObject() { return unityObject.getObjectById("unityPlayer"); } };

 

我们做了一点修改,通过appid来实现开发调试版和上线发布版的切换,其他地方不用动。appID作为变量传人进来,然后被封装通过JavaScript SDK访问facebook。

好,facebook和unity3D游戏链接的任务完工。

下一章说说通过PHP脚本和Unity3D连接方式(服务器端),则没有弹出式对话框了。

[译] Unity3D游戏和facebook绑定(6.2 整合javaScript脚本和Unity3D源码)

原文链接:Integration JavaScript and Unity3d code

上一个例子,我们聚焦如何通过JS SDK和facebook继承unit3D工程。这篇文章继续完善之。

集成第一步:代码

我们再次聚焦通过javaScript脚本和facebook传递数据的流程上,从facebook发起,页面的unit3D处理完毕,再把数据返回给facebook。首先限制了游戏必须鉴权。前面的html文件在加载游戏过程中,结合unity页面需要修改2处。请看如下的JavaScript代码修改。 下面的代码柔和了通过Unity3D页面工程生产的和前面教程的HTML文件,你不需要这个。请通过unity工程新建一个index.html文件,把下面的代码粘贴一下。

—————————-

本章的请看原文,主要是图和代码。    我翻译后排版了几次,效果非常差。

 

[译] Unity3D游戏和facebook绑定(6.1 通过facebook客户端的SDK-JS脚本进行用户认证)

原文链接:Authorising user with Facebook JS SKD  (client-side)

第一次使用JavaScript脚本实现facebook登陆不是很难,下面我们手把手示范一下:

完成你的一个页面游戏

首先你要做的事情是把你的游戏发布到一个URL地址。并确保游戏可以通过互联网访问。

准备本地环境

使用XAMPP或WAMP搭建本地服务器,并测试你的新URL是否可用。

注意:思考你的URL地址远期定位。如果你的游戏URL为这样的www.yourgame.com  ,你或许想同时搭建一个local.yourgame.com作为开发调试环境, 然后,当游戏发布上线后,再通过facebook 应用配置修改新的在线URL地址。我想说的是,这么做没什么不好,只是有点乱:尤其是你频繁的修改、升级、上线。另外一种办法是在facebook里面等级2个URL,一个是开发调试URL部署环境,令一个是上线部署URL环境。 我们下面说,先用本地调试环境测试通过再考虑上线的。

Facebook登陆测试

首先在你游戏的服务器下面创建一个fb-skd-test.html 文件,并粘贴下面代码。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!---- FB CODE ---->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId      : 'YOUR_APP_ID',
status     : true, // check login status
cookie     : true, // enable cookies
xfbml      : false // don't parse XFBML
})

//Get the current login status.
FB.getLoginStatus(function(loginStatusResponse) {
if(loginStatusResponse.authResponse) {
// code (1) if already logged in
} else {
FB.login(function(loginResponse) {
if(loginResponse.authRespsonse) {
// code (2) if logged in ok
}
});
}
});
};

(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<!---- FB CODE END. ---->
</body>
</html>

 

替换“YOUR_APP_ID”为你登记的,可通过你的facebook应用程序配置页面查找。你也可以通过Facebook JavaScript SDK 官方参考页面 获得更详细信息。     这个时候运行,浏览器可能会弹出登陆facebook页面,先点击取消按钮,我们稍后再细说。

用户触发的弹出窗口

在我经验中,当你运行FaceBook代码加载Unity3D游戏,弹出窗口实际上在背景模式下运行,即用户看不到它。当然,这个和浏览器设置有关,很多浏览器阻止了自动弹出页面故而导致这个功能失效。这个当然问题很大,尤其是当玩家想登陆游戏系统开始玩,但是却无法登陆。浏览器这么做无可厚非,但是你应该瞄准你的目标,即你要通过社交范畴,故不用太多关心这个。因为用户通过facebook登陆的一个很重要目的是分享游戏的快感、炫耀游戏的得分情况的,故不得不通过facebook登陆。 如果弹出登陆页面被阻止了,那么这些都做不了。我们先假设用户能够弹出并能登陆。

修改head标签,通过CDN加载JQuery代码,再添加一些样式,代码如下。

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
.hidden { display: none; }
</style>
</head>

 

在body结束标签前,创建一个按钮并添加一个div容器-用于显示一些提示用户的信息。

<input type="button" id="fb-login" class="hidden" value="Log in with Facebook"/>
<div id="fb-user-info" class="hidden">You are logged in as: <span></span></div>

 

添加一些JS函数,并修改FB.getLoginStatus() call. 替换FB.getLoginStatus() 为如下代码

//Get the current login status.
FB.getLoginStatus(function(loginStatusResponse) {
if(loginStatusResponse.authResponse) {
toggleLoginButton(false);
toggleInfoContainer(true);
getUserInfo();
} else {

toggleLoginButton(true);
toggleInfoContainer(false);

$('#fb-login').click(function() {
FB.login(function(loginResponse) {
location.reload(); // reload page when done
});
});

}
});

function toggleLoginButton(visible) {
visible = (visible==true);
$('#fb-login').toggleClass('hidden', !visible);
}

function toggleInfoContainer(visible) {
visible = (visible==true);
$('#fb-user-info').toggleClass('hidden', !visible);
}

// access graph to get user info
function getUserInfo()
{
FB.api('/me', function(meResponse)
{
$('#fb-user-info span').text(meResponse.first_name);
});
}

 

这时,我们可以测试页面了。如果用户第一次访问页面,则会出现“Log in with Facebook”按钮。如果用户已经登陆成功,则显示用户名。点击“log in”按钮,这时弹出窗体,用户可以选择确认、却笑,页面重新加载,会再次检测用户状态。

不弹出窗体验证用户权限

或许有用户对弹出窗体非常反感,下面我们可以试试不弹出的方式。

FB.login(function(loginResponse) {
location.reload(); // reload page when done
});

替换为:

window.location = encodeURI("https://www.facebook.com/dialog/oauth?"
+ "client_id=YOUR_APP_ID"
+ "&redirect_uri=" + encodeURI(location.href)
+ "&response_type=token");

注意,体会你的“YOUR_APP_ID”,测试。(首先在facebook开发者应用程序中心确认APP_ID可用)。

下一章预告:

我们的目标是通过faceBook打通用户之间墙壁,下一章详细介绍如何把facebook API整合到unity3D游戏中去。

[译] Unity3D游戏和facebook绑定(6 通过facebook登录到你的Unity3D游戏系统)

原文链接:Logging user to Unity3d Game with facebook account

有3种通过facebook账号登陆游戏系统的办法,他们之间各有优点、缺点,尤其当把Unit3D添加进来的时候,还稍微有点复杂。 取决于不同的游戏系统实现机制,每种方法之间非常不一样。但是有一个共同点那就是这3个方法都遵从OAuth 2.0协议。你也可以通过FB access token(facebook 访问令牌)来查找具体步骤,下面我们一一阐述说明。

客户端JavaScript SDK方法

这是三个方法中最最简单的。 Unity3D游戏首选这种方法作为在线网页游戏链接facebook,同样的类似Flash也采用了很多类似这样的案例。

client-side-diagram

原生设备登陆facebook

针对原生设备的这种方法,稍微有点复杂; 但如果你有IOS、Android的编程经验,则相对容易。他既然基于各自平台API函数(IOS、Android),采用了OAuth 2.0协议。这种方法对于在移动设备上发布游戏的Unity3D团队来说非常常用、也同样非常重要。

坏消息是Unity3D 4.0版本目前还没有实现这种链接方法。好消息是你能够找到几款第三方插件实现他。虽然这些插件是免费的,但是你也可以再花钱把这些免费的插件扩展的更加商业化,如经过更为高质量的测试验证,这样其他开发者也会从中受益的。

native-diagram

 

服务端登陆facebook

相对前面的方法,第三种方法稍微复杂了一线。你需要编程通过前端、后台协同工作才能完成facebook登陆过程。当然,如果你有前端、后台的编程经验,也许会发现这也不很难。 当然,你也可以直接选择第一种方法作为你在线网页游戏的认证。我的个人建议是使用服务器端坊俺又很多优点。当然或许是我的BevelGames服务器环境的一些限制因素,这个,我在后面再一一阐述。

server-side-diagram

 

上面的3个图片来自Facebook开发中心.

[译] Unity3D游戏和facebook绑定(5.3 在facebook开发者中心登记你的应用程序)

原文链接:Registration of Facebook app

在facebook开发者中心登记你的产品,并授权是非常重要的。同时这个步骤又非常简单。

facebook登记应用程序

导航到developers.facebook.com页面,在菜单栏点击“应用程序”,然后点击“创建新的应用程序”

下一步你需要输入应用程序名称和你的应用程序URL. 你可自己决定使用免费的Heroku主机托管或者是你自己的服务器托管。

应用程序配置

在这一步你需要绝对用户是否能够访问你的游戏。如果你想用户通过facebook账号登陆,选择(1) 通过facebook登陆页面游戏 (2) 把游戏潜入到facebook页面内 (3) 可以动的facebook页面书签应用。 或者你选择手机应用,则选择 (4) 原生的IOS应用 或者 (5) 原生的Android应用 通过facebook发布移动应用程序 或者你可要通过自定义tab页面使用(6) 页面选项构建.

我的目标是创建基于我自己的主机的页面游戏,填写URL地址。I希望玩家能够在facebook上分享心得,所以我选择了1:通过facebook登陆页面游戏。

测试并部署

部署依赖你应用的配置、设备类型、选择的平台。在这给教程中,我们首选聚焦默认的配置项,因此使用了我们自己的服务器去部署应用。无论自己的服务器还是托管的服务器,在上传代码前都应在本地环境下测试通过。如PHP程序我们可以使用apache、NGinx部署,万一远程服务器没有按照XAMPP、WAMPP呢! 理想情况下,你应当在本地测试同,并乐于对远程服务器的任何改变适应。

怎么配置web服务器已经超过本教程范围,网上很很多教程可参考,现在我跳过这些。 万事俱备、只欠东风。下一章开始用facebook账号登陆Unity3D游戏系统吧。

[译] Unity3D游戏和facebook绑定(5.2 申请成为faceBook开发者)

原文链接:Facebook developer registration

注册成为facebook的开发者非常容易。如果如果你还没有注册,那么赶紧注册吧。然后把你的游戏和facebook关联掐里,这样facebok强大的人际交互能力将会增强你的游戏传播的机会。

通过如下步骤注册成功一个facebook开发者:
  1. 登陆你的facebook账号
  2. 导航到这个站址http://developers.facebook.com
  3. 点击“现在注册”按钮
  4. 完成下面3个注册表单
    • 接受facebook服务条款
    • 验证你的账号Verify your account
    • 填写一些其他的信息
  5. 学习、使用、享受其中的乐趣

为什么要注册为facebook的开发者?

如果你还未认识到facebook开发者的注册对你的游戏推广带来的契机,请再回头看看这篇文章:2 游戏和社交媒体(SNS)的深度分析