4

I have a Qt Quick game that uses pixel art. For example:

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
    }
}

original size

I want to scale the art, so I increase the size:

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
        width: 256
        height: 256
    }
}

bad scaled

The image becomes blurry. How can I scale the image while preserving its "sharpness", so that it looks like this:

good scaled

Mitch
  • 23,716
  • 9
  • 83
  • 122
  • would https://en.wikipedia.org/wiki/Seam_carving work? – Johannes Schaub - litb May 10 '14 at 11:12
  • @JohannesSchaub-litb Good question; I'm not sure. I'd like to stick to API provided by Qt Quick though. – Mitch May 10 '14 at 11:15
  • 1
    Are you asking, how to scale up without antialiasing/smoothing? My guess is, downvotes are, because some think you are asking how to generate smooth *and* sharp higher resolution image (which is in general case impossible). If you can add example image of desired outcome (make it with some paint program or whatever), that would clear things up a lot. – hyde May 12 '14 at 11:14
  • Good point, and thanks for the comment. I've been scratching my head about the downvotes (well, except the guy who downvoted me and voted to close this because I answered my own question). The reason I didn't mention anti-aliasing was because I thought that nearest neighbour was a form of anti-aliasing, and that I did want anti-aliasing, just a different type? Can you comment on this? For example, http://en.wikipedia.org/wiki/Nearest-neighbor_interpolation doesn't state whether it is or isn't. In any case, I'll update my question to add an example of the desired outcome. – Mitch May 12 '14 at 12:18
  • I don't know what the official terminology is, but to be "anti-aliasing", an algorithm would actually need to have something to reduce aliasing artifacts (compared against some baseline, I suppose). "Nearest Neighbor" does not, it just takes sample from signal and doesn't process it further to reduce aliasing. – hyde May 12 '14 at 12:55
  • Ah, I see. I just went to someone I know for clarification on this, and they said something along the lines of: "Nearest neighbor is a method for sampling pixels from a raster source (such as an image) and can be used for scaling images. In QPainter terms it is the "fast" transformation type. Antialiasing is about removing jaggies from the edges of polygons." – Mitch May 12 '14 at 13:27

1 Answers1

12

The image is blurry when scaled because the smooth property is true by default.

Primarily used in image based items to decide if the item should use smooth sampling or not. Smooth sampling is performed using linear interpolation, while non-smooth is performed using nearest neighbor.

Set it to false to stop this from happening:

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
        width: 256
        height: 256
        smooth: false
    }
}

For more information on scaling, see:

http://en.wikipedia.org/wiki/Image_scaling

Mitch
  • 23,716
  • 9
  • 83
  • 122