How to create a Wallpaper step by step guide

[Kelteseth]

The wizard for creating wallpaper is not in place yet but you can still create one simply by creating a project.json https://kelteseth.gitlab.io/ScreenPlayDocs/project/project/ Project setup:

1. Create a new folder inside your save loctation (C:\Program Files (x86)\Steam\steamapps\workshop\content\672870)

2. Create a text file and call it project.json (not project.json.txt)

3. Past this into it project.json

{
    "description": "This is a description",
    "file": "file.webm",
    "preview": "preview.jpg",
    "previewGIF": "preview.gif",
    "previewWEBM": "preview.webm",
    "title": "My title",
    "type": "videoWallpaper"
}

Change the content to your liking. For example there are different types of wallpaper: https://kelteseth.gitlab.io/ScreenPlayDocs/project/project/#wallpaper-filetype-options

// A QML wallpaper:
"file": "main.qml",
"type": "qmlWallpaper"

// A HTML wallpaper:
"file": "main.html",
"type": "htmlWallpaper"

// A Video wallpaper:
"file": "video.webm",
"type": "videoWallpaper"

1. Now you can refresh (F5 or pull to refresh) at the Installed tab.

Change the content to your liking, for example:

project.json

{
    "description": "Quiet particles",
    "file": "main.qml",
    "monetization": false,
    "preview": "preview.png",
    "previewGIF": "preview.gif",
    "properties": {
        "Attractor": {
            "attStrength": {
                "from": 0,
                "stepSize": 100,
                "to": 100000,
                "type": "slider",
                "value": 8000000
            }
        },
        "Emitter": {
            "emitRate": {
                "from": 0,
                "stepSize": 1,
                "to": 2500,
                "type": "slider",
                "value": 25
            },
            "endSize": {
                "from": 0,
                "stepSize": 1,
                "to": 100,
                "type": "slider",
                "value": 18
            },
            "isEnabled": {
                "type": "bool",
                "value": true
            },
            "lifeSpan": {
                "from": 0,
                "stepSize": 100,
                "to": 10000,
                "type": "slider",
                "value": 5000
            },
            "sizeVariation": {
                "from": 0,
                "stepSize": 1,
                "to": 10,
                "type": "slider",
                "value": 4
            }
        },
        "ImageParticle": {
            "color": {
                "type": "color",
                "value": "#ffffff"
            },
            "imgOpacity": {
                "from": 0,
                "stepSize":" .05",
                "to": 1,
                "type": "slider",
                "value": 1
            },
            "source": {
                "formats": "*.png,*.jpg",
                "type": "file",
                "value": "backgroundGlow.png"
            }
        }
    },
    "tags": [
        "particles"
    ],
    "title": "QML particles",
    "type": "qmlWallpaper"
}

main.qml

import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0

Item {
    id: root
    anchors.fill: parent

    property int attStrength: 8000000
    //Emitter
    property bool isEnabled: true
    property int emitRate: 25
    property int lifeSpan: 5000
    property int size: 4
    property int endSize: 8
    property int sizeVariation: 4

    //Image
    property real imgOpacity: .75


    LinearGradient {
        id: gradient
        anchors.fill: parent
        cached: true
        start: Qt.point(0, 0)
        end: Qt.point(gradient.width, gradient.height)
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "#199EF1"
            }
            GradientStop {
                position: 1.0
                color: "#092E6C"
            }
        }
    }

    Item {
        anchors.fill: parent

        MouseArea {
            id: ma
            anchors.fill: parent
            hoverEnabled: true
            Component.onCompleted: {
                attractor.pointX = parent.width * .5
                attractor.pointY = 0
            }

            onPressed: {
                //attractor.enabled = true
            }
            onPositionChanged: {
                attractor.pointX = mouseX
                print()
                attractor.pointY = mouseY
                if (ma.pressed) {
                }
            }
            onReleased: {
                //attractor.enabled = false
            }
        }

        Attractor {
            id: attractor
            system: particleSystem
            affectedParameter: Attractor.Acceleration
            strength: root.attStrength
            proportionalToDistance: Attractor.InverseQuadratic
            anchors{
                top:parent.top
                topMargin: 100
                horizontalCenter: parent.horizontalCenter

            }
        }

        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            enabled: root.isEnabled
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
            }

            width: parent.width
            height: parent.height * .5
            system: particleSystem
            emitRate: root.emitRate
            lifeSpan: root.lifeSpan
            lifeSpanVariation: 1000
            size: root.size
            endSize: root.endSize
            sizeVariation: root.sizeVariation
            velocity: AngleDirection {
                angle: -90
                magnitude: 50
                magnitudeVariation: 25
                angleVariation: 10
            }
        }

        ImageParticle {
            height: 16
            width: 16
            source: "dot.png"
            system: particleSystem
            opacity: root.imgOpacity
        }

        Image {
            id: bgGlow
            width: parent.width * .75
            height: width
            opacity: .3
            source: "backgroundGlow.png"
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                bottomMargin: -width * .65
            }
            SequentialAnimation on opacity {
                loops: Animation.Infinite

                OpacityAnimator {
                    from: 0
                    to: .3
                    duration: 100000
                }
                OpacityAnimator {
                    from: .4
                    to: 0
                    duration: 100000
                }
            }
        }
    }
}