马宁的嵌入式开发研究

Windows Phone, XNA, Windows Embedded, Windows Mobile
posts - 84, comments - 752, trackbacks - 17, articles - 0

导航

公告

OpenXLive支持 Windows Phone上的SNS 分享

Posted on 2012-07-19 09:50 马宁 阅读(...) 评论(...) 编辑 收藏

作者:马宁

OpenXLive SDK 0.9.9下载地址:

http://developer.openxlive.net/sdk/download/

 

现在,很多休闲游戏都支持用户将游戏的精彩画面分享到社交网络中,这已经成为了最吸引用户的新功能。但是开发者如果想实现这个功能,就必须在游戏中内置不同社交网络的SDK,还要通过漫长的审核过程,这对于很多开发者来说,都是不堪重负的。

所以,OpenXLiveSDK 0.9.9.0版提供了SNS分享的功能,无需在软件中内置各种各样的社交网络SDK,而且可以在不修改客户端的情况下,增加新的SNS分享功能。

目前,我们在全球支持Facebook和Twitter分享,在中国支持新浪微博分享,后续还会陆续加入对于人人网和腾讯QQ的支持。

1   2

本文将介绍如何使用这一功能,并提供相应的示例代码。

OpenXLive所有的示例代码可以在OpenXLive SDK安装目录下的.\Sample文件夹下找到(默认应该在C:\Program Files (x86)\Fulcrum Mobile Networks Inc\OpenXLiveSDK\Sample)。有关本主题的完整示例代码在该文件夹下的SNS.zip文件中,你需要先将其解压,然后再用Visual Studio 2010打开。

3

该示例包含了在Silverlight和XNA下的详细实现步骤。

1. 架构介绍

我们首先来看一下,OpenXLive SNS分享的技术架构:客户端只需要嵌入OpenXLive SDK 0.9.9或以上版本,就可以实现SNS分享功能了,无需嵌入每一种需要支持的SNS SDK。用户需要分享的内容会首先发送到OpenXLive的服务器中,然后由OpenXLive服务器进行分发,最后显示在SNS中。需要注意的是,受到SNS网站策略限制。每条分享内容不能同时出现在多个SNS中。

这样的好处是,当OpenXLive增加新的SNS时,无需修改客户端的代码。OpenXLive SNS分享的技术架构,如图:

4

OpenXLive SNS分享功能的操作步骤,大致分为下列几步:

1. 客户端向OpenXLive服务器请求目前可以支持的SNS列表;

2. 客户端向OpenXLive服务器发送分享内容,并指定发送到哪个SNS中;

3. OpenXLive服务器首先将内容存储到OpenXLive Cloud中;

4. 然后通过分发服务,将分享内容发送到指定的SNS中。

为了实现OpenXLive SNS分享功能时,需要用户首先使用SNS帐号登录,或者使用OpenXLive帐号登录,然后绑定SNS帐号。如果您使用了Facebook帐号登录,也可以绑定Twitter帐号,然后直接在Twitter中发送分享内容。

在实际开发中,开发者需要实现下面的功能:

1. 实现屏幕截图;

2. 让用户预览发布的图片;

3. 让用户能够编辑自己的心得;

4. 让用户选择发布到哪个SNS中。

我们并未提供标准的SNS分享界面,只是在示例代码中实现了一个例子。这是因为,开发者需要实现与自己游戏风格一致的分享界面,可以直接调用API来实现这个界面,而不需要使用标准的SNS分享界面。

接下来,我们来看一下,如果实现SNS分享功能,需要哪些步骤来完成。流程图如下所示:

5

1. 首先在游戏界面中实现截图功能,一般是在界面上有一个拍照按钮,用户可以点击该按钮实现截图功能;

2. 进入分享界面,将现在可供分享的SNS类别列在界面上;

3. 如果用户选择了一个SNS分享游戏内容,则判断该用户是否已经与该SNS建立了连接;

4. 如果用户选择的SNS未与当前用户建立连接,则弹出SNS连接界面,允许用户连接该SNS帐号;

5. 如果用户连接SNS帐号成功,则向服务器端提交分享内容。

对于开发者来说,这里有两个类需要着重介绍一下:SNSProvider和SNSContract。SNSProvider代表的是可供分享的SNS类型,包括了名称、图标和链接等信息;而SNSContract则代表了用户与SNS之间的连接关系。

我们可以通过XLiveGameManager.CurrentSession.SNSProviders属性,来获取当前有效的SNS列表;也可以通过MyPlayer.SNSContracts属性来获取当前玩家绑定的所有SNS;也可以通过MyPlayer. GetSNSContract方法,根据SNSProvider来获取对应的SNSContract,如果该用户未绑定SNS,则返回为空。

6

好了,到这里,我们就将SNS分享的原理和技术架构介绍完了。接下来,我们来介绍,如果实现一个完整的SNS分享游戏,包括Silverlight和XNA两个版本。

2. 在Silverlight游戏中实现分享功能

打开Visual Studio 2010 ,新建一个OpenXLive Silverlight Game with Startup UI项目,项目名称输入OpenXLiveSilverlight,点击Ok,在选择显示语言对话框中,选择默认显示语言,点击OK。

7

