使用 Unity 和 C# 開發您的第一款遊戲(MSDN文章)

2014年8月出刊的 MSDN Magazine 開始了一系列講解如何以 Unity 及 C# 開發遊戲的文章,作者是微軟總部的資深技術傳道士 Adam Tuiliper。第一些文章如下,對 Unity 的使用有非常精采、由淺入深的介紹,對於已熟悉 C# 並有志於遊戲開發的人來說相當實用:

原文: Developing Your First Game with Unity and C#

中譯版本: 使用 Unity 和 C# 開發您的第一款遊戲(MSDN轉譯) (出處: Unity Taiwan)

移植 Cocos2d-x 遊戲至 Windows Store 及 Windows Phone

除了 Unity 之外,Cocos2d-x 是另一個台灣遊戲開發者很常使用的 2D 遊戲引擎,Cocos2d-x 在 Windows 及 Windows Phone APIs 的支援上與 iOS 及 Android 完全相同,也就是要將 Cocos2d-x 所製作的遊戲移植至 Windows 平台並不困難,順利的話一個遊戲約數個小時即可移植成功。

簡單來說是以下 6 個步驟:

  1. Create a Cocos2d-x project using project creator tool.
  2. Create Windows 8 and Windows Phone projects in Visual Studio.
  3. Copy the source code consisting of C++ and header files to the project Classes directory. Add these files to your project in Visual Studio
  4. Copy resources to the project Resources directory.
  5. Modify a couple of project settings necessary for compilation.
  6. For Windows Phone, convert any MP3 files to WAV files. Similarly, for Windows Phone replace fonts that are not supported by Windows Phone or update the code to use fonts available on the platform.

你需要:

1. Windows 8.1 (64 bit) 評估版: http://technet.microsoft.com/zh-tw/evalcenter/hh699156.aspx 

2. Visual Studio Express 2013:http://www.microsoft.com/en-us/download/details.aspx?id=43729

3. 註冊 Windows 市集以上架: http://blogs.msdn.com/b/mengtsai/archive/2014/09/23/windows-2014-09.aspx

以下段落完全轉貼自Porting Cocos2D-x Games to Windows Store and Windows Phone,文章中詳細說明了環境需求、移植步驟、小技巧及故障排除等資訊給各位參考:

source: Porting Cocos2D-x Games to Windows Store and Windows Phone

Setup your Development Environment

Before we begin, let us set up Visual Studio for developing the game. We will use Visual Studio Express editions for porting the game. Visual Studio Express editions are free to download and is a great way to begin developing for Windows 8 and Windows Phone. Visual Studio comparison guide can help if you are considering another edition for your project.

Download Visual Studio Express 2013 for Windows and Visual Studio Express 2012 for Windows Phone from Visual Studio Express site. The pre-requisites for Visual Studio Express 2013 include Windows 8.1. For Windows Phone emulation to work on the PC, you need Windows 8 Pro with a processor with SLAT support. If you are running Windows 8, you can upgrade to Windows 8.1 for free from the Windows Store. The Visual Studio express editions can be installed side by side with other versions of Visual Studio. Look at the pre-requisites carefully before installing these tools.

The installation for Visual Studio is quite simple. When you run Visual Studio for the first time, it will prompt you to obtain a developer license. You need to get a developer license for each machine on which you want to run the app.

Download Cocos2d-x Distribution

You should clone Cocos2d-x distribution on your development machine. Use the following commands to do so:

C:>git clone https://github.com/cocos2d/cocos2d-x.git
C:>cd cocos2d-x
C:cocos2d-x>git checkout master
C:cocos2d-x>git submodule init
C:cocos2d-x>git submodule update

After these commands have completed, you will have a clone of Cocos2d-x master branch on your desktop.

If you using Github application on your Windows machine, visit http://github.com/cocos2d/cocos2d-x. Click Clone in Desktop.

image

Download the Sample Application

Download or clone the sample Cocos2d-x C++ application from https://github.com/iTyran/SK_Parkour. You can use command line git commands or the Github application to do so.

C:temp>git clone https://github.com/itran/sk_parkour

Porting the Application
Create a new Cocos2d-x Project

