{"id":736,"date":"2013-12-02T21:10:41","date_gmt":"2013-12-02T20:10:41","guid":{"rendered":"http:\/\/labalec.fr\/erwan\/?p=736"},"modified":"2013-12-02T21:11:13","modified_gmt":"2013-12-02T20:11:13","slug":"vb-net-and-xna-article-17-a-simple-2d-camera","status":"publish","type":"post","link":"https:\/\/labalec.fr\/erwan\/?p=736","title":{"rendered":"VB.Net and XNA : Article 20 – A simple 2D camera"},"content":{"rendered":"

In Article 16<\/a>, we had animated a sprite.
\nNow lets enhance the demo with a 2d camera following our character creating a simple scrolling effect.
\nNote : a next article will cover parallax scrolling.<\/p>\n

We will simply had a camera class.
\nLets declare our camera,
\nthen instantiate it in loadcontent passing the width and height,
\n
\ncam = New camera(graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height)
\n<\/code>
\nupdate it,
\n
\ncam.setfocalpoint(New Vector2(dest_box.X, dest_box.Y), New Vector2(graphics.PreferredBackBufferWidth * 1.5 + 32, graphics.PreferredBackBufferHeight * 1.5 + 32))
\ncam.update()
\n<\/code>
\nand finally use it in our draw method thru a parameter in the spritebatch.begin method
\n
\nspriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, Nothing, Nothing, Nothing, Nothing, cam.viewmatrix)
\n<\/code><\/p>\n

The camera class is itself extremely simple (note that we will manage zoom and rotation also later)
\n
\nImports Microsoft.Xna.Framework
\nPublic Class camera
\n Public position As Vector2
\n Public viewmatrix As Matrix
\n Dim _screenx As Integer
\n Dim _screeny As Integer
\n Public Sub New(SizeX As Integer, sizeY As Integer)
\n _screenx = SizeX
\n _screeny = sizeY
\n End Sub<\/p>\n

Public Sub setfocalpoint(focalposition As Vector2)
\n position = New Vector2(focalposition.X - _screenx \/ 2, focalposition.Y - _screeny \/ 2)
\n If position.X < 0 Then position.X = 0\n If position.Y < 0 Then position.Y = 0\n End Sub\n\n Public Sub setfocalpoint(ByVal focalposition As Vector2, ByVal lock As Vector2)\n If focalposition.X > lock.X Then focalposition.X = lock.X
\n If focalposition.Y > lock.Y Then focalposition.Y = lock.Y<\/p>\n

position = New Vector2(focalposition.X - _screenx \/ 2, focalposition.Y - _screeny \/ 2)<\/p>\n

If position.X < 0 Then position.X = 0\n If position.Y < 0 Then position.Y = 0\n End Sub\n\n Public Sub update()\n viewmatrix = Matrix.CreateTranslation(New Vector3(-position, 0))\n End Sub\nEnd Class\n<\/code><\/p>\n

The video illustrating this.
\n

https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/12\/xna_demo_17.mp4<\/a><\/video><\/div><\/p>\n

The source code.
\nxna_demo_23.2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In Article 16, we had animated a sprite. Now lets enhance the demo with a 2d camera following our character creating a simple scrolling effect. Note : a next article will cover parallax scrolling. We will simply had a camera class. Lets declare our camera, then instantiate it in loadcontent passing the width and height, […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","hentry","category-dotnet","category-xna","category-34-id","category-35-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=736"}],"version-history":[{"count":2,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":740,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/736\/revisions\/740"}],"wp:attachment":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}