cl-SDL2 scaling an image tutorial

In the last tutorial we displayed an image in the window that we created. Depending on the size of the image that was used, it may have been either too big or too small for the window. This was because we had a window that was one size that was displaying an image that was another size without any scaling. Now we are going to fix this problem with only a few lines of code.

First we will make things easier by creating two global variables to hold the values that we will use for both the size of the window and what we want the image to be scaled to.

To do this add the following just under the require statements that you added in an earlier tutorial.

(defparameter *width* 800)
(defparameter *height* 600)

While you can add in whatever value that you want I will be using the default window values. (you will not want to enter values larger than your screen resolution as the window will not fit on the screen)

Next we will change some of the window values so that the window is set to the size placed in the variables above.

Because before we used the default values all we need to do as add the following after the title in the with-window macro call.
:w *width* :h *height*

Your with-window macro call should look now look like this

(sdl2:with-window (win :title "sdl-tutorial" :w *width* :h *height* :flags '(shown))

You can now test these changes and you should see a window that is the same size that you set. Feel free to change the variables values to see how it changes the window.

To scale the image we first need to tell it what size we want it to be. This is done using make-rect an passing it the value we want to use starting with the position and then the size.

(sdl2:make-rect 0 0 *width* *height*)

we have 0’s for the position because we want it to take up the entire window

change your code so that it looks like this

(let ((surf (sdl2:get-window-surface win))
(image (sdl2-image:load-image "image-file.jpg"))
(rect (sdl2:make-rect 0 0 *width* *height*)))

Now that we have our rect we now need to blit the image. We have a specific function to scale the image which is blit-scaled then we change the last value from nil to our rect variable.

from (sdl2:blit-surface image nil surf nil)
to (sdl2:blit-scaled iamge nil surf rect)

remember to free the rect that we used when it is no longer needed with

(sdl2:free-rect rect)

Now feel free to run your code to see that your image now scaled so that it fits in the window. You could also try changing some of the values entered into make-rect to see what happens.

At the end of the tutorial your code should look like this

(require :sdl2)
(require :sdl2-image)

(defparameter *width* 800)
(defparameter *height* 600)

(defun main ()
(sdl2:with-init (:everything)
(sdl2:with-window (win :title "sdl2-tutorial" :w *width* :h *height* :flags '(:shown))
(sdl2-image:init '(:jpg))
(let ((surf (sdl2:get-window-surface win))
(image (sdl2-image:load-image "image-file.jpg"))
(rect (sdl2:make-rect 0 0 *width* *height*)))
(sdl2:blit-scaled image nil surf rect )
(sdl2:update-window win)
(sdl2:delay 2000)
(sdl2:free-surface image)
(sdl2:free-rect rect)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s