Before we begin porting the application, we need to create a Cocos2d-x project. Cocos2d-x comes with a project creation tool. You will need Python to run the project creation tool. Install python from http://www.python.org if needed.

C:cocos2d-x>cd toolsproject-creator
C:cocos2d-xtoolsproject-creator>python create_project.py -project parkour -package com.mycompany.parkour -language cpp

proj.ios                : Done!
proj.android            : Done!
proj.win32              : Done!
proj.winrt              : Done!
proj.wp8                : Done!
proj.mac                : Done!
proj.blackberry         : Done!
proj.linux              : Done!
proj.marmalade          : Done!
proj.tizen              : Done!
proj.wp8-xaml           : Done!
New project has been created in this path: C:cocos2d-xtoolsproject-creator/..
/../projects/parkour
Have Fun!

This creates a skeleton project structure that can be used for developing multi-platform applications. The directories for the project are organized as follows:

C:cocos2d-x>cd toolsprojectsparkour
C:cocos2d-xprojectsparkour>dir

Directory of C:cocos2d-xprojectsparkour

03/24/2014  01:55 PM    <DIR>          .
03/24/2014  01:55 PM    <DIR>          ..
03/24/2014  01:55 PM    <DIR>          Classes
03/24/2014  01:55 PM    <DIR>          proj.android
03/24/2014  01:55 PM    <DIR>          proj.blackberry
03/24/2014  02:47 PM    <DIR>          proj.ios
03/24/2014  01:55 PM    <DIR>          proj.linux
03/24/2014  02:47 PM    <DIR>          proj.mac
03/24/2014  02:47 PM    <DIR>          proj.marmalade
03/24/2014  01:55 PM    <DIR>          proj.tizen
03/24/2014  02:47 PM    <DIR>          proj.win32
03/24/2014  02:47 PM    <DIR>          proj.winrt
03/24/2014  02:47 PM    <DIR>          proj.wp8
03/24/2014  02:47 PM    <DIR>          proj.wp8-xaml
03/24/2014  01:55 PM    <DIR>          Resources

Apart from various platform specific directories, the two directories of interest are Classes and Resources. From their names it is clear that Classes should hold our game classes and resources should hold various game resources such as images, audio files and fonts.

In fact, the project creator tool populates the classes with “Hello World”, a very simple game that we can compile and run as is. Start Visual Studio Express 2013 for Windows and click File -> Open project.. and navigate to c:cocos2d-xprojectsparkourproj.winrt and select parkour_2013.sln Microsoft Visual Studio Solution file.

clip_image004[4]

After Visual Studio has opened the project, click the Local Machine button with the green triangle or Debug > Start Debugging (or Start Without Debugging).

clip_image006[4]

After Visual Studio builds the files that are out of date, you should have the application running in Windows 8 mode.

clip_image008[4]

Modify Target Application

Now that we are able to run simple application on Windows 8, we are ready to port our target application.

Copy project class files to Classes directory

We will copy classes from the directory in which we downloaded SK_Parkour application to the newly created Parkour Classes directory.

C:cocos2d-x>cd toolsprojectsparkour>
C:cocos2d-x>cd toolsprojectsparkour>xcopy tempsk_parkourclasses
C:cocos2d-xprojectsparkour>xcopy C:tempSK_ParkourprojectsParkourCPPClasses Classes /Y /s
C:tempSK_ParkourprojectsParkourCPPClassesAppDelegate.cpp
C:tempSK_ParkourprojectsParkourCPPClassesAppDelegate.h
C:tempSK_ParkourprojectsParkourCPPClassesAppMacros.h”

26 File(s) copied

Copy Resources to Resources Directory

We will copy resources from SK_Parkour Resources subdirectory to the newly created Parkour Resources directory.
C:cocos2d-xprojectsparkour>xcopy C:tempSK_ParkourprojectsParkourCPPResources Resources /Y /s
C:tempSK_ParkourprojectsParkourCPPResourcesbackground.mp3
C:tempSK_ParkourprojectsParkourCPPResourcescrouch.mp3
C:tempSK_ParkourprojectsParkourCPPResourcesjump.mp3

26 File(s) copied

Add Source Code to the Visual Studio Project

