question

Zaug-0766 avatar image
0 Votes"
Zaug-0766 asked Zaug-0766 commented

2d camera in c# wpf

I know it's not the right choice, but I'm trying to make a game engine in wpf.
and naturally this game engine should have a 2d camera.
Does anyone know how to do this?
I will move it with the right and left arrow keys

dotnet-csharpwindows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered Zaug-0766 commented

Here is an example of how to use ScrollViewer to keep it in the field of view of the "camera". You could try to refer to it
The code of xaml:

 <Window x:Class="_2dCameraDemo.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:_2dCameraDemo"
         mc:Ignorable="d"
         Title="MainWindow"
         Loaded="Window_Loaded"
         SizeToContent="WidthAndHeight"
         PreviewKeyDown="Window_PreviewKeyDown">
     <Grid>
         <ScrollViewer x:Name="CanvasViewer"   HorizontalScrollBarVisibility="Hidden"  VerticalScrollBarVisibility="Hidden">
             <Canvas x:Name="Canvas"  IsHitTestVisible="False" >
                 <Canvas.Background>
                     <ImageBrush ImageSource="11.jpg"/>
                 </Canvas.Background>
             </Canvas>
         </ScrollViewer>
     </Grid>
 </Window>

The code of xaml.cs:

 public partial class MainWindow : Window
   {
     double _playerSize;
    
     Rectangle _playerRect;
     Vector _playerPosition;
    
     public MainWindow()
     {
       InitializeComponent();
     }
     private void Window_Loaded(object sender, RoutedEventArgs e)
     {
       InitializeSizes();
       InitializePlayerRect();
     }
     private void InitializeSizes()
     {
       _playerSize = 30;
       Canvas.Width = 700;
       Canvas.Height = 700;
    
       CanvasViewer.Width = 400;
       CanvasViewer.Height = 400;
     }
     private void InitializePlayerRect()
     {
       _playerRect = new Rectangle
       {
         Fill = Brushes.LightPink,
         Width = _playerSize,
         Height = _playerSize,
         HorizontalAlignment = HorizontalAlignment.Left,
         VerticalAlignment = VerticalAlignment.Top
       };
    
       Canvas.Children.Add(_playerRect);
     }
     private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
     {
       switch (e.Key)
       {
         case Key.Left: MovePlayerLeft(); break;
         case Key.Up: MovePlayerUp(); break;
         case Key.Right: MovePlayerRight(); break;
         case Key.Down: MovePlayerDown(); break;
       }
     }
     private void MovePlayerLeft()
     {
       var newX = _playerPosition.X - _playerSize;
       _playerPosition.X = Math.Max(0, newX);
       UpdatePlayerPositionAndCamera();
     }
    
     private void MovePlayerUp()
     {
       var newY = _playerPosition.Y - _playerSize;
       _playerPosition.Y = Math.Max(0, newY);
       UpdatePlayerPositionAndCamera();
     }
    
     private void MovePlayerRight()
     {
       var newX = _playerPosition.X + _playerSize;
       _playerPosition.X = Math.Min(Canvas.Width - _playerSize, newX);
       UpdatePlayerPositionAndCamera();
     }
     private void MovePlayerDown()
     {
       var newY = _playerPosition.Y + _playerSize;
      _playerPosition.Y = Math.Min(Canvas.Height - _playerSize, newY);
       UpdatePlayerPositionAndCamera();
     }
     private void UpdatePlayerPositionAndCamera()
     {
       UpdatePlayerPosition();
       UpdateCamera();
     }
     private void UpdatePlayerPosition()
     {
       _playerRect.Margin = new Thickness(_playerPosition.X, _playerPosition.Y, 0, 0);
     }
     private void UpdateCamera()
     {
       var offsetX = _playerPosition.X / 2;
       var offsetY = _playerPosition.Y / 2;
       CanvasViewer.ScrollToHorizontalOffset(offsetX);
       CanvasViewer.ScrollToVerticalOffset(offsetY);
     }
   }

The picture of result:

126622-3.gif


If the response is helpful, please click "Accept Answer" and upvote it.
 Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 


3.gif (1.2 MiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

sry for wrong writing but i want to make zoom objects, sry again :((

0 Votes 0 ·

You could refer to the following code. And you can also refer to the solution here.
The code of xaml:

 <Grid>
         <Border  Name="border">
             <Image Name="image" Source="11.jpg" Opacity="1" RenderTransformOrigin="0.5,0.5"  />
         </Border>
 </Grid>

The code of xaml.cs:

 public partial class MainWindow : Window
   {
     private Point origin;
     private Point start;
     public MainWindow()
     {
       InitializeComponent();
       TransformGroup group = new TransformGroup();
       ScaleTransform xform = new ScaleTransform();
       group.Children.Add(xform);
       TranslateTransform tt = new TranslateTransform();
       group.Children.Add(tt);
       image.RenderTransform = group;
       image.MouseWheel += image_MouseWheel;
       image.MouseLeftButtonDown += image_MouseLeftButtonDown;
       image.MouseLeftButtonUp += image_MouseLeftButtonUp;
       image.MouseMove += image_MouseMove;
     } 
     private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
     {
       image.ReleaseMouseCapture();
     }
 }
0 Votes 0 ·

The following methods should also be added to MainWindow.(The word limit, I divided it into two posts)

 private void image_MouseMove(object sender, MouseEventArgs e)
     {
       if (!image.IsMouseCaptured) return;
       var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr => tr is TranslateTransform);
       Vector v = start - e.GetPosition(border);
       tt.X = origin.X - v.X;
       tt.Y = origin.Y - v.Y;
     }
     private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
     {
       image.CaptureMouse();
       var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr => tr is TranslateTransform);
       start = e.GetPosition(border);
       origin = new Point(tt.X, tt.Y);
     }
     private void image_MouseWheel(object sender, MouseWheelEventArgs e)
     {
       TransformGroup transformGroup = (TransformGroup)image.RenderTransform;
       ScaleTransform transform = (ScaleTransform)transformGroup.Children[0];
       double zoom = e.Delta > 0 ? .2 : -.2;
       if (!(e.Delta > 0) && (transform.ScaleX < .4 || transform.ScaleY < .4))
         return;
       transform.ScaleX += zoom;
       transform.ScaleY += zoom;
     }

The picture of result:![126968-8.gif][1]


0 Votes 0 ·
8.gif (2.3 MiB)
Show more comments