Nghiên cứu đồ họa 2D, 3D của hệ điều hành Android và viết chương trình minh họa. 3.1 Đồ họa trong Android. 3.1.1 Giới thiệu chung về đồ họa Android. Khi viết một ứng dụng điều quan trọng là bạn phải xác định xem ứng dụng đó sử dụng đồ họa như thế nào. Việc xác định được điều này sẽ giúp cho quá trình viết chương trình được đơn giản và hiệu quả cao. Đồ họa và hình ảnh động cho một ứng dụng tĩnh thì hoàn toàn khác với một ứng dụng Game có các nhân vật chuyển động. Từ những điều đó mà Android cung cấp cho ta nhiều cách để thể hiện đồ họa. Để thể hiện được đồ họa thì Android cung cấp cho chúng ta 2 đối tượng chính: + Canvas. + Drawables Với Canvas ta có thể vẽ bất cứ cái gì lên vùng hiện thị của chúng ta, khi tạo ra Drawables ta có thể tạo các ảnh động dạng frame-by-frame. Ngoài ra Android còn hỗ trợ OpenGL 1.0 và 2.0 để tạo ra đồ họa 3D. Từ Android 3.0 thì phần cứng đã tăng tốc thêm cho phần đồ họa được vẽ bằng API và làm tăng hiệu xuất làm việc của thiết bị. 3.2 Đồ họa 2D trong Android. 3.2.1 Một số thành phần trong đồ họa 2D. Trên Android, để vẽ bất thứ gì ta cần phải có bốn thành phần cơ bản: - Một đối tượng kiểu Bitmap để giữ các pixel cần vẽ. - Một đối tượng chứa nét vẽ cần vẽ ra(Có thể là Rect, Path, Bitmap…). - Một đối tượng kiểu Paint dùng để định nghĩa màu sắc, style… dùng để vẽ ra màn hình. - Một đối tượng Canvas dùng để thực thi lệnh vẽ. Để làm rõ những khái niệm trên ta tiến hành tạo một lớp CustomView cài đặt lại lớp View của Android để định nghĩa một đối tượng đồ họa mới. Trên đối tượng mới định nghĩa này, ta sẽ tự vẽ ra giao diện mà mình mong muốn. Xây dựng lớp CustomView Để tạo một CustomView ta tiến hành tạo một class với nội dung như sau: package gioi.Android; import Android.content.Context; import Android.util.AttributeSet; import Android.view.View; public class CustomView extends View{ public CustomView(Context context){ super(context); } public CustomView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { } } Lớp CustomView sẽ extend class View của Android để kế thừa lại các phương thức cũng như các thuộc tính của lớp View. Trong đó ta sẽ cài đặt lại 02 phương thức khởi tạo cho lớp CustomView và ghi đè phương thức onDraw() của lớp View, đây chính là phương thức sẽ vẽ ra giao diện của CustomView. Với phương thức khởi tạo public CustomView(Context context) chỉ nhận vào một tham số là một đối tượng Context. Đây là đối tượng này cho phép truy xuất đến các đối tượng cũng như các dịch vụ của hệ thống. Đối tượng này cần thiết để vẽ một giao diện ra màn hình thiết bị. Với phương thức khởi tạo thứ hai: public CustomView(Context context, AttributeSet attrs) có nhận vào thêm một tham số là AttributeSet attrs. Đây là đối tượng chứa các thuộc tính của đối tượng đồ họa sẽ được khởi tạo. Việc tạo phương thức khởi tạo thứ hai là cần thiết nếu bạn mong muốn sử dụng đối tượng đồ họa này trong một file giao diện .xml có chỉ định các thuộc tính như ví dụ sau: Cho một file xml có nội dung như sau: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="fill_parent" > <gioi.Android.CustomView Android:id="@+id/graphicView" Android:layout_width="fill_parent" Android:layout_height="fill_parent" /> </LinearLayout> Trong file xml kể trên ta có sử dụng một thẻ có tên niit.Android.CustomView, đây chính là đối tượng đồ họa ta vừa tạo ra ở trên. Trong đó gioi.Android là package của project hiện tại. Thẻ CustomView ở trên có ba thuộc tính là Android:id, Android:layout_width và Android:layout_height. Ta có thể tạo một Activity có nội dung là file xml kể trên: public class main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } Lúc này Android sẽ tự tạo ra đối tượng CustomView và sử dụng phương thức khởi tạo public CustomView(Context context, AttributeSet attrs) để khởi tạo đối tượng với các thuộc tính là Android:id, Android:layout_width và Android:layout_height được truyền vào thông qua đối tượng attrs. Đến đây ta đã tạo xong lớp CustomView, tuy nhiên nếu chạy chương trình ở bước này ta chỉ được một giao diện trống rỗng. Để vẽ giao diện cho CustomView ta sẽ tiến hành cài đặt phương thức onDraw() với nội dung như sau: @Override protected void onDraw(Canvas canvas) { Paint cPaint = new Paint(); cPaint.setColor(Color.RED); Path cPath = new Path(); cPath.addCircle(100, 100, 20, Direction.CW); canvas.drawPath(cPath, cPaint); } Như đã đề cập ở mục trên để vẽ ra màn hình ta tạo một đối tượng Paint được dùng để định nghĩa màu sắc, style… ta cần vẽ ra. Gọi phương thức setColor(…) để gán màu sắc của nét vẽ cần vẽ ra. Sau đó ta tiến hành khai báo một đối tượng Path để chứa các nét vẽ và gọi phương thức addCircle(…) để thêm một nét vẽ hình tròn vào đối tượng cPath. Sau đó gọi canvas.drawPath(cPath,cPaint) để vẽ ra các nét vẽ được chứa trong đối tược cPath với màu sắc được định nghĩa trong đối tượng cPaint. Khi thực thi chương trình ta sẽ được kết quả như sau: Xem hình 10. Như vậy ta đã có lớp Customview, tiếp theo là ta tìm hiểu một số thành phần căn bản của Android. + Đối tượng Paint: Đây là đối tượng quy định cách hiện thị của đối tượng đồ họa. Ví dụ như ta muốn vẽ một đường thẳng có đổ bỏng, vẽ đường tròn với màu tùy chọn. Cách khai báo đối tượng như sau. Paint p = new Paint(); p.setColor(Color.RED); Ở đây ta khái báo biến p thể hiện lớp Paint và ta đặt cho màu của Paint này là màu đỏ. + Đối tượng Color: Color được thể hiện bởi 4 giá trị, đầu tiên là alpha tiếp theo là red, green và blue (ARGB). Mỗi thể hiện gồm 256 giá trị (8 bít) do đó một màu có giá trị cao nhất lên tới 32 bít integer. Với Android thuận tiên hơn khi cho phép chúng ta thể hiện giá trị màu bằng một số nguyên thay vì thể hiện theo cách của lớp Color hay dùng. Cách khai báo đối tượng này như sau. int color = Color.BLACK; Ở đây biến color được gán với màu đen, ngoài ra chúng ta cũng có thể viết theo cách sau int color = 255; hoặc int color = Color.rgb(255, 0, 0); + Đối tượng Canvas: là một lớp quan trọng trong quá trình xây dựng ứng dụng, đặt biệt trong Game. Nếu như lớp Paint cung cấp cho bạn nhưng dụng cụ color, đường nét, độ to nhỏ của nét để vể thì Canvas cung cấp cho bạn các phương thức để vẽ lên những gì bạn muốn, đường thẳng, đường tròn, hình chữ nhật . Ví dụ ta vẽ một chuỗi ký tự như sau: canvas.drawText("Vẽ chuỗi ký tự lên Canvas tại vị trí 30,30 với style là biến p",30,30,p); + Đối tượng Rect: Đây là đối tượng cho ta vẽ lên 1 hình chữ nhật, cách khai báo đối tượng này như sau Rect rect = new Rect(); Ngoài ra Android còn cung cấp rất nhiều các đối tượng khác để vẽ các thành phần khác nhau, như vẽ ảnh, đường thẳng, đường tròn, hình đa giác… 3.2.2 Chương trình minh họa. Để hiểu rõ các đối tượng mà Android cung cấp, ta cùng xây dựng một ví dụ nho nhỏ để thấy được cách thể hiện đồ họa của Android. Chương trình minh họa sẽ thực hiện các chức năng sau. - Vẽ 1 đường thẳng màu đỏ có độ dài 100 picxel. - Vẽ 1 đường tròn có đổ bóng màu vàng. - Vẽ 1 hình chữ nhật có màu xanh nước biển. - Vẽ 1 bức ảnh. Để vẽ được các hình này ta dùng lại lớp CustomView. Đầu tiên ta tạo ra 1 project với tên là TestAndroid2D và đặt tên gói là TestAndroid2D.gioi, tên activity là TestAndroid2Dactivity.java. Ta có lớp TestAndroid2Dactivity.java như sau. package TestAndroid2D.gioi; import Android.app.Activity; import Android.os.Bundle; public class TestAndroid2DActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } Ở lớp này ta có phần setContentView(R.layout.main);, trong layout main thì có khai báo đối tượng Customview của chúng ta. Nội dung file main như sau. <?xml version="1.0" encoding="utf-8"?> <TestAndroid2D.gioi.Customview xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:layout_width="fill_parent" Android:layout_height="fill_parent" Android:orientation="vertical" > </TestAndroid2D.gioi.Customview> Trong file main này ta đã xử dụng lớp Customview, khi chương trình chạy thì nó sẽ hiện thị nội dung có trong file main này. Tiếp theo ta có lớp Customview như sau. package TestAndroid2D.gioi; 1. import Android.content.Context; 2. import Android.graphics.Bitmap; 3. import Android.graphics.BitmapFactory; 4. import Android.graphics.Canvas; 5. import Android.graphics.Color; 6. import Android.graphics.Paint; 7. import Android.graphics.Paint.Style; 8. import Android.graphics.Path; 9. import Android.graphics.Path.Direction; 10. import Android.graphics.Rect; 11. import Android.util.AttributeSet; 12. import Android.view.View; 13. public class Customview extends View{ 14. public Customview(Context context) { 15. super(context); 16. } 17. public Customview(Context context, AttributeSet attrs) { 18. super(context, attrs); 19. } 20. @Override 21. protected void onDraw(Canvas canvas) { 22. Paint p = new Paint(); 23. //Vẽ đường thẳng 24. p.setColor(Color.RED);//Đặt màu vẽ là màu đỏ 25. canvas.drawLine(0, 10, 100, 10, p); 26. //Vẽ đường tròn có đổ bóng màu vàng 27. Path circle = new Path(); 28. circle.addCircle(150,150,100,Direction.CW); 29. p.setColor(Color.YELLOW); 30. p.setShadowLayer(50, 0, +50, Color.YELLOW); 31. p.setStyle(Style.STROKE); 32. canvas.drawPath(circle, p); 33. //Vẽ hình chữ nhật 34. p.setColor(Color.BLUE); 35. Rect r = new Rect(); 36. r.set(200, 200, 50, 30); 37. canvas.drawRect(r, p); 38. //Vẽ 1 bức ảnh 39. p.reset(); 40. Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.bomb); 41. canvas.drawBitmap(bitmap, 20, 300, p); 42. super.onDraw(canvas); 43. } 44. } Để vẽ 1 đối tượng đồ họa trong Android ta cần phải khai báo đối tượng Paint, trong lớp Customview ở dòng 22 chúng ta đã khai bao đối tượng Paint. Để vẽ 1 đường thẳng với màu đỏ ta đặt màu đỏ cho đối tượng Paint với câu lệnh dòng 24. Muốn vẽ 1 đường thẳng ta dùng phương thức drawLine của đối tượng Canvas, với dòng 25 ta sẽ vẽ 1 đường thẳng bắt đầu từ vị trí (0,10) cho đến vị trí kết thúc là (100, 10). Muốn vẽ 1 đường tròn thì ta dùng phương thức drawPath nhưng trước đó ta phải khai báo đối tượng circle, đối tượng này thể hiện 1 đường tròn. Muốn màu đổ bóng là màu vàng cho đặt màu vàng cho biến p tại dòng 29. Như vậy là ta vẽ được đường tròn với đổ bóng màu vàng. Để vẽ hình chữ nhật ta khai báo thêm đối tượng hình chữ nhật, dòng 35 khai báo 1 đối tượng hình chữ nhật, muốn hình chữ nhật có màu xanh ta đặt màu cho biến p là màu BLUE (dòng 34), muốn vẽ hình chữ nhật ta dùng phương thức drawRect. Tiếp theo là vẽ 1 bức ảnh: Muốn vẽ 1 bức anh ta cần khai báo thêm đối tượng Bitmap, đối tượng này tải dữ liệu từ thư mục drawble với đoạn mã dòng 40, muốn vẽ lên màn hình ta dùng phương thức drawBitmap của đối tượng canvas. Cuối cùng ta đã vẽ được 1 số thành phần cơ bản của Android. Kết quả chương trình trên như sau. Xem hình 11. 3.3 Đồ họa 3D trong Android. 3.3.1 Một số thành phần trong đồ họa 3D. Android cung cấp cho ta gói thư viện OpenGL cụ thể ở đây là OpenGL ES API. OpenGL là một nền tảng rất tốt, nó giúp tăng tốc đồ họa 1 cách đáng kể. Ngay từ khi ra đời với phiên bản Android 1.0 thì Android đã hỗ trợ OpenGL 1.0. Đến phiên bản Android 2.2 API 8 thì Android đã hộ trợ thêm OpenGL 2.0, với việc hộ trợ thêm OpenGL 2.0 thì hệ điều hành này ngày càng được mọi người quan tâm hơn. Sau đây là 1 số thành phần đồ họa 3D quan trọng của hệ điều hành này. GLSurfaceView: Đây là nơi bạn có thể vẽ và thao tác đối tượng bằng cách gọi OpenGL API và các nó chức năng giống như một SurfaceView. Bạn có thể sử dụng lớp này bằng cách tạo ra 1 đối tượng thể hiện GLSurfaceView và thêm phần Renderer của bạn vào. Tuy nhiên nếu bạn muốn bắt sự kiện cảm ứng trên màn hình thì bạn phải mở rộng lớp này và cài đặt sự kiến lắng nghe. GLSurfaceView.Renderer: Giao diện này định nghĩa các phương thức được yêu cầu để vẽ các thành phần đồ họa của một đối tượng GLSurfaceView. GLSurfaceView.Renderer yêu cầu cần phải cài đặt các phương thức sau: - onSurfaceCreated() : Phương thức này chỉ được hệ thống gọi 1 lần duy nhất, nó được gọi khi tạo ra GLSurfaceView. Phương thức này thường để thực hiện 1 số cài đặt cần thiết như là cài đặt các thuộc tính khi hiện thị giao diện đồ họa như chiều cao, chiều rộng… - onDrawFrame() : Hệ thống sẽ gọi phương thức này mỗi khi vẽ lại GLSurfaceView. - onSurfaceChanged() : Hệ thống sẽ gọi phương thức này khi GLSurfaceView có sự thay đổi, bao gồm việc thay đổi chiều cao, rộng của màn hình và sự thay đổi về chiều của màn hình (Nằm ngang hay dọc). Một số gói trong thư viện OpenGL:  Gói OpenGL API 1.0: + Android.opengl: Gói này cung cấp các giao diện tĩnh và nó thực hiện tốt hơn gói javax.microedition.khronos.  GLES10  GLES10Ext  GLES11  GLES10Ext + javax.microedition.khronos.opengles : Gói này cung cấp các đối tượng chuẩn của opengl 1.0  GL10  GL10Ext  GL11  GL11Ext  GL11ExtensionPack  OpenGL ES 2.0 API Class + Android.opengl.GLES20: Gói này cung cấp giao diện OpenGL 2.0 và bắt đầu có mặt từ Android 2.2 (API 8). Ngoài các thành phần trên thì Android còn cung cấp rất nhiều các đối tượng khác, để tìm hiểu thêm ta có thể tìm hiểu tại đường dẫn sau: http://developer.Android.com/guide/topics/graphics/opengl.html 3.3.2 Chương trình minh họa. Để hiểu rõ được cách thức hoạt động của các đối tượng đồ họa 3D trong Android ta cùng xét 1 ví dụ đơ giản là hiện thị khung hình và thay đổi màu nền. Đầu tiên ta tạo 1 project với tên là TestAndroid3D. Trong project thì activity chính của chúng ta có tên là TestAndroid3Dactivity.java, tiếp sau đó ta tạo thêm 2 lớp nữa lần lượt là MyGLSurfaceView.java, MyGLSurfaceViewRenderer.java. Nội dung chi tiết các lớp trên là: Lớp TestAndroid3Dactivity.java. package TestAndroid3D.gioi; import Android.app.Activity; import Android.os.Bundle; public class TestAndroid3DActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MyGLSurfaceView myGLSurfaceView = new MyGLSurfaceView(this); setContentView(myGLSurfaceView); } } [...]... thay đổi màu nền theo giá trị mà ta chạm trên màn hình 3.4 Chương trình minh họa 3.4.1 Chương trình chính (2D) 3.4.1.1 Mục đích chính của chương trình minh họa Để có thể hiểu rõ về các thành phần đồ họa của hệ điều hành Android thì chúng ta cùng xây dựng 1 chương trình hoàn chỉnh Chương trình sẽ sử dụng các đối tượng đồ họa 2D của Android 3.4.1.2 Ý tưởng thực hiện Xây dựng Game BomOffline - Ý tưởng:... hiện thị + Chức năng định dạng lại danh sách (xóa dữ liệu cũ) 3.4.1.3 Phân tích chương trình 3.4.1.3.1 Sơ đồ hoạt động của Game 3.4.1.3.2 Xác định actor và mô hình use case 3.4.1.3.2.1 Danh sách Actor STT TÊN ACTOR Ý NGHĨA/GHI CHÚ 1 Người dùng Người sử dụng điện thoại chơi Game 3.4.1.3.2.2 Sơ đồ Use Case Bảng danh sách UseCase STT TÊN USE CASE Ý NGHĨA/GHI CHÚ 1 Bắt đầu chơi Chọn Activity MainGameActivity... tăng thêm số quả bom Hộp quà xuất hiện ngẫu nhiên trên màn hình, mỗi hộp quà thì hiện thị trong thời gian ngẫu nhiên trong khoảng 5 đến 20 giây Khi nhân và quái vật di chuyển thì có một số vùng có các đồ vật thì nhân vật và quái vật sẽ không thể đi qua được và bắt - buộc phải đi vòng qua các vật này Ý tưởng về cách xây dựng các giao diện và chức năng cho người dùng: + Về giao diện sẽ có các giao diện... TMXProperties TMXLayer mTMXProperties= mTMXTile.getTMXTileProperties(mTMXTiledMap); TMXTileProperty mTMXTileProperty = mTMXProperties.get(0); } return true; }catch(Exception e){ return false; } } Ví dụ minh họa thuật toán: Giả sử ta có một map như sau Xem hình 24 Với đối tượng TMXTiledMap thì lưu trữ toàn bộ các hình ảnh để tạo ra map và đối tượng này cũng chứa luôn cả đối tượng TMXLayer Đối tượng TMXLayer... bình thường thì kết quả cho thấy sự va chạm là không chính xác, để va xác định va chạm 1 cách chính xác hơn thì ta cần phải tính toán lại chiều cao và chiều rộng của AnimatedSprite để so sánh Ví dụ minh họa: Giả sử ta có 1 AnimatedSprite với chiều cao và chiều rộng như hình vẽ sau Kích thước của AnimatedSprite này là 32x32 Nhưng nhân vật nằm trong hình chữ nhật này lại nhỏ hơn nhiều so với hình chữ nhật . Nghiên cứu đồ họa 2D, 3D của hệ điều hành Android và viết chương trình minh họa. 3.1 Đồ họa trong Android. 3.1.1 Giới thiệu chung về đồ họa Android ra đồ họa 3D. Từ Android 3.0 thì phần cứng đã tăng tốc thêm cho phần đồ họa được vẽ bằng API và làm tăng hiệu xuất làm việc của thiết bị. 3.2 Đồ họa 2D