We will add newly copied C++ files from Classes directory to the project. In Visual Studio, right click on Classes folder and then click Add > Existing Item..

clip_image010[4]

Select all cpp and h files from c:cocos2d-xprojectsparkourClasses and click Add.

clip_image012[4]

Execute the application by selecting Debug > Run.

clip_image014[4]

Porting the Game to Windows Phone

Now that we have ported the game to Windows 8, let us see what it takes to port the game to Windows Phone.

Start Visual Studio Express 2012 for Windows Phone and open parkour.sln, the Visual Studio solution file contained in c:Cocos2d-xprojectsparkourproj.wp8-xaml. Do not use proj.wp8 project which is being deprecated.

Apart from various library projects such as CocosDenshion, libChipmunk, there are two application related projects, namely, parkour and parkourComponent. The former is a C# project which is used to provide the primary application framework. The latter is a C++ project and includes the application files.

Add all sources to the C++ project. Right click on the Classes folder in the parkourComponent project. Click Add followed by Existing Item. Navigate to c:cocos2d-xprojectsparkourclasses directory, select all CPP and h files and click OK.

We have already copied all resource files to c:cocos2d-xprojectsparkourresources directory. Otherwise, you will need to remember to copy resources from the original application to the resources directory.

Audio file support on Windows Phone

There are two changes needed to make the application run on Windows Phone. Windows Phone only supports WAV audio files and not the MP3 files which are used in this application. We need to add corresponding WAV files for Windows phone project.

You can use a free, open-source software like Audacity to convert the MP3 files to WAV files. A number of online solutions also provide audio format conversion. Convert the original MP3 filea and add the converted WAV files to Resources directory at c:cocos2d-xprojectsparkourresources.

Cocos2d-x for Windows Phone is designed to not load .MP3 files but instead load corresponding .WAV files. For example, if it encounters a command to load or play “jump.mp3”, it will look for “jump.wav” file and load it instead. This will allow you to port the application without making any changes.

Alternately, you can modify the code so that it uses WAV files on Windows Phone app. For example, in MainScene.cpp, use the following code so that it uses WAV files on Windows Phone whereas MP3 files on other platforms.

#if CC_TARGET_PLATFORM == CC_PLATFORM_WP8

audioEngine->preloadBackgroundMusic("background.wav");

audioEngine->preloadEffect("jump.wav");

audioEngine->preloadEffect("crouch.wav");

audioEngine->preloadEffect("pickup_coin.wav");

#else

audioEngine->preloadBackgroundMusic("background.mp3");

audioEngine->preloadEffect("jump.mp3");

audioEngine->preloadEffect("crouch.mp3");

audioEngine->preloadEffect("pickup_coin.mp3");

#endif

Similarly, modify the code in runner.cpp, playscene.cpp files to use WAV files.

#if CC_TARGET_PLATFORM == CC_PLATFORM_WP8

audioEngine->playBackgroundMusic("jump.wav", true);

#else

audioEngine->playBackgroundMusic("jump.mp3", true);

#endif

Font support on Windows Phone

The application uses Helvetica true type font. However, Helvetica is not among the fonts supported on Windows Phone. A font that is not available on the system must be included in the assembly as a resource. As a result, you can add necessary font, as a ttf file, to Resourcesfonts directory or use a different font available on Windows Phone. For this project, we will use Arial font for our Windows Phone project.

Modify the code in the following way to use Arial font on Windows Phone 8 whereas Helvetica on other platforms. Make similar changes in StatusLayer.cpp, CCLabelTTF.cpp, and CCControlButton.cpp.

#if CC_TARGET_PLATFORM == CC_PLATFORM_WP8

    this->labelCoin = CCLabelTTF::create("Coins:0", "Arial", 25);

#else

    this->labelCoin = CCLabelTTF::create("Coins:0", "Helvetica", 25);

#endif

Once you have completed these code changes, click Debug > Run without Debugging to run the application in the Windows Phone emulator.

clip_image016[4]

