How to create a Wallpaper step by step guide
-
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:
-
Create a new folder inside your save loctation (C:\Program Files (x86)\Steam\steamapps\workshop\content\672870)
-
Create a text file and call it project.json (not project.json.txt)
-
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"
- 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 } } } } }
-