Windows 8 game development tutorial-1. Metro UI and drawing

After thinking carefully, it seems inappropriate to call the tutorial. It should be regarded as a discussion.

Windows 8 has been around for a while and I believe everyone is familiar with Metro UI.

The introduction of Metro UI can be easily introduced.

 

The first is the layout method, which adopts the XAML layout. Although the appearance looks simple, it is a style inherited from Zune and WP7.

There is no window concept, instead of page. The next layer is controls. container controls can be placed with child controls.

Determines the Positioning Method of the stator control based on the characteristics of the Container Control.

There are several common container controls: grid, border, and canvas.

Canvas is firmly positioned by pixel from the upper left corner.

Grid is divided into several row and column areas. Sub-controls are arranged, and then you can select the direction and offset, which is very similar to the HTML Positioning method.

The border sub-control is automatically filled.

Common function controls

Textblock label control to display text

Textbox text editing box

Image Control

Button

 

Controls can specify attributes and events

The one for WPF/Silverlight is described in Metro UI.

UseProgramIt is started with application. Run, so you don't have to worry about how to call it. You can also rewrite the main function.

When a C # Black page project is created, it is automatically created, and a loaded event is added to mainpage to start write initialization.Code.

 

XNa has not been provided for plotting in Windows 8. Let's take a look at the wide use of winmd. We don't have to wait for xNa. Let's get it by ourselves.

Windows 8 provides the DX example, but it is written in C ++. The execution efficiency of C ++ is high, and the development efficiency is very distressing. So we need to adjust the drawing interface back to C.

The DX example given by Windows 8 works under the coreapplication framework, and The XAML cannot be used. The UI and Shenma methods all have to be drawn using dx.

I don't like this method. I really want to use the XAML game interface, so we have to find a way to avoid giving up the interface and use dx.

 

So we did.

Use C ++ as an encapsulation and encapsulate it in the winmd format. Let's take a look at the example (SVN address discovery)

Win8clgc = crazylights graphics core

Graphics core, Basic Drawing Method. Let's get a 2D one first. I didn't plan to run DX naked in 3D. Let's look back and see if there is any open-source engine with a small amount of code.

If you only need a Win8 usable, C # callable, and high-performance drawing function, just familiarize yourself with the clgc interface.

Some D2d and dwrite functions have been encapsulated.

SVN address

Win8clgf = crazylights graphics framework

Graph framework. Currently, only one interface is implemented to copy the content of rendertarget to the image control.

In the future, some interface systems, 2D scenarios, and genie systems will be lost here.

 

Only three steps are required.

1. Reference win8clgc. winmd

2. initialize clgc. We recommend that you add a loaded event to mainpage for initialization.

3. Write the logic. If update is required, we recommend that you use dispatchertimer, because the image control can be updated only on the main thread. Even if the new thread is updated, the number of frames is still limited by the main thread.

As long as copyimage is used, the drawn content is displayed in the image control. The copyimage implementation is very simple. You can also include the copy function in your project without referencing clgf, bytes is returned by rendertarget in some hidden code.

 

Current render Interface

We can see that two sets of drawbitmap and drawtext interfaces are provided. If you are interested, you can test it yourself.

 

Test procedure

The green background area is drawn in real time.