Tips, Tricks and Troubleshooting
  1. Where do I add my game logic in the Windows Phone project? (or How is the Windows Phone solution organized? )
    The Windows Phone Cocos2d-x solution created by the project creator tool includes two different projects – a C# project and a C++ project. For a project called ‘mygame’, the Windows Phone creates two different projects in the Visual Studio solution named ‘mygame’. It includes a C# project called ‘mygame’ and a C++ project called ‘mygameComponent’. The C# project provides the basic application framework whereas the game logic is part of the C++ project. In most situation, you will not need to modify the C# project. Make sure that you include your C++ code in ‘mygameComponent’.
  2. How do I include custom/third party DLLs used in my game?
    Windows Phone applications are built for both the development environment (Win32/x86) as well as the real physical devices running on ARM. As such, custom/third party DLLs are needed for both Win32/x86 and ARM environments. Additionally, they need to be available in both Debug and Release environments. Four different version of custom/ third party DLLs need to be included with the application. These DLLs should be marked as ‘Content’ so that they are bundled in the application package.
    What is the exact way to accomplish this? Do you include 4 different versions?
  3. Are there any limits on the size of the app on Windows Phone? (or How to reduce the size of Windows Phone app?)
    Windows Phone imposes a default memory limit on an app based on the type of app and the memory size of the device. Be aware that on low memory devices, the default memory limit for the app is 150 MB and as such, Windows Phone app should minimize its memory usage where possible. Since .wav audio files are bigger than their corresponding MP3 files, be judicious of the sampling rate and stereo/mono when converting MP3 files to WAV files.You can also manage the amount of texture memory used by the application. Debug build of Windows Phone shows the amount of texture memory being used. You can use this information to tweak the memory usage of your application.You can selectively turn off of features of your app for lower memory devices or you can choose to opt out of availability for lower memory devices.
  4. Developing on Mac using Fusion/Parallel/Bootcamp.
    Look at
    http://blogs.msdn.com/b/interoperability/archive/2012/12/21/how-to-develop-for-windows-phone-8-on-your-mac.aspx on how to develop Windows Phone apps on Mac for details
  5. Developing Windows Phone application using Visual Studio 2013 or Visual Studio 2013 Express. While Visual Studio 2012 Express for Windows Phone includes the Windows Phone SDK, you can install Windows Phone 8 SDK separately and use Visual Studio 2013. See https://dev.windowsphone.com/en-us/downloadsdk for instructions.
  6. I have installed Visual Studio but I am not able to open the Windows Phone project.
    If you are seeing an error opening Visual Studio solution file in WP8-xaml directory make sure that you have installed Windows Phone SDK. Windows Phone 8 SDK can be installed from
    https://dev.windowsphone.com/en-us/downloadsdk.Alternately, install and use Visual Studio 2012 Express for Windows Phone for developing Windows Phone game.
  7. I have set breakpoints in my C++ code but the app never stops at those breakpoints during while debugging.
    Cocos2d-x Windows Phone solution consists of a C# project and C++ project of which the C# project is the startup project. In order to debug the C++ code, you will need to enable debugging native code. To enable debugging C++ code, right click the C# project and select properties. In Debug tab, select ‘Native only’ in ‘UI Task’ drop down for Debugger Type.
  8. I believe I have some issues with platform specific parts of my app. The game works alright on iOS and Android but not only Windows Phone.
    If you have any platform specific code in your game, make sure that you handle Windows Phone and Windows 8 properly. Platform specific code is often enclosed using #ifdef that checks for iOS and Android. You will need to enclose Windows Phone and Windows 8 platform specific code using #ifCC_TARGET_PLATFORM == CC_PLATFORM_WP8 for WP8 and #ifCC_TARGET_PLATFORM == CC_PLATFORM_WINRTfor Windows 8.
  9. How do I add my resources if my project structure is non-standard? Visual Studio uses MSBuild for building the application. The MSBuild task included with the Windows Phone project looks for resources in the global resources directory and recursively copies them in the .xap file, i.e. the application package. If your game resources are kept in a different directory or organized differently, you will need to modify the MSBuild task. From Visual Studio, unload the C# project, edit .vcproj file to modify the following MSBuild task.

    <ItemGroup>

    <ContentInclude="……Resources***">

    <Link>AssetsResources%(RecursiveDir)%(FileName)%(Extension)</Link>

    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>

    </Content>

    </ItemGroup>

  10. My app does not use TTF fonts. What can I do?
    Windows Phone only supports TTF fonts. Consider using TTF fonts for Windows using platform specific code for WP8 and WinRT.
  11. How do I test my app on Windows Phone device?
    You should deploy and test your app on a real phone before you submit the app to the Windows Phone store.
    To deploy the app on a real phone, you must be a registered developer. See
    Windows Phone developer registration.
    Once you have tested your app in the emulator, it is time to deploy the application on a real phone. Before you deploy your application to a real phone, you need to register your phone for development. Please follow instructions specified on
    this web page.The next step is to deploy the app to a Windows Phone device. Follow instructions on this web page.
  12. My application runs in the emulator but not on a real Windows Phone device.
    1. Missing V11 folder. Uninstall everything and install the recommended config.
    2. Follow troubleshooter specified on this web page.