首先你需要在App.cs中填入正确的Application Secret Key。

#error Please full your game Secret Key in below code

private string APISecretKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";

然后注释掉#error那行代码,此时程序将能够正常编译。[MN1] [MN2]

获取Secret Key的方法,请参考《在开发者网站上创建OpenXLive游戏》,链接如下:

http://wiki.openxlive.net/Tutorial-4-Create-OpenXLive-Game-in-website.ashx

有关如何将OpenXLive的服务,加入到您已有的游戏中去,请参考:

OpenXLive Silverlight 入门

OpenXLive XNA 入门

2.1实现游戏界面与截图

接下来我们需要实现游戏界面,在后边会对游戏界面进行截屏,并且将截屏图片发送到SNS社交网络中。请注意,游戏界面是由开发者自己实现的,请根据自己的具体需求来实现游戏界面。

首先要添加几张图片,右键项目 选择 Add -> Existing item…,找到示例代码中的OpenXLiveSilverlight文件夹下的Capture.png、GameBackPortrait.jpg、UpdateBackPortrait.jpg点击Ok。当然,你也可以使用自己的图片,并在后面的代码中将图片名称改为自己的图片。

8

由于本次示例我们使用了ListPicker控件,所以需要先添加Microsoft.Phone.Controls.Toolkit.dll引用。

接着我们添加一个SNS分享页面,右键项目 选择 Add -> New item…,选择Windows Phone Portrait Page,命名为UpdateStatusPage.xaml

接下来,我们要实现游戏界面和屏幕截图功能。首先我们要为游戏界面提供一个截屏按钮和相应的提示。打开MainPage.xaml,在适当的位置添加如下代码:

<Grid x:Name="CapGrid">

<Grid.Background>

<ImageBrush ImageSource="/OpenXLiveSilverlight;component/GameBackPortrait.jpg" />

</Grid.Background>

</Grid>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Width="100" Margin="0,0,0,0" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Click="button1_Click">

<Button.Template>

<ControlTemplate>

<Grid Background="Transparent">

<Image Source="/OpenXLiveSilverlight;component/Capture.png" />

</Grid>

</ControlTemplate>

</Button.Template>

</Button>

<TextBlock Text="Click to capture and share" FontSize="20" Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,100,0,0"/>

</Grid>

所谓CapGrid,就是我们截图的Grid区域,而ContentPanel则是用于放置截图按钮的Grid区域。

如果想查看完整的示例代码,请直接访问OpenXLiveSNS工程。MainPage界面如下:

9

左上角为截图的Button按钮,玩家点击该按钮进行截图,并导航至UpdateStatusPage页面。

然后,打开MainPage.xaml.cs代码文件,实现具体的截屏功能。

// 捕捉屏幕截图

private void button1_Click(object sender, RoutedEventArgs e)

{

if (XLiveGameManager.CurrentSession != null &&

XLiveGameManager.CurrentSession.SNSProviders.Count > 0) // Must exist available provider

{

WriteableBitmap wb = new WriteableBitmap(CapGrid, null);

MemoryStream ms = new MemoryStream();

wb.SaveJpeg(ms, (int)CapGrid.ActualWidth, (int)CapGrid.ActualHeight, 0, 70);

ms.Seek(0, SeekOrigin.Begin);

byte[] pic = new byte[ms.Length];

int count = ms.Read(pic, 0, pic.Length);

ms.Close();

UpdateStatus(pic);

}

}

在这部分代码中,我们使用了WriteableBitmap对象,从CapGrid中获取了需要截取的图像。然后,调用SaveJpeg将其保存到一个MemoryStream对象中,最后转存到一个byte数组中。

请注意:if语句用来判断当前是否有可用的SNSProvider ,只有存在SNSProvider时才能进行SNS分享,所以这个判断是必须的。

然后,我们需要调用UpdateStatus方法,将刚刚捕获的图像,传递给UpdateStatusPage页面,并导航到该页面,进行SNS分享。

// 分析屏幕截图

private void UpdateStatus(byte[] picture)

{

if (XLiveGameManager.CurrentSession != null)

{

UpdateStatusPage.SharingPicture = picture;

this.NavigationService.Navigate(new Uri("/OpenXLiveSilverlight;component/UpdateStatusPage.xaml", UriKind.Relative));

}

}

到这一步MainPage中的功能就实现完毕。接下来需要完成分享页面并实现相应逻辑。

2.2实现分享界面

在分享页面中我们需要一个Image控件用于显示当前分享的图片的缩略图,一个TextBox用于输入分享的文本内容,一个ListPicker控件用于用户选择要分享到哪个SNSProvider。

打开UpdateStatusPage.xaml文件,添加如下代码,完整代码请查看工程:

<toolkit:ListPicker x:Name="lisPickerSNS" Grid.Row="3"

Header="Share"

FullModeHeader="Share"

ItemTemplate="{StaticResource SNSItemTemplate}"

FullModeItemTemplate="{StaticResource SNSItemFullModeTemplate}" ExpansionMode="FullScreenOnly">

</toolkit:ListPicker>

此时的分享界面应该如下图所示:

10

打开UpdateStatusPage.xaml.cs文件,首先在文件顶部添加如下引用:

usi