Dual-screen gaming on Microsoft Surface Duo

Nguyen Thanh Tung

Today’s post was contributed by Gameloft, publishers of Asphalt 9: Legends, Modern Combat 5, and Dungeon Hunter 5.

Hello Android developers!

It was great that we had a chance to work with Surface Duo and adapt three of our most popular games: Asphalt 9: Legends, Modern Combat 5 and Dungeon Hunter 5, for this awesome device. Surface Duo and Surface Duo 2 have two screens, which allows users to view images or watch videos on one screen while doing their tasks on the other screen. It enhances the user experience with all of that extra wide space, especially while playing games. Double screens – double fun! This Surface Duo feature was the reason why we were really eager and excited to bring our games to the device.

The player can also have an improved visual experience with the game without getting jumbled with the virtual button as it is placed separately. Traditionally, touch-screen based games have the player’s fingers on the screen covering up the visuals – with this second screen, we are able to offer a cleaner option, especially in our more visually intensive games. The player can also decide what is the best strategy for tinkering with dual screen capabilities as well, like having additional statistical info for better calculation, seeing a bird-eye map for additional perspectives, or simply offering more viewing options. The options are flexible and robust.

In order to bring the best playing experience to users, we focused on how to split the game into two screens, especially on re-designing the UI/UX for each screen. We separated control to different screens so users can focus on what they see in-game on the second screen. For example, now you can race on one screen and follow the mini-map on the other screen, leaving more space to enjoy the beautiful cars and tracks in Asphalt 9: Legends.

UI design should combine the requirements of supporting dual screens while ergonomically fitting with the user hand position and eye level, not distracting the gaming experience, making sure these changes can be feasible to be applied, and making sure it meets the quality standards that Surface Duo 2 consumers expect.

We also implemented a span mode for alternatives if users want to play the game in a “book-like” form. By offering the possibility, it’s up to users’ preferences to play in their favorite mode. This also highlights how versatile the device’s capabilities are.

Here is a snippet of code applied to handle those postures:

void UpdateScreens() 
{
   int desiredScreenMode = UNDEFINED_MODE; 
   Rect hinge = getHinge(this); 
   boolean isSpanned = isAppSpanned(this); 
   int rotation = getCurrentRotation(this); 
   boolean isPortrait = rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180; 
   boolean isLandscape = rotation == Surface.ROTATION_90 || rotation == 
Surface.ROTATION_270; // check for single portrait
 
   if(!isSpanned && isPortrait)
   { 
      desiredScreenMode = SINGLE_PORTRAIT_MODE; 
   } 
   else if (!isSpanned && isLandscape)
   {
      desiredScreenMode = SINGLE_LANDSCAPE_MODE; 
   } 
  else if (isSpanned && isPortrait) 
   { 
      desiredScreenMode = SPANNED_LANDSCAPE_MODE;
   }
      else if (isSpanned && isLandscape) 
   { 
      desiredScreenMode = SPLITTED_MODE;
   }
 
   if(m_currentScreenMode == UNDEFINED_MODE || m_currentScreenMode != desiredScreenMode)
   { 
      m_currentScreenMode = desiredScreenMode;
   } 
   else 
   { 
      return;
   } 
 
   m_singleLandscapeLayout.setVisibility(View.GONE); 
   m_doubleLandscapeView.setVisibility(View.GONE); 
   m_singlePortraitView.setVisibility(View.GONE); m_singleLandscapeLayout.removeAllViews(); 
   m_topScreenLayout.removeAllViews(); m_bottomScreenLayout.removeAllViews(); 
   m_doublePortraitView.removeAllViews();
 
   if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED) 
   { 
      setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED); 
   } 
 
   if (m_currentScreenMode == SINGLE_PORTRAIT_MODE)
   {
     //m_singlePortraitView.setVisibility(View.VISIBLE); //Game don't support portrait screen, show landscape view with normal game instead 
      m_singleLandscapeLayout.setVisibility(View.VISIBLE); 
      m_singleLandscapeLayout.addView(m_SurfaceView);
   }
   else if (m_currentScreenMode == SINGLE_LANDSCAPE_MODE)
   { 
      // single screen landscape -> normal game 
      m_singleLandscapeLayout.setVisibility(View.VISIBLE); 
      m_singleLandscapeLayout.addView(m_SurfaceView);
   } 
   else if (m_currentScreenMode == SPANNED_LANDSCAPE_MODE)
   { 
      // SPANNED landscape - normal game m_doublePortraitView.setVisibility(View.VISIBLE); 
      m_doublePortraitView.addView(m_SurfaceView);
   } 
   else if (m_currentScreenMode == SPLITTED_MODE) 
   { 
      // SPLIT mode m_singleLandscapeLayout.removeAllViews(); 
      m_bottomScreenLayout.removeAllViews(); m_bottomScreenLayout.addView(m_SurfaceView);
      m_extraSurfaceView = new SurfaceView(this); m_topScreenLayout.removeAllViews(); 
      m_topScreenLayout.addView(m_extraSurfaceView); 
      setLayoutHeight(m_topScreenLayout,hinge.top); 
      setLayoutHeight(m_bottomScreenLayout,hinge.top); setLayoutHeight(m_hingeSpace,hinge.bottom-hinge.top); 
      m_doubleLandscapeView.setVisibility(View.VISIBLE);
   }
   hideSystemUI();
}

As for the Android manifest, we needed to add these lines:

android:resizeableActivity="true"
android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"

For further explanation you can read this blog post: https://devblogs.microsoft.com/surface-duo/orientation-spanning-and-insets/

Having more space for entertainment is always a luxury. By maximizing the potential of a dual-screen, we can create a completely different experience for users. Dual-screens are a versatile feature that needs to be utilized. What we have done for our games is just one way to use the dual-screen, but there are still many ways to do it differently, as it affords a broader array of applications and creativity.

Players can download Asphalt 9: Legends, Modern Combat 5 and Dungeon Hunter 5 from the Google Play Store:

• Asphalt 9: Legends
• Modern Combat 5
• Dungeon Hunter 5

Feedback

The Surface Duo Developer Experience team would love to hear from you and how you plan to incorporate dual-screen enhancements into your apps and games. Please reach to out using the feedback forum or message @surfaceduodev on Twitter.

Nguyen Thanh Tung Senior Programmer, Gameloft SAI Studio

Follow