Summary

In this article, we saw how incredibly easy it is to port a Cocos2d-x app written in C++ to Windows 8 and Windows Phone. MSOpenTech, a Microsoft subsidiary focused on interoperability with Open Source software, has done most of the heavy lifting. The Cocos2d-x on Windows 8 and Windows phone provide identical APIs making it easy to port the applications.

The steps involved

  1. Create a Cocos2d-x project using project creator tool.
  2. Create Windows 8 and Windows Phone projects in Visual Studio.
  3. Copy the source code consisting of C++ and header files to the project Classes directory. Add these files to your project in Visual Studio
  4. Copy resources to the project Resources directory.
  5. Modify a couple of project settings necessary for compilation.
  6. For Windows Phone, convert any MP3 files to WAV files. Similarly, for Windows Phone replace fonts that are not supported by Windows Phone or update the code to use fonts available on the platform.
    If you have already written a multi-platform game, you are likely to haven completed a few of these steps already. If you are planning to develop a multi-platform game, you can take care of some of these steps in the beginning to open up a huge new market of Windows 8 devices and Windows Phones with very little extra effort.

C# 6.0 預覽 (preview in Roslyn)

微軟在今年4月的 //BUILD 大會中宣佈了 Roslyn 這個計畫,其中對 .NET 開發者最大的意義,不僅在於開放了 .NET Compiler 的原始碼,同時還能參與下一代 .NET 語言的改進;也就是說,也許各位的建議及貢獻能成為下一版本的 .NET 的一部份!

Rosly 網址: http://roslyn.codeplex.com/

隨著計劃的進行,下一版本的 .NET 規格也進入倒數,以下影片簡單展示在 C# 6.0 中的 Primary Constructor, Getter-only auto properties, Method expressions 及 Property expressions:

C#6.0 預覽: Primary Constructor, Getter-only auto properties, Method expressions and Property expressions.

各位可以在 Roslyn 中直接觀察下一代 C#/VB 的實作狀況 (as of 2014/09/11): http://roslyn.codeplex.com/wikipage?title=Language%20Feature%20Status&referringTitle=Home 

