Tương tác cảm ứng trong phát triển trò chơi cho Windows Phone 7 Phần 1 Khái niệm cơ bản về tương tác cảm ứng

Trang Cập Nhật :
Ngày tạo trang :

Bắt đầu với Windows Phone 7

Nền tảng ứng dụng Windows Phone 7

Môi trường phát triển Windows Phone 7 được chính thức phát hành vào tháng 2010 năm 7 và điện thoại thông minh thực sự chạy Windows Phone XNUMX đã bắt đầu tung ra thị trường.

図 1 :HTC から販売されている Windows Phone 7 を搭載した「HTC 7 Trophy」
Hình 1: HTC 7 Trophy với Windows Phone 7 được bán bởi HTC

Khi bạn tạo một ứng dụng chạy trên Windows Phone 7, bạn có thể chọn giữa "Silverlight" và "XNA Framework" làm khung chương trình. Nói chung, bạn sẽ sử dụng "XNA Framework" để phát triển trò chơi và "Silverlight" cho các ứng dụng khác như công cụ.

Phần này sử dụng XNA Framework để phát triển trò chơi và giải thích cách sử dụng bảng điều khiển cảm ứng, đây sẽ là giao diện người dùng được sử dụng nhiều nhất cho Windows Phone 7. Cách sử dụng đơn giản được mô tả trong trợ giúp XNA Game Studio, vì vậy tôi muốn giải thích nó theo cách sâu hơn một chút ở đây.

Chuẩn bị môi trường phát triển của bạn