Feature Example C# VB
Primary constructors class Point(int x, int y) { … } Done Maybe
Auto-property initializers public int X { get; set; } = x; Done Exists
Getter-only auto-properties public int Y { get; } = y; Done Done
Using static members using System.Console; … Write(4); Done Exists
Dictionary initializer new JObject { ["x"] = 3, ["y"] = 7 } Done Planned
Indexed member initializer new JObject { $x = 3, $y = 7 } Withdrawn Planned
Indexed member access c.$name = c.$first + " " + c.$last; Withdrawn Exists
Declaration expressions int.TryParse(s, out var x); Done Maybe
Await in catch/finally try … catch { await … } finally { await … } Done Planned
Exception filters catch(E e) if (e.Count > 5) { … } Done Exists
Typecase Select Case o : Case s As String : … No Maybe
Guarded cases Select Case i : Case Is > 0 When i Mod 2 = 0 No Maybe
Partial modules Partial Module M1 N/A Done
Partial interfaces Partial Interface I1 Exists Done
Multiline string literals "Hello<newline>World" Exists Done
Year-first date literals Dim d = #2014-04-03# N/A Done
Binary literals 0b00000100 Planned Planned
Digit separators 0xEF_FF_00_A0 Planned Planned
Line continuation comments Dim addrs = From c in Customers ‘ comment N/A Done
TypeOf IsNot If TypeOf x IsNot Customer Then … N/A Done
Expression-bodied members public double Dist => Sqrt(X * X + Y * Y); Planned No
Event initializers new Customer { Notify += MyHandler }; Planned Planned
Null propagation customer?.Orders?[5]?.$price Done Planned
Semicolon operator (var x = Foo(); Write(x); x * x) Maybe Maybe
Private protected private protected string GetId() { … } Withdrawn Withdrawn
Params IEnumerable int Avg(params IEnumerable<int> numbers) { … } Planned Planned
Constructor Inference new Tuple(3, "three", true); Maybe Maybe
String interpolation "{p.First} {p.Last} is {p.Age} years old." Maybe Maybe
TryCast for nullable Dim x = TryCast(u, Integer?) Exists Planned
Delegate combination with + d1 += d2 Exists Planned
Implicit implementation Class C : Implicitly Implements I Exists Planned
nameof operator string s = nameof(Console.Write); Exists Planned
Strict modules Strict Module M Exists Planned
Faster CInt Dim x = CInt(Math.Truncate(d)) | Exists Planned
#pragma #Disable Warning BC40008 Exists Planned
Checked and Unchecked blocks Checked : x += 1 : End Checked Exists Maybe
Field targets on autoprops <Field: Serializable> Property p As Integer Planned Planned
If(b,e1,e2) uses type context Dim x As Integer? = If(b,1,Nothing) N/A Maybe

 

由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

WAT (Web App Template) 是微軟所開發,專門設計將既有的網站轉成 App 的免費 Visual Studio 擴充元件,此前的文章已有簡介: WAT- 將既有網站快速轉為 Windows 8.1 App 或 Windows Phone App 的免費工具。上個月也剛推出了 Universal Apps v2.0 的版本 (http://wat.codeplex.com/)。

WAT 的目標定義明確,即是要讓企業能完全延用在既有網站上的投資、同時還能以直覺簡易的 config 方式讓 App 實作出平台功能 (如 Windows Live Tile、App Bar 等)、而且無需每次網站改版即需重新編譯。

WAT-ill.png

WAT 實作

在 Visual Studio 2013 中開啟 Web App Template for Universal Apps- JavaScript 範本

image

可以看到此方案已預設包含 Windows 8.1 及 Windows Phone 8.1 的 Universal Apps 專案

image

要快速將 Web 轉為 App,需要 config 的地方只有一個,就是 Shared 中的 config.json 檔。

image

將其中的 homeURL 改為 Bill Gates 的網址 (http://www.gatesnotes.com/) 之後,同時以 Windows Phone 及 Windows 8.1 模擬器執行的畫面如下,可見到已符合 Responsive Web Design (RWD) 規範的網站轉為 App 之後,即能因應不同尺寸螢幕大小作適當的版面配置:

image

透過 config.json 客製化 App

所有 App 功能面的實作,全部是透過修改這個 config.json 檔來完成的,包含最重要的無網際網路時的離線 Offline 支援、給定 RSS Feed 即能達到 Live Tile 的效果、給定 Search URL 即實作出 Search Charm Bar、給定外部連結即可實作 App Bar 及 Navigation Bar 等等。

完整的說明文件可見: http://wat-docs.azurewebsites.net/JsonWindows

目前能透過 config 方式即能實現的 App 功能如以下,未來能實現的功能還會不斷增加。

image

除了功能面外,WAT 也提供了讓您修改 CSS 檔以改變 App 呈現時的版型 (但不影響原有網站的版型)

image

實際案例

有愈來愈多的國外網站在維護網站的同時、經由 WAT 建置 App 以因應行動化的需求,除了前文中介紹的 Low’sZoopla Property 之外,我們再以著名旅遊規劃網站 Expedia.com 為例。

以下可看到其網站及在 Windows Phone App 上各自的呈現:

image 

1 of 3 2 of 3 3 of 3

回饋及討論

利用 WAT 將既有網站轉為 App 的過程可說是最簡單的,config 的方式易於操作、維護及偵錯門檻也低。

但最最重要的一點是,網站作了任何更新或變動,其 App 即能立即反應最新的內容;也就是企業本來即正常運行的網站維運流程幾乎不用作調整,在最大化既有投資的同時還能以 App 打開另一個市場。

當然,為了因應各種不同尺寸的行動裝置,亦強烈建議採行此方法的網站符合 Responsive Web Design (RWD) 的設計準則,以達到最好的使用者經驗。

WAT 的未來

微軟設計 WAT 的原始精神是將 Web Experience 作最佳化的運用,短期目標即是讓各客戶能延用在人力、技術及維護上的既有投資、同時能滿足市場行動化的需求;長遠而言微軟會在 Web Experience 上作更進一步的投資!

image

由 Web 到 App 之路小結

image

簡單來說,無論是否要走向 App 化,建議各網站可先行實作「釘選」的功能,畢竟簡單又容易測試。

往 App 發展之路,若跨平台是現階段的急迫性需求,可走 Apache Cordova 的方式,但其客製化及維運成本就相對高些;若無跨平台的急迫需求,建議可先走 WAT 的方式,對未來整體維運考量上應能達到最好的 ROI 成效。

延伸閱讀:

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

由 Web 到 App 之路 (二): 使用 Apache Cordova (PhoneGap)

由 Web 到 App 之路 (二): 使用 Apache Cordova (PhoneGap)

看看自己及周遭,App 世代早已經造成使用者習慣的改變:

image

當然也有統計數據告訴我們這件事實,例如:若觀察使用者每日花在 Web 及 App 上的時間,可以看到在2011年即已發生死亡交叉,而且差距只有逐年愈拉愈大。(2012年底的數據: Web : App = 70 mins: 127 mins)

image

http://gigaom.com/2012/12/05/us-spends-35-percent-more-time-using-apps-in-2012-while-web-usage-drops/

使用 Cordova (PhoneGap)

Apache Cordova (也就是市場上熟知的 PhoneGap 引擎) 已在今年 5 月即與 Visual Studio 整合了,可參見 Eric 的文章: 跨行動裝置 App 開發: 使用 Visual Studio 2013 + Apache Cordova (PhoneGap)而在日前釋出 Visual Studio Update 3 RTM,也同時釋出了 Multi-Device Hybrid Apps CTP 2.0 的版本。

Cordova 與 Visual Studio 整合的意義就是,您可以在 Visual Studio 使用 HTML/JavaScript 技術來開發橫跨 Windows、iOS 及 Android 的 App;不僅如此,您既有的網站也能輕易透過 Cordova 產出跨平台的 App。

以下範例我選擇以 Bill Gate’s 的個人網站 http://www.gatesnotes.com (一個顯然我沒有 source code 的網站) 為例。

首先將完整網頁儲存至本機:

image

在 Visual Studio 中打開 Blank App (Apache Cordova)-JavaScript 範本

image

將剛存檔的 Bill Gates 網站檔案 (Home  Bill Gates_com-.htm)及資料夾(Home  Bill Gates_com-_files)拉入專案中

image

打開 index.xml 檔並將 Start Page 改為 “Home  Bill Gates_com-.htm"

image

然後按 F5 執行,預設會以 Ripple Emulator 在 Google Chrome 瀏覽器中模擬於不同載具執行的情形。

由於此網站本身已符合 Responsive Web Design (RWD 響應式網頁設計),各位可以在選擇以不同載具之後,看到 App 自動因應螢幕尺寸大小所作的改變。

選擇 iPhone 5:

image

選擇 Nexus 7 (Tablet):

image

Cordova 在市場存在已久,已有許多 platform-specific features 及 plugins 可使用,可以針對 Windows、iOS 或 Android 的平台作客製化

image

完整的Config、測試、上架等文件可見: http://msdn.microsoft.com/en-us/library/dn757051.aspx,也有活躍的論壇可供發問及討論: http://stackoverflow.com/questions/tagged/multi-device-hybrid-apps

回饋及討論

Cordova 的精神即在於一次製作出橫跨 Windows、iOS 及 Android 上的原生 App,無論您的網站是以何種技術開發 (ASP.NET, JSP, etc.),透過 Cordova 整合的難度都被大幅降低。

考慮到維運成本,相較於外包或自組團隊從頭撰寫 App,使用 Cordova 的客製化及維運成本自然是較小的。但是,需要多作的事情還是至少有兩件,其一是將每次改版後的網站內容整合拉進 Cordova 後進行測試、其二是針對各平台的客製化(例如 Windows 平台的 Live Tile等)。

當然為了因應各種不同尺寸的行動裝置,強烈建議採行此方法的網站符合 Responsive Web Design (RWD) 的設計準則,以達到最好的使用者經驗。

延伸閱讀:

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

現況:

– 我已有一個運作良好的網站

挑戰:

– 如何因應現今行動裝置大普及,以及方興未艾的 App 需求?

以上是現在絕大部份的企業所面臨的難題:決策者在延用既有的投資(如:網站維護人力及技術)的同時,又要因應來自市場上行動化趨勢所帶來的改變。面對以上的難題,有哪些作法可以供決策者作參考? 從 Web 到 App 之路有哪些選擇呢?

首先我們來看一個典型的網站維運架構: 如下圖,開發團隊使用設計工具(如: Sublime) 編修網頁 (Application UI)、使用習慣的程式碼控制工具 (如: GitHub)、並使用熟悉的開發框架 (如: Node.js)及網站伺服器 (如: Azure Web sites)來作日常網站的維護及修改。

image

釘選網站 Pinned Site

既有的網站要因應現實中的行動化趨勢,最簡單的作法就是提供使用者「釘選」的功能了。

image

以 iOS 而言,要加入如以下的程式碼:

<link href="touch-icon-iphone.png" rel="apple-touch-icon">
<link href="img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76×76">
<link href="img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120×120">
<link href="img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152×152">

而針對 Windows 平台,也是插入類似的程式碼,不過您可以利用以下的網站直接幫您產出,還能同時達到動態磚 (Live Tile) 的效果:

http://www.buildmypinnedsite.com/

簡單的三步驟,即可產出程式碼供您使用:

步驟1: 設定 Tile 的文字、背景顏色及圖片

image

步驟2: 設定 Live Tile (RSS Feed)

image 

步驟3: 程式碼就自動產生了.同時也提供連同圖片一起打包好的 package 讓您一次上傳至網站根目錄。

image

回饋及討論

「釘選網站」最大的優勢就是簡單,同時又不會影響到開發團隊維運既有網站的方式。

但由於執行起來還是傳統的網頁,當然無法善用裝置端的特性(如所在位置、照相功能等),也無法處理無網路時的離線情境,因此我們發現不論是在 iOS 或 Windows 平台,無論是被「釘選」的網站數量或是會使用「釘選」網站的使用者人數都是不多的。

延伸閱讀:

由 Web 到 App 之路 (二): 使用 Apache Cordova (PhoneGap)

由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

UnityVS (Visual Studio Tools for Unity) 免費下載

目前許多的 Unity 開發者是採用內建的 MonoDevelop 來編寫程式,但其實有很多開發者比較習慣用 Visual Studio 來當作編輯環境,UnityVS 即由此而生,透過 UnityVS 你就可以用 Visual Studio 來當作Unity的編譯環境。

微軟於 2014/07 宣布收購 SyntaxTree,也就是開發 UnityVS 的公司的同時,亦宣佈將進一步優化後讓開發者免費下載,並更名為 Visual Studio Tools for Unity。目前的版本為 v1.9,重要的更新如以下:

  • Faster debugger. Attaching and detaching the debugger as well as expanding local variables is now faster.
  • Faster startup. Opening VSTU projects is now faster.
  • Better handling of C# constructs. The local variables window is now properly populated when debugging iterators or when variables are accessed inside closures.
  • Start your game and your debugging session in one click. This feature is one of our most-requested: you can now attach the debugger and start the game by simply changing the debug target. This is only available in Visual Studio 2012 and 2013.

目前提供三種不同版本的 Visual Studio add-ons 讓開發者免費下載:

進一步說明請見: http://blogs.msdn.com/b/visualstudio/archive/2014/07/29/visual-studio-tools-for-unity-1-9.aspx

Visual Studio Tools for Unity 1.9