Phần này là từ quan điểm của một người thậm chí đã chạm nhẹ vào XNA Game Studio, vì vậy tôi sẽ bỏ qua các hướng dẫn chi tiết như cài đặt và thiết lập. Có rất nhiều thông tin trong phần trợ giúp đi kèm với XNA Game Studio và trên web, vì vậy hãy tự mình kiểm tra. Tôi cũng có một số trên trang web của mình (http://sorceryforce.com/xna/).

図 2 :Microsoft Visual Studio 2010 Express for Windows Phone(Windows Phone Developer Tools に含まれます)
Hình 2: Microsoft Visual Studio 2010 Express dành cho Windows Phone (bao gồm trong Công cụ dành cho nhà phát triển Windows Phone)

図 3 :Windows Phone エミュレーター
Hình 3: Trình giả lập Windows Phone

Chương trình! - 1. Nhận thông tin cảm ứng

Về mẫu này

Phiên bản XNA Framework được sử dụng trong Windows Phone 7 là "4.0", nhưng cho đến lúc đó không có lớp học nào cho bảng cảm ứng và bàn phím, chuột và gamepad là chủ đạo. Kể từ phiên bản 4.0, Windows Phone 7 đã được hỗ trợ và một lớp mới dành riêng cho bảng điều khiển cảm ứng đã được thêm vào.

Trong bài viết này, chúng tôi sẽ chủ yếu giải thích lớp đó, nhưng trên thực tế, nếu bạn muốn có được thông tin vị trí cảm ứng đơn giản, bạn có thể thay thế một lớp khác mà không cần sử dụng lớp cho bảng cảm ứng. Đó là lớp "Chuột". Trong ví dụ này, chúng ta sẽ sử dụng lớp Mouse để lấy thông tin cảm ứng.

Mục tiêu của chương trình mẫu này

Khi bạn chạm vào màn hình, hình ảnh (sprite) được đặt theo vị trí cảm ứng.

図 3,4 :タッチした位置にスプライトが表示される 図 3,4 :タッチした位置にスプライトが表示される
Hình 3,4: Sprites xuất hiện ở các vị trí chạm vào

Chương trình - Khai báo các trường

Tôi muốn giải thích nó cùng với chương trình mẫu ngay lập tức. Giải thích về các phần không liên quan trực tiếp đến hoạt động cảm ứng và các chương trình được tạo từ đầu sẽ bị bỏ qua, vì vậy vui lòng tham khảo mã nguồn được phân phối riêng.

public class Game1 : Microsoft.Xna.Framework.Game
{
  GraphicsDeviceManager graphics;
  SpriteBatch spriteBatch;

  /// <summary>
  /// テクスチャー
  /// </summary>
  Texture2D texture;

  /// <summary>
  /// タッチしている位置
  /// </summary>
  Vector2 touchPosition;

  public Game1()
  {

Trường khai báo một kết cấu để vẽ tại vị trí cảm ứng và một biến cấu trúc Vector2 để lưu trữ vị trí cảm ứng.

Chương trình - Tải kết cấu

Kết cấu đã được thêm vào dự án nội dung và được tải bằng phương thức LoadContent. Vì nội dung không liên quan trực tiếp đến bảng cảm ứng, nên các giải thích chi tiết sẽ bị bỏ qua.

図 6 :コンテンツプロジェクトに「Texture.png」を追加しておく
Hình 6: Thêm họa tiết.png vào dự án nội dung của bạn

図 7 :今回サンプルで使用する画像
Hình 7: Hình ảnh được sử dụng trong mẫu này

protected override void LoadContent()
{
  // 新規の SpriteBatch を作成します。これはテクスチャーの描画に使用できます。
  spriteBatch = new SpriteBatch(GraphicsDevice);

  // テクスチャーをコンテンツパイプラインから読み込む
  texture = Content.Load<Texture2D>("Texture");
}

Chương trình - Touch Information Acquisition

Thông tin cảm ứng được truy xuất trong phương thức Game.Update.

Tôi nhận được thông tin cảm ứng bằng cách sử dụng lớp "Chuột" thay vì từ một lớp học chuyên dụng. Khi sử dụng phương pháp "Mouse.GetState", trạng thái chuột hiện tại được trả về trong cấu trúc "MouseState", vì vậy bạn có thể nhận được vị trí cảm ứng từ các thuộc tính "MouseState.X" và "MouseState.Y".

protected override void Update(GameTime gameTime)
{
  // ゲームの終了条件をチェックします。
  if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    this.Exit();

  // マウスの状態を取得(ここではタッチパネルの簡易的な情報)
  MouseState mouseState = Mouse.GetState();

  // タッチしている位置を設定
  touchPosition = new Vector2(mouseState.X, mouseState.Y);
  base.Update(gameTime);
}

Một điều cần lưu ý về việc sử dụng lớp Mouse để lấy thông tin cảm ứng là nó chỉ trả về thông tin đơn giản. Các hạn chế duy nhất đối với thông tin có thể có được khi sử dụng lớp Chuột là "chỉ chạm một lần", "vị trí cảm ứng (thuộc tính MouseState.X, MouseState.Y)" và "có nên chạm hay không (MouseState.LeftButton)". Nó không hỗ trợ đa chạm hoặc cử chỉ. Ngoài ra, nếu bạn nhận được một vị trí khi bạn chưa chạm vào nó, nó sẽ tiếp tục trả về vị trí chạm trước đó. Vì thông tin đầu vào không thể nhận được trừ khi nó được chạm vào, thông tin vị trí không thể có được như di chuột qua chuột.

Chương trình - Vẽ họa tiết

protected override void Draw(GameTime gameTime)
{
  GraphicsDevice.Clear(Color.CornflowerBlue);

  // スプライトの描画準備
  spriteBatch.Begin();

  // タッチしている位置にテクスチャーを描画
  spriteBatch.Draw(texture, touchPosition, Color.White);

  // スプライトの一括描画
  spriteBatch.End();

  base.Draw(gameTime);
}

Tóm tắt mẫu này

Vì lớp Chuột thay thế việc thu thập thông tin cảm ứng, thông tin chỉ có thể thu được bằng cách có được vị trí cảm ứng như trong mẫu này. Ngược lại, nếu bạn sử dụng lớp học chỉ chạm, bạn có thể nhận thêm thông tin.

Do đó, không phải là không có giá trị để có được thông tin cảm ứng bằng cách sử dụng lớp Chuột. Sử dụng lớp Chuột mang lại những lợi ích sau:

  • Có thể chia sẻ mã với các trò chơi hỗ trợ chuột chạy trên Windows
  • Thông tin vị trí cảm ứng có thể được viết với số lượng mã ít nhất
  • Xử lý không cần thiết có thể được bỏ qua

Nếu bạn chỉ sử dụng định vị chạm một lần và chỉ chạm, bạn có thể tận dụng các lợi ích trên bằng cách sử dụng lớp